React PureComponent 对于函数式Props传递的缺陷

一、问题产生

项目中为了改进效率，大量采用PureComponent代替原先的Component，来避免跟组件的重新渲染，带动所有子节点数的重新渲染。对于PureComponent来说，我们清楚的知道他只是在原有的Component基础上，通过shallowEqual浅比较，为我们提供了一层shouldComponentUpdate的判断。来避免我们在props和state不变的情况下，重复调用render函数，导致性能下降。大部分的改进很顺利，只需要提取浅层的props传递即可。但是对于有函数式的prop传递，例如下面的写法,则每次传递的引用都会改变，shallowEqual在判断的时候，就会判定为false,导致前功尽弃。

//--ParentComponent
render()
{
   
	return <ChildComponent onCallback={
   ()=>{
   //--do something}} />
}

或者

//--ParentComponent
render()
{
   
	return <ChildComponent onCallback={
   this.doSomeThing.bind(this)}/>
}

上面这两者可以通过在构造函数绑定this,或者使用箭头函数提升作用域的方式解决：

//--ParentComponent
onCallback = () =>{
   
	//--do something
}
render()
{
   
	return <ChildComponent onCallback={
   this.onCallback } />
}

或者

constructor()
{
   
	this.onCallback = this.onCallback.bind(this)