React Virtual DOM以及Diff算法

React Virtual DOM以及Diff算法

1. JSX到底是什么

JSX语法为了让React开发人员编写用户界面代码更加轻松。

React.createElement()用来创建Virtual DOM

2. DOM操作问题

大多数JavaScript框架对于DOM的更新远远超过其必须的更新，从而使得这种缓慢的操作变得更糟。

Virtual DOM出现的目的就是为了提高JavaScript操作DOM对象的效率。

3. 什么是Virtual DOM

在React中，每个DOM对象都有一个对应的Virtual DOM对象，它是DOM对象的JavaScript对象表现形式，其实就是使用JavaScript对象来描述DOM对象信息。比如DOM对象的类型是什么，它身上有哪有属性，它拥有哪些子元素。

<div className="container">
  <h3>Hello React</h3>
  <p>React is great </p>
</div>
{
  type: "div",
  props: { className: "container" },
  children: [
    {
      type: "h3",
      props: null,
      children: [
        {
          type: "text",
          props: {
            textContent: "Hello React"
          }
        }
      ]
    },
    {
      type: "p",
      props: null,
      children: [
        {
          type: "text",
          props: {
            textContent: "React is great"
          }
        }
      ]
    }
  ]
}

4. Virtual DOM如何提升效率

精准找出发生变化的DOM对象，只更新发生变化的部分。

在React第一次创建DOM对象后，会为每个DOM对象创建其对应的Virtual对象，在DOM对象发生更新之前，React会先更新所有的Virtual DOM对象，然后React会将更新后的Virtual DOM和更新前的Virtual DOM进行比较，从而找出发生变化的部分，React会将发生变化的部分更新到真实的DOM对象中，React仅更新必要更新的部分。

5. 创建Virtual DOM

在React代码执行前，JSX会被Babel转换为React.createElement方法的调用，在调用createElement方法时会传入元素的类型，元素的属性以及元素的子元素，crateElement方法的返回值为构建好的Virtual DOM对象。

{
   type: 'div',
   props: null,
   children: [{type: 'text', props: {textContent: 'hello'}}]
 }

6. 渲染VIrtual DOM对象为DOM对象

调用render方法

7. 为元素节点添加属性

• addEventListener
• setAttribute

8. 渲染组件

8.1 函数组件

type: ‘function’

8.2 类组件

render方法

9. Virtual DOM对比

10. ref 属性

11. key 属性