掘友等级
获得徽章 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 进行性能优化的目的。
鄙人拙见,如有纰漏,烦请指出,十分感谢!
GeekHub for GitHub v1.3.4更新啦~
新增炫酷黑金主题,并支持修改主题配色,赤橙黄绿青蓝紫还有粉,无论你是汉子抑或萌妹子总有一款配色适合你~
话说人生中第一次进App Store分类排行榜前5,感觉不错,欢迎下载体验~
App链接:apps.apple.com
刚上手ts 求指教!用react hook ts写了个表格组件。
摸鱼第44天
大前天看到蚂蚁金服的 云凤蝶 可视化搭建平台感觉很有意思,于是这两天就设计开发了一个可视化的搭建平台,左侧是路由编辑器,右侧是页面的组件编辑和预览,使用者只需要关注业务逻辑,页面的排版由render和算法自动排列,例如搜索按钮单独一行就靠右,少于三项搜索就一起靠右排列。
核心是render函数,nodejs的fs,递归组件和递归算法。
Ant Plus 4.0 发布!
◆ 全面适配 Ant Design 4.0
◆ React Hooks 重写,大幅优化性能
◆ 全新文档设计,优化内容与排版
◆ 所有 antd Form 示例的 antx 对比实现
github.com
日常用到flex grid布局简单汇总 明天再看一遍!
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. 一个应用程序,最最核心的,最最复杂的逻辑,就那么几个,绝不会多,所以对这部分页面代码一定要精益求精,逻辑、结构一定要优雅如水。
GitHub 核心功能都免费开放了?
仔细看就会发现,原来早期rAF的polyfill和函数节流用得是一样的套路。
下一页