You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
classChildextendsPureComponent{render(){const{ info }=this.props;console.log("render");return(<div><h1>my name is {info.name}</h1><p>i am {info.age} years old!</p></div>);}}classParentextendsPureComponent{state={info: fromJS({name: "misaka",age: 10}),age: 20};handleChangeAge=()=>{const{ age }=this.state;this.setState({age: age+1});};render(){const{ info, age }=this.state;return(<div><Childinfo={info}/>
I am Sakura, {age} years old. this is my child!
<buttononClick={this.handleChangeAge}>+1s</button></div>);}}
利用ImmutableJS实现Pure-Render
PureRender
是react应用中最常见的优化方式之一,顾名思义是纯·渲染,React的核心思想可以用一个表达式来概括view = f(model)
这个很简单的表达式阐述了一个最基本的思想,数据的更新触发视图的更新,如果把它看做一个纯函数,那么给定相同的输入必定得到相同的输出,简而言之就是如果state&props没有改变,理论上讲组件不会重新渲染
React生命周期有一个函数
shouldComponentUpdate
,看名字就知道这个函数决定了组件要不要更新(重新渲染),默认情况下这个函数始终返回true
但是过多的rerender势必会引起性能问题,所以在必要的情况下开发者需要自己手动实现shouldComponentUpdate:
事实上在较新版本的React中内置了一个已经实现shouldComponentUpdate方法的类,叫做
PureComponent
,使用时只要将原先的Component替换为PureComponent即可然而不管是上面那个简单的例子,还是PureComponent,它们实现的方式很简单,都是浅比较
对于基本数据类型,只需要对比值,而引用类型则只对比引用地址,试想一下如果有一个长度为50+的数组,单纯的
!==
浅对比就完全没有任何用处了,因为数组是引用类型,每次传来新的数组都是不同的引用,始终还是返回true,但是深对比带来的开销更大,到底如何取舍?答案是ImmutableData
什么是ImmutableData?
Immutablejs实现了List、Map等常用数据类型,分别对应js中的数组和对象
简单来说,当对一个immutabledata进行增删改操作时,并不会修改原本的数据,而是生成了新的immutable对象,如果没有任何修改则返回原对象
基本用法可参考官方文档
React中怎么用?
可以将组件state中的数据转为immutabledata,也可以将redux的state转为immutabledata
CodeSandbox在线示例
例如一个父子组件嵌套,父组件数据改变导致自身rerender从而引发子组件一起rerender,这种情况使用ImmutableData + PureComponent则可以很好的避免子组件的重复渲染
CodeSanBox在线示例
refs:
The text was updated successfully, but these errors were encountered: