apps.apple.com
北微
获得徽章 0
- #知识点记录# 今天看了 React.PureComponent 的源码，理解了一下浅比较和深比较。PureComponent 是对 shouldComponentUpdate 的浅比较实现，为什么是浅比较？这就是在性能和效果上做的取舍。
对象浅比较就是比较引用，引用相同，则为 true。深比较是比较值，即使是两个引用不同的对象，他们的值也会被一个一个拿出来进行比较。
在 React 中，在状态也就是 state 发生变化时，会对虚拟 DOM 进行 diff，然后重建对应节点。React 中始终贯穿数据不可变的思想，进行 diff 的时候，拿的是两个数据进行比对，它们的 reference 是不同的。如果进行深比较，会把对应的值拿出来，一一比对值。
而对于浅比较，在源码实现中是用的 Object.is()，这个方法只适用于比较基本类型，而对于对象这种引用类型，如果对象的引用不同就为 false。而 React 里面虚拟 DOM 的 diff，数据的引用就是不同的。所以 PureComponent 进行浅比较，state 里面的对象的变化它比较不出来，也就不会阻止 render。管他什么几层嵌套对象，只要是对象就比较不出来。因为引用不同。
所以 PureComponent ，只能比较出 state、props 里基本数据类型的变化，对象的变化比不出来，也就无法阻止对应的 render。所以，在实际开发中，使用 PureComponent，要注意对应组件里的 state 的数据结构是什么样的，否则达不到通过 PureComponent 进行性能优化的目的。
鄙人拙见，如有纰漏，烦请指出，十分感谢！展开88 - GeekHub for GitHub v1.3.4更新啦～
新增炫酷黑金主题，并支持修改主题配色，赤橙黄绿青蓝紫还有粉，无论你是汉子抑或萌妹子总有一款配色适合你～
话说人生中第一次进App Store分类排行榜前5，感觉不错，欢迎下载体验～
App链接：
apps.apple.com 展开2028 - Ant Plus 4.0 发布！
◆ 全面适配 Ant Design 4.0
◆ React Hooks 重写，大幅优化性能
◆ 全新文档设计，优化内容与排版
◆ 所有 antd Form 示例的 antx 对比实现github.com 展开521 - React前端状态管理心得
1. 没有银弹，redux也好，mobx也好，react-easy-state也好，能力加强的同时，学习成本，浏览器兼容成本也加大
2. 绝大大数页面的状态理清后，其实也想象中不那么复杂，首要的应该是注意以下几点：
（1）尽可能减少所需的状态（哪些才是真正需要的），很多数据了包含多维度的状态，不要制造状态(混乱)，真正重要的是数据，而非状态。深入理解，吃透你的数据。
（2）哪些是计算属性，计算属性（仅get，非set）尤其要提出来，不应该set的一定不要set的，逻辑上可能是同样的状态，但搞好两个状态，并同时去set，会导致真实世界混乱。
3. 组件拆分、属性的传递的逻辑性、正确性和清晰性也是状态管理的一部分，而且其重要性丝毫不亚于纯数据的状态。
（1）正确决定组件的从属关系，并尽量减少不必要的组件。（如同节约dom标签一样）
（2）在上面的前提下，属性的传递可以尽量控制在不要超过2层，这样props的数据流向也一目了解
（3）在jsx里，属性传递的写法应采取始终解构的写法，这样最接近函数参数传递的感觉，如：
<BtnGroup$ {...{ pageTitle, survey }} />
const BtnGroup$ = ({ pageTitle, survey }) => {})
（4）计算属性应尽量由上级组件传给下级，从而使尽可能多的组件成为仅接受props并渲染的纯函数组件。
（5）函数属性传递时有意义的命名至关重要。
4. 勿过度追求完美，尤其是在UI与交互上（最难处理的是动画），要做到完美，需要极其复杂的状态管理，应先有一些效果，在保证不至于把状态搞得一团糟，在完全想清楚了数据的逻辑后，逐步加强。
5. react-global-state-hook的非reducer的用法，细粒度的get、set其实基本够用，尤其对状态变化的跟踪（从代码层面跟踪，选中所有get或set）比redux并不差。
6. 一个应用程序，最最核心的，最最复杂的逻辑，就那么几个，绝不会多，所以对这部分页面代码一定要精益求精，逻辑、结构一定要优雅如水。展开316 - 【每日时报】2020.02.19
[文章] V8 团队发表了 The cost of JavaScript in 2019，介绍在新时代下我们对 JavaScript 代码的优化策略，文章内有视频； ：v8.dev
[资源] CSS 奇技淫巧，里面的案例都比较好：github.com
[类库] webpack-external-import 我觉得这个库，可以适用于微前端技术；主要目的是从其它 Webpack 包动态导入模块。在不同的应用程序之间共享轻松的代码：github.com
[工具] VSCode 插件 Better Comments 可以让注释区域高亮展示，支持（Alerts、Queries、Todos、Highlights）模式：marketplace.visualstudio.com
[工具] VSCode 插件 Console Utils 可以很方便的让变量进行 console.log 和配置 Snippets 配合，相当好用：marketplace.visualstudio.com
今天是每日时报陪伴您的第 313 天github.com 展开213
