子组件跟随父组件re-render
组件 re render 跟随
2023-09-11 14:15:30 时间
想象一下这种场景,一个父组件下面一大堆子组件。然后呢,这个父组件re-render。是不是下面的子组件都得跟着re-render。可是很多子组件里面是冤枉的啊!!很多子组件的props 和 state 然而并没有改变啊!!虽然virtual dom 的diff 算法很快。。但是性能也不是这么浪费的啊!!
class Child extends Component { render() { console.log("我re-render了"); const {name,age} = this.props; return ( <div> <span>姓名:</span> <span>{name}</span> <span> age:</span> <span>{age}</span> </div> ) } } const Person = pureRender(Child);
pureRender其实就是一个函数,接受一个Component。把这个Component搞一搞,返回一个Component看他pureRender的源代码就一目了然
function shouldComponentUpdate(nextProps, nextState) { return shallowCompare(this, nextProps, nextState); } function pureRende(component) { component.prototype.shouldComponentUpdate = shouldComponentUpdate; } module.exports = pureRender;
pureRender很简单,就是把传进来的component的shouldComponentUpdate给重写掉了,原来的shouldComponentUpdate,无论怎样都是return ture,现在不了,我要用shallowCompare比一比,shallowCompare代码及其简单,如下
function shallowCompare(instance, nextProps, nextState) { return !shallowEqual(instance.props, nextProps) || !shallowEqual(instance.state, nextState); }
一目了然。分别拿现在props&state和要传进来的props&state,用shallowEqual比一比,要是props&state都一样的话,就return false
相关文章
- 第一百九十九节,jQuery EasyUI,Panel(面板)组件
- 微信小程序----map组件实现(高德地图API实现wx.chooseLocation(OBJECT))
- 微信小程序----switch组件(开关选择器)
- reactjs大列表大表格渲染组件:react-virtualized
- 【视频】vue组件之$emit父子组件间值的传递
- 一些关于 SAP Spartacus 组件和模块延迟加载的问题和解答
- 【原创】.NET平台机器学习组件-Infer.NET连载(一)介绍
- uni-app实现组件菜单左右滑动并点击切换(选中居中显示)demo效果(整理)
- 低代码踩坑记文本组件不能正常换行
- (七十六)c#Winform自定义控件-表单验证组件-HZHControls
- 【Spring注解驱动开发】组件注册-@ComponentScan-自动扫描组件&指定扫描规则
- Vue2.x - 组件化编程
- 【Vue笔记】Vue组件的创建、使用以及父子组件数据通信常见的几种方式
- Vue双向绑定及Vue组件