虚拟DOM 和 diff 算法的简单理解

• 为何必须引用React
  JSX是React.createElement(component, props, …children)方法的语法糖。

• 自定义的React组件为何必须大写

如果是小写的话就会被当做一个字符串传入

<app>APP</app> => React.createElement('app',null,'APP')
<APP>APP</APP> => React.createElement(APP,null,'APP')

虚拟DOM

React 会将代码转化为 JavaScript 对象，然后这个对象会再转化为真实DOM。这个对象就是所谓的虚拟 DOM

• 原理： React 的内存中存放着一个虚拟DOM 数，对这个虚拟DOM数进行diff 算法的计算。
• 优点：只改变变更的部分，保证高效渲染
• 缺点：首次渲染大量DOM，多了一层虚拟DOM的计算，会比插入更慢

1. 打开babel 官网的试一试然后输入

import React from 'react';

export default ()=>{
	return <div className="cls">
      <span classname="cls2">345</span>
    </div>
}

var _default = () => {
  return /*#__PURE__*/ _react.default.createElement(
    "div",
    {
      className: "cls"
    },
    /*#__PURE__*/ _react.default.createElement(
      "span",
      {
        classname: "cls2"
      },
      "345"
    )
  );
};

1. 找一段代码console.log(ReactElement)

const Element = () => {
  return <div>123</div>;
};

==> 防止xss
从打印的结果可以看到有一个 $$typeof 属性，它是一个 Symbol 类型的变量。React中会把没有这个标识的组件过滤掉

React Diff 算法

React 通过大胆的假设，制定对应的 diff 策略，将 O(n3) 复杂度的问题转换成 O(n) 复杂度的问题

两个假设

1. 两个不同类型的元素会产生不同的树
2. 开发者可以通过key，来暗示哪些子元素在不同的渲染下保持稳定

三个策略

1. 忽略跨层级的移动操作
2. 拥有相同类型的两个组件将会形成相似的树形结构，拥有不同类型的两个组件将会产生不同的树形结构
3. 对于同一层级的一组子节点，它们可以通过唯一 key 进行区分

diff 具体优化

tree diff

只针对虚拟DOM树进行分层比较，不考虑节点的跨层级比较，因此，只需要遍历一遍DOM树

component diff

1. C和H属于不同类型的组件，不需要比较，直接重新创建
2. 如果是同类型组件，则通过shouldComponentUpdate 方法进行比较优化

element diff

element diff 就是通过唯一 key 来进行 diff 优化