React原理

#

关键数据结构

什么是tree shaking

// TODO

element对象

本质就是对UI的描述:

/*#__PURE__*/ 这个注释可以帮助webpack做tree shaking
function App() {
  return /*#__PURE__*/_jsxs("div", {
    id: "div",
    class: "div",
    children: [/*#__PURE__*/_jsx("span", {}), /*#__PURE__*/_jsx("p", {
      id: "p"
    })]
  });
}

jsx方法用于生成element对象

类型声明：

export interface ReactElementType {
    // 元素类型 
    $$typeof: symbol | number;

    type: ElementType;
    // for循环中的key，不加默认用index代替
    key: Key;

    // 组件的props
    props: Props;

    // 组件ref
    ref: Ref;

    // 我们自己的特殊标记
    __mark: string;
}

fiber对象

fiber对象是对react执行过程中元素状态的描述，打上一些标记等等