Some Notes
Search K

Appearance

<

27react源码解析 ​

基本概念认知 ​

react ​

import xxx from 'react'; 暴露了大部分的我们会用到的 API

  • createElement
  • Component
  • Children
  • hooks
  • context
  • createRef

JSX 与 ReactElement ​

jsx
const App = () => {
    return <div>hello</div>;
}
js
const App = () => {
    return /*#__PURE__*/
    	React.createElement("div", null, "hello");
}

ReactElement ​

通过 React.createElement 创建出 ReactElement

本质上只是一个对象, 记录了 jsx 上携带的属性

image-20220221150454245

组件 Component ​

  • class component
  • function component
  • host component

渲染器 render ​

协调器 reconciler ​

react 在不同宿主环境下, 需要调用不同的渲染器, 但是渲染器有共同的逻辑, 此部分就在 react-reconciler 下.

调度器 scheduler ​

react 的异步渲染, 会对不同优先级的渲染过程进行调度.

scheduler 包暴露与优先级相关的 API, 大多都还处于未稳定的版本.

事件系统 events ​

react 内部实现了一套事件系统, 相比于原生 dom 节约内存消耗. 当事件触发时, 内部创建合成事件进行处理, 合成事件对原生事件进行封装.

react 内部有一个事件池, 管理事件对象的创建和销毁.

Fiber ​

  • 能够让任务进行切片

  • 支持任务的可中断

  • 支持任务优先级

  • FiberRootNode

    rootFiberNode 可以从 root 的 dom 节点上访问到 rootFiberNode

    document.getElementById('root')._reactRootContainer._internalRoot

  • FiberNode

    • react element 对应的运行实例
    • 自身的实例类型 type
    • 与其他 fiber 的关系 child, sibling, return
    • 已处理未处理的信息 pendingProps, memoizedProps

    调用 createFiberFromElement 创建对应的 fiber.

构建 Fiber ​
jsx
const List = () => {
    return [
        <button/>,
        <Item/>,
        <Item/>,
        <Item/>
    ];
};

const Item = () => <div></div>;

image-20220222095155072

对 Fiber 进行更新 ​

image-20220222095356678

过期时间 ExpirationTime ​

react 通过优先级来调度渲染过程, 同时通过过期时间来保证低优先级的任务能够被顺利执行.

在并行渲染时使用, 暂时不是生产接口.

源码解析 ​

React.createElement ​

https://github.com/facebook/react/blob/v16.13.1/packages/react/src/ReactElement.js#L348

jsx
const App = () => {
    return /*#__PURE__*/
    	React.createElement("div", null, "hello");
}

ReactDOM.render 主流程 ​

ReactDOM.render - render 过程 ​

ReactDOM.render - commit 过程 ​

React 更新阶段 ​

Hooks useState ​

Hooks useCallback ​

React event ​