介绍
所谓的提升性能就是在某些场景下优化react的render渲染次数
- 普通组件的话+
shouldComponentUpdate
---------- 点击跳转介绍- true 执行 render
- false 不去执行 render
- 纯组件
PureComponent
内部采用浅比较实现的(只能比较基本数据类型,遇到数组对象就虚了) ---------- 点击跳转介绍 - 16.6版本后推出
react.memo
方法,可以配合函数式组件一起来去提升react性能。⬅⬅⬅⬅⬅ 本文介绍
前景提要(可略过)
- 当我们需要重复使用某个组件的时候,而且传值一样,那么我们可以把组件卸载 循环里面,但这样以来,当我们某个参数发生变化的时候,会重复多次执行该组件,这样对于性能的消耗是不小的,我们只是想让受到数据影响的地方发生渲染执行,而不是全部执行
render(){
let {list} = this.state;
return (
<ul>
{
list.map(item=>{
return <Three flag={item.flag} key={item.id} item={item} handleChange={this.handleChange}/>
})
}
</ul>
)
}
比如:
- 我们有三条数据,点击后改变 checked 的 true 或 false 的值
- 但是我们只改变其中的一条数据,其他也跟着渲染了
react.memo
为何不再在函数式组件里面使用 shouldComponentUpdate?
原因:函数式组件里面没有声明周期钩子
以下参考自 https://www.jianshu.com/p/9293daab4161
- 组件仅在它的
props
发生改变的时候进行重新渲染。通常来说,在组件树中 React 组件,只要有变化就会走一遍渲染流程。但是通过PureComponent
和React.memo()
,我们可以仅仅让某些组件进行渲染
PureComponent
要依靠class
才能使用。- 而
React.memo()
可以和function component
一起使用
React.memo(props => { //memo 里面就是子组件的函数式
return <div>这里是子函数里面的内容</div>;
});
工作原理:
当函数计算得到结果时就将该结果按照参数存储起来。采用这种方式时,如果另外一个调用也使用相同的参数,我们则可以直接返回上次存储的结果而不是再计算一遍。像这样避免既重复又复杂的计算可以显著地提高性能