react学习笔记1（diff算法和Component相关）

1. diff算法

1.1 diff 算法的作用

去掉多余的 DOM 操作，提升web app性能

1.2 reconcilition（调和）

• 定义：将Virtual DOM树转换成actual DOM树的最少操作的过程。diff 算法是调和的具体实现
• 过程： 渲染时调用 render 方法（返回 Virtual Dom 树），比较渲染前后 虚拟dom（Virtual Dom） 的差别，Rendering 时，只更新差别部分（精准update），以减少多余 Dom 操作

1.3 diff算法优化

• 传统 diff 算法 问题： 计算耗时，时间复杂度：O(n^3)
• react diff ：时间复杂度 O(n)
• react diff 的三大策略
  • 进行同层比较（tree diff）
  • 不同类的 React 组件，被当做不同的 Dom 结构而替换（component diff）
  • key prop：组件 身份标识，判断是否是同一组件 （element diff）

1.4 tree diff

• 跨层级Dom操作：创建节点，删除节点
• 官方建议：不要进行跨层级操作（使用显示/隐藏，代替删除/新增操作）

1.5 component diff

• 组件变化时，如果 virtual dom 没变，可通过 shouldComponentUpdate 方法控制是否需要 diff 运算
• 组件类不同（结构相似），则判断为 dirty component（脏组件），整个替换

1.6 element diff

• 同层节点 diff 操作：删除、插入、移动
• 移动：尽量减少将类似最后一个元素移动到列表首部的操作（时间复杂度：O(n)）
• 图：