react 浅聊

一、React Dom 本质

React会先将你的代码换成一个JavaScript对象，然后这个JavaScript对象再转换成真是的DOM。这个JavaScript对象就是所谓的虚拟DOM。

<div>
    <span>Hello ConardLi</span>
    <ul>
       <li>苹果</li>
       <li>橘子</li>
   </ul>
</div>

const VitrualDom = {
    type：'div',
    props: {class: 'title'},
    children: [{
        type: 'span',
        children: 'Hello ConardLi'
    }, {
        type: 'ul',
        children: [{
            type: 'li',
            children: '苹果'
        }， {
            type: 'li',
            children: '橘子'
        }]
    }]
}

二、React Dom 16.0现状

• React 16.0之前的版本虚拟dom的跟新采⽤的是循环和递归

  • 任务⼀旦开始，⽆法结束，直到任务结束，主线程⼀直被占⽤
  • 导致⼤量组件实例存在时，执⾏效率变低
  • ⽤户交互的动画效果，出现⻚⾯卡顿

三、Fiber

实现原理：

• 利⽤浏览器空闲时间执⾏，不会⻓时间占⽤主线程
• 将对⽐更新dom的操作碎⽚化
• 碎⽚化的任务，可以根据需要被暂停

实现流程： requestIdleCallback是浏览器提供的API，其利⽤浏览器空闲时间执⾏任务，当前任务可被终⽌，优先执⾏更⾼级别的任务

requestIdleCallback(function(deadline){
    // deadline.timeRemaing() 获取浏览器额空余时间
})

对应属性：

Fiber 实现流程：

• 将虚拟dom对象构建成Fiber对象
• 根据fiber对象渲染成真实dom

四、⽣命周期

16.0之前

• 初始化-挂载props-初始化state-render-完成
• 获取数据完毕-更新state-diff-render-完成

• 组件⾃⼰setState触发更新
• ⽗组件触发传给⼦组件的props值变化，引发⼦组件更新

shouldComponentUpdate---作用比较新旧props是否相同，相同就return componentWillReceiveProps---父组件重传props时会调用这个方法

16.0之后

• componentWillMount
• componentWillReceiveProps
• componentWillUpdate
• shouldComponentUpdate

五、differ算法

• 通过state计算出新的fiber节点
• 对⽐节点的tag和key确定节点操作（修改，删除，新增，移动）
• effectTag标记fiber对象
• 收集所有标记的fiber对象，形成effctList
• Commit阶段⼀次性处理所有变化的节点