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 会丢失。