1. 函数组件jsx编译处理

  1. function App() {
  2.     const [count, setCount] = React.useState(0)
  3.     return <div>
  4.         <div>Hello World</div>
  5.         <div>Number: {count}</div>
  6.         <button onClick={() => setCount(v => v + 1)}>Increment</button>
  7.     </div>
  8. }
  9. ReactDOM.render(App, document.querySelector('#app'))

App是一个Element 不是ReactNode

编译输出

  1. const AppElement = {
  2.     $$typeof: Symbol(react.element),
  3.     _store: { validated: false },
  4.     ref: null,
  5.     props: {},
  6.     _source: null,
  7.     _owner: null,
  8.     _self: null,
  9.     key: null,
  10.     type: function App() {
  11.         var _React$useState = React.useState(0)
  12.         _React$useState2 = _slicedToArray(_React$useState, 2)
  13.         count = _React$useState2[0]
  14.         setCount = _React$useState2[1]
  15.         return React.createElement(
  16.             'div',
  17.             null,
  18.             React.createElement(
  19.                 'div',
  20.                 null,
  21.                 'Hello World',
  23.             ),
  24.             React.createElement(
  25.                 'div',
  26.                 null,
  27.                 'number:',
  28.                 count,
  29.             ),
  30.             React.createElement(
  31.                 'button',
  32.                 {
  33.                     onClick: function (v) {
  34.                         return setCount(function (v) {
  35.                             return v + 1;
  36.                         });
  37.                     },
  38.                 },
  39.                 'Increment',
  40.             )
  41.         )
  42.     }
  43. }

2. render方法处理

2.1 isValidContainer

检查是否合法的容器组件 我们给的是document.querySelector(‘#app’) 符合条件

2.2 isContainerMarkedAsRoot

检查是否根节点

3. legacyRenderSubtreeIntoContainer

很明显只有几个地方调用且互斥的情况 所以整个react执行流程 该方法只执行了一次
把子树放入容器中

3.1 topLevelUpdateWarning 顶层应用更新

顶层应用更新告警 一般是组件更新 顶层应用的更新不知道会发生啥

3.2 _reactRootContainer应用根节点

react应用根节点

3.3 getReactRootElementInContainer

3.4 createContainer 调起创建根节点方法

3.5 createFiberRoot 创建根fiber

3.6