高德纳: "我们应该忘记忽略很小的性能优化,可以说97%的情况下,过早的优化是万恶之源, 而我们应该关心对性能影响最关键的另外3%的代码。"
优化并不嫌早。因为,对性能影响最关键的部分,往往涉及解决方案核心,决定整体的架构, 将来要改变的时候牵扯更大。
但是并不是将之前的渲染内容全部抛弃重来,借助Virtual DOM,React能够计算出对DOM 树的最少修改,这就是React默认情况下渲染都很迅速的秘诀;
shouldComponentUpdate(nextProp,nextState)
shouldComponentUpdate(nextProp,nextState){
return (nextProp.completed !== this.props.completed) ||
(nextProp.text !== this.props.text)
}
shouldComponentUpdate
的默认实现。<div> <Todos /> </div> 我们想要更新成这样: <span> <Todos /> </span>
>1. 那么在作比较的时候,一看根节点原来是div,新的是span,类型就不一样了,那么这个算法就废弃之前的div包括里面的所有子节点,
从新构建一个span节点和子节点;
>2. 很明显因为根节点不同就将所有的子节点从新构建,这很浪费,但是为了避免O(N*3)的时间复杂度,React这能选择这种比较简单、快捷的方法;
>3. 所以,作为开发者,我们一定要避免上面的浪费的情景出现
<ul> <TodoItem text = "First" /> <TodoItem text = "Second" /> </ul>
<ul> <TodoItem text = "First" /> <TodoItem text = "Second" /> <TodoItem text = "Third" /> </ul>
<ul> <TodoItem text = "Zero" /> <TodoItem text = "First" /> <TodoItem text = "Second" /> </ul>
<ul> <TodoItem key={1} text = "First" /> <TodoItem key={2} text = "Second" /> </ul>
<ul>
todos.map((item,index) => {
<TodoItem
key={index}
text={item.text}
/>
})
</ul>
使用数组下标作为key值,看起来唯一,但不稳定,因为随着todos数组值的不同,同样一个组件实例在不同的更新过程中数组的下标完全可能不同, 把下标当做可以就会让React乱套,记住key不仅要唯一还要确保稳定不可变
需要注意:虽然key是一个prop,但是接受key的组件不能读取key的值,因为key和ref是React保留的两个特殊prop,并没有预期让组将直接访问。