diff算法和渲染/更新流程

渲染流程

  • 首先会执行  render 方法拿到组件的结构
  • 如果拿到的结构是  jsx 则会调用  React.createElement() 生成虚拟 DOM 
  • 根据虚拟 DOM 生成真实 DOM 

更新流程

  • 组件的  props 或  this.state 发生改变时执行  render() 方法
  • 执行完  render() 方法后拿到组件的结构,如果结构是  jsx 则会调用  React.createElement() 生成新的虚拟 DOM 
  • 将新的虚拟 DOM 和旧的虚拟 DOM 进行 dirr 算法 比较
  • 每发现一个新旧 DOM 不一样时,就会创建一个  mutation 对象来记录不同
  • 全部比较完毕后,根据  mutation 对象来更新真实 DOM 

React-diff 算法思想

  • 只会比较同层元素
  • 只会比较同位置元素(默认)
  • 比较过程中相同类型元素做修改 ,不同类型元素重新创建

diff算法和渲染/更新流程

 

diff算法和渲染/更新流程

 

上一篇:React生命周期钩子函数


下一篇:【技美百人计划】图形 3.7 移动端TB(D)R架构基础