过早的优化
在没有任何量化证据的情况下开发者对性能优化的猜测
- 例1
<Foo style={{color:"red"}}>
性能低于
let foostyle={color:"red"};//只执行一次,不放在render()中
<Foo style={footstyle}>
- 例2
<button onClick={this.onClickIncrementButton.bind(this)}></button>
或者
<button onClick={()=>{...}}></button>
性能低于
this.onClickIncrementButton=this.onClickIncrementButton.bind(this)//写在constructor()中
<button onClick={this.onClickIncrementButton}></button>
事实上,我们经常把this.onClickIncrementButton设为父组件的一个属性
react-redux控制下的shouldComponentUpdate()判断this.props与nextprops是否相等的依据
- 数值/字符串,是否相等
- 对象/函数,二者是否指向同一个js对象(是否存在深拷贝关系)
因此,在shouldComponentUpdate中,如果this.props与nextprops为对象/函数
- 对于不变的节点,应该使this.props与nextprops指向同一js对象
- 对于改变的节点,应该使this.props与nextprops指向不同的js对象
但实际上,大多数情况我们无法确定那些节点会被改变,所以通常全部进行浅拷贝(在reducer中进行)