React(论优化)

过早的优化

在没有任何量化证据的情况下开发者对性能优化的猜测

• 例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中进行)