React(1) Diff 算法中的 key
1. diff算法
关键点在于 key,key是虚拟dom 中的标识,当列表数据变化产生新的虚拟dom,React 会把前后新旧虚拟dom 进行 diff 对比
- key 不变:
- 对应的 遍历item 数据不变,直接使用原始真实dom
- 对应的 遍历item 数据改变,更新原始真实dom
- key 改变:
- 原 key 改变,销毁原始真实dom,创建新的虚拟dom,随后渲染真实dom 到页面
- 新 key 产生,创建新的虚拟dom,随后渲染真实dom 到页面
若用 index 作为 key 值,会造成性能降低,特殊情况下甚至出现意料之外的错误
- 新增、删除、排序时,index 不变,内容错位,会引起大范围的真实dom 更新,效率低
- item 中包含隐性状态,如input框中的输入内容,会带来错误的真实dom 更新
2. 事件绑定中丢失的this
class 组件中,给元素添加事件时,class 的方法默认不会绑定 this,当调用这个方法的时候,this 的值为 undefined。
class Comp extends React.Component {
clickHandle(){}
render (
<Comp onClick={this.clickHandle} />
)
}
如上,react 中绑定事件时,传递的不是字符串,而是一个方法,onClick 即为中间变量,render 方法执行时,会解析生成一个托管对象,事件是委托在这个对象上的 onClick 中。因此,调用时,this 会丢失。