
获得徽章 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