React-diff算法

React 渲染流程

• 执行 render 方法

<div>
    <div><p>我是段落</p></div>
    <div><span>我是span</span></div>
</div>

• 将 JSX 转换成 createElement

React.createElement("div", null,
    React.createElement("div", null,
        React.createElement("p", null, "我是段落")),
    React.createElement("div", null,
        React.createElement("span", null, "我是span"))
);

• 执行 createElement 创建虚拟 DOM, 得到虚拟 DOM 树

{
 targetName: 'div',
 children:[
    {
     targetName: 'div',
     children:[
        {
         targetName: 'p'
        }
     ]
    },
    {
     targetName: 'div',
     children:[
        {
         targetName: 'span'
        }
     ]
    }
 ]
}

• 根据虚拟 DOM 树在界面上生成真实 DOM

React 更新流程

• props/state 发生改变
• render 方法重新执行
• 将 JSX 转换成 createElement
• 利用 createElement 重新生成新的虚拟 DOM 树
• 新旧虚拟 DOM 通过 diff 算法 进行比较
• 每发现一个不同就生成一个 mutation
• 根据 mutation 更新真实 DOM

React-Diff 算法

• 只会比较同层元素
• 只会比较 同位置 元素(默认)

在比较过程中:

• 同类型元素做修改
• 不同类型元素重新创建

官方文档：https://zh-hans.reactjs.org/docs/reconciliation.html#the-diffing-algorithm