React进阶之React焦点源码剖析（一） - ToB企服应用市场:ToB评测及商务社交产业平台

// index.js
import ReactDOM from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
// ReactDOM.render(<App />, rootElement);
ReactDOM.createRoot(rootElement).render(<App />);
// APP.js
import "./styles.css";
export default function App() {
const len = 3000;
return (
<ul>
{Array(len)
.fill(0)
.map((_, i) => (
<li>{i}</li>
))}
</ul>
);
}

复制代码

ReactDOM.createRoot(rootEl).render(<App />)

复制代码

// 更新工作从递归变成了可以中断的循环过程。每次循环都会调用shouldYield判断当前是否有剩余时间。
/** @noinline */
function workLoopConcurrent() {
// Perform work until Scheduler asks us to yield
while (workInProgress !== null && !shouldYield()) {
workInProgress = performUnitOfWork(workInProgress);
}
}

复制代码

function FiberNode(
tag: WorkTag,
pendingProps: mixed,
key: null | string,
mode: TypeOfMode,
) {
// Instance，静态节点的数据结构属性
this.tag = tag;
this.key = key;
this.elementType = null;
this.type = null;
this.stateNode = null;
// Fiber，用来链接其他fiber节点形成的fiber树
this.return = null;
this.child = null;
this.sibling = null;
this.index = 0;
this.ref = null;
// 作为动态的工作单元的属性
this.pendingProps = pendingProps; //即将应用到组件上新属性相当于是新值newValue
this.memoizedProps = null; // 上次渲染时使用的属性值相当于是旧值oldValue
this.updateQueue = null;
this.memoizedState = null;
this.dependencies = null;
this.mode = mode;
// 记录变化的节点 effectlist=>render
this.effectTag = NoEffect;
this.subtreeTag = NoSubtreeEffect;
this.deletions = null;
this.nextEffect = null;
// effectslist链 = firstEffect -> nextEffect -> nextEffect -> lastEffect => 交给render => 渲染
this.firstEffect = null;
this.lastEffect = null;
// 作为调度优先级的属性
this.lanes = NoLanes;
this.childLanes = NoLanes;
// 指向该fiber在另一次更新时对应的fiber
this.alternate = null;
if (enableProfilerTimer) {
// Note: The following is done to avoid a v8 performance cliff.
//
// Initializing the fields below to smis and later updating them with
// double values will cause Fibers to end up having separate shapes.
// This behavior/bug has something to do with Object.preventExtension().
// Fortunately this only impacts DEV builds.
// Unfortunately it makes React unusably slow for some applications.
// To work around this, initialize the fields below with doubles.
//
// Learn more about this here:
// https://github.com/facebook/react/issues/14365
// https://bugs.chromium.org/p/v8/issues/detail?id=8538
this.actualDuration = Number.NaN;
this.actualStartTime = Number.NaN;
this.selfBaseDuration = Number.NaN;
this.treeBaseDuration = Number.NaN;
// It's okay to replace the initial doubles with smis after initialization.
// This won't trigger the performance cliff mentioned above,
// and it simplifies other profiler code (including DevTools).
this.actualDuration = 0;
this.actualStartTime = -1;
this.selfBaseDuration = 0;
this.treeBaseDuration = 0;
}
if (__DEV__) {
// This isn't directly used but is handy for debugging internals:
this._debugID = debugCounter++;
this._debugSource = null;
this._debugOwner = null;
this._debugNeedsRemount = false;
this._debugHookTypes = null;
if (!hasBadMapPolyfill && typeof Object.preventExtensions === 'function') {
Object.preventExtensions(this);
}
}
}

复制代码

import React, { Component } from 'react';
class Header extends Component {
render() {
return <h1>{this.props.title}</h1>;
}
}
function Content(props) {
return (
<div>
<p>{props.text}</p>
<Footer />
</div>
);
}
class Footer extends Component {
render() {
return <footer>Footer Content</footer>;
}
}
class App extends Component {
render() {
return (
<div>
<Header title="Welcome to My App" />
<Content text="This is some example content." />
</div>
);
}
}
export default App;

复制代码