Shulou(Shulou.com)06/02 Report--

This article mainly explains "learning React from scratch". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "learning React from scratch".

0: start with the simplest React rendering

Const element = Hello Worldwide; const container = document.getElementById ("root"); ReactDOM.render (element, container)

The above three lines of code is a simple React application: render a Hello World on the root root node! H2 node.

The goal of the first step is to replace the React code with native DOM.

JSX

Readers familiar with React will know that we directly return a structure similar to a html template when the component is rendered, which is called JSX. JSX is essentially JS, a syntax candy rather than a html template. (compared to html templates, you need to learn all kinds of strange grammars such as {{# if value}}, JSX can directly use JS native & & | | map reduce and other grammars are easier to learn and more expressive). Generally speaking, babel is required to cooperate with @ babel/plugin-transform-react-jsx plug-in (the babel conversion process is not the focus of this article. If you are interested, you can read the plug-in source code) to call React.createElement. The input parameters of the function are as follows:

React.createElement (type, [props], [... children])

For example, in the example above, the Hello wordkeeper is replaced by the call to createElement:

Const element = React.createElement ('H2, {title: 'hello'},' Hello Worldwide')

React.createElement returns an object that contains information about the element (element), namely:

Const element = {type: "H2", props: {title: "hello", / / createElement the third and later parameters are moved to props.children children: "Hello World!",},}

The official implementation of react also includes many additional attributes, which are not covered in this article for simplicity, see the official definition.

This object describes the information React needs to create a node (node). Type is the name of the DOM node, such as H2, or it can be a function component, which will be discussed later. Props contains attributes of all elements (such as title) and special attributes children,children can contain other elements, from root to leaf can form a complete tree, that is, describing the entire UI interface.

To avoid ambiguity, "element" refers to "React elements" and "node" refers to "DOM elements".

ReactDOM.render

Next replace the ReactDOM.render call, where React updates the element to DOM.

Const element = {type: "H2", props: {title: "hello", children: ["Hello World!"],},}; const container = document.getElementById ("root"); const node = document.createElement (element.type); node ["title"] = element.props.title; const text = document.createTextNode (""); text ["nodeValue"] = element.props.children; node.appendChild (text); container.appendChild (node)

To contrast element objects, first create the node with element.type, and then assign the non-children attribute (in this case, title) to the node.

Then create a children node. Because children is a string, create a textNode node and assign the string to nodeValue. The reason for using createTextNode instead of innerText here is to facilitate unified processing later.

Then insert the children node text into the child node of the element node, and finally insert the element node into the root node to complete the replacement of the React.

The object that JSX converts to describe the UI interface, such as the code element above, is the so-called virtual DOM, and the relative node is the real DOM. The render/ rendering process is the process of converting a virtual DOM into a real DOM.

I: implement the createElement function

The first step is to implement the createElement function, which converts JSX to JS. Taking the following new rendering as an example, createElement transforms the JSX structure into an element description object.

Const element = (bar); / / equivalent conversion? Const element = React.createElement ("div", {id: "foo"}, React.createElement ("a", null, "bar"), React.createElement ("b")); const container = document.getElementById ("root"); ReactDOM.render (element, container)

As in the previous example, createElement returns an element object that contains type and props, describing the node information.

/ / the latest ECMAScript remaining parameters and expansion syntax (Rest parameter/Spread syntax) are used here. / / reference https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax / / Note: here children is always the array function createElement (type, props,... children) {return {type, props: {... props, children: children.map (child = > typeof child = "object"? Child: createTextElement (child),},}} function createTextElement (text) {return {type: "TEXT_ELEMENT", props: {nodeValue: text, children: [],},}}

Children may contain basic type values such as strings or numbers, which are wrapped into TEXT_ELEMENT special types to facilitate unified processing later.

Note: React does not wrap values such as strings, and empty arrays will not be created without children. For simplicity, unifying this approach will simplify our code.

We call the framework of this article redact to distinguish between react. The example app is as follows.

Const element = Redact.createElement ("div", {id: "foo"}, Redact.createElement ("a", null, "bar"), Redact.createElement ("b")); const container = document.getElementById ("root"); ReactDOM.render (element, container)

But we are still used to using JSX to write components, can we still use it here? The answer is yes, just add a line of comments.

/ * * @ jsx Redact.createElement * / const element = (bar); const container = document.getElementById ("root"); ReactDOM.render (element, container)

Notice that the first line comment @ jsx tells babel to replace the default React.createElement with Redact.createElement. Or modify the pragma entry of the .babelrc configuration file directly so that you don't have to add comments every time.

{"presets": [["@ babel/preset-react", {"pragma": "Redact.createElement",}]]}

II: implement the render function

To implement our render function, you only need to add nodes to DOM, followed by delete and update operations.

Function render (element, container) {/ / create node const dom = element.type = = "TEXT_ELEMENT"? Document.createTextNode (""): document.createElement (element.type); / / assignment attribute (props) const isProperty = key = > key! = = "children"; Object.keys (element.props) .filter (isProperty) .forEach (name = > {dom [name] = element.props [name]}); / / Recursive traversal of child node element.props.children.forEach (child = > render (child, dom)) / / insert parent container.appendChild (dom);}

The above code is placed in CodeSandbox (online development environment), the project is based on Create React App template, try to change the following code verification.

Redact-1

III: concurrent mode / Concurrent Mode

Before we delve into other React features, let's ReFactor the code to introduce React's latest concurrency pattern (this feature has not been officially released as of the publication of this article).

Readers may wonder that we are currently implementing the concurrent pattern before even the most basic component state update has been implemented. in fact, the code logic is still very simple, and it is much easier to restructure now than to realize all the functions later. This is the truth that long-term accumulation is not easy to solve.

It is easy for experienced developers to find that there is a problem with the above render code. It recursively traverses the whole tree when rendering child nodes, and it is easy to block the main thread (and stack over flow, stack overflow) when our page is very complex. We all know that each page is single-threaded (without considering worker threads). The main thread blocking will cause the page to fail to respond to high-priority operations in time, such as users clicking or rendering animation. The page gives users the negative impression that it is "very slow and difficult to use", which is certainly not what we want.

Therefore, ideally, we should split the render into more subdivided units, and each time the work of each unit is completed, the browser is allowed to interrupt the rendering in response to higher priority work, a process known as "concurrent mode".

Here we use requestIdleCallback as a browser API to implement. This API is a bit like setTimeout, but instead of telling the browser when to execute the callback function, the browser actively executes the callback function when the thread is idle (idle).

React no longer uses this API, but uses the scheduler / scheduler package to implement its own scheduling algorithm. But their core ideas are similar, and requestIdleCallback is sufficient for simplicity.

Let nextUnitOfWork = null function workLoop (deadline) {let shouldYield = false while (nextUnitOfWork & &! shouldYield) {nextUnitOfWork = performUnitOfWork (nextUnitOfWork) / / callback function input parameter deadline can tell us how much time is available in this rendering cycle / / exit the callback after less than 1 millisecond, and wait for the browser to be idle again shouldYield = deadline.timeRemaining ()

< 1 } requestIdleCallback(workLoop) } requestIdleCallback(workLoop) // 注意，这个函数执行完本次单元任务之后要返回下一个单元任务 function performUnitOfWork(nextUnitOfWork) { // TODO } IV: Fibers 数据结构 为了方便描述渲染树和单元任务，React 设计了一种数据结构 "fiber 树"。每个元素都是一个 fiber，每个 fiber 就是一个单元任务。 假如我们渲染如下这样一棵树： Redact.render( , container ) 用 Fiber 树来描述就是： 在 render 函数我们创建根 fiber，再把它设为 nextUnitOfWork。在 workLoop 函数把 nextUnitOfWork 给 performUnitOfWork 执行，主要包含以下三步： 鸿蒙官方战略合作共建--HarmonyOS技术社区 把元素添加到 DOM 为元素的后代创建 fiber 节点 选择下一个单元任务，并返回 为了完成这些目标需要设计的数据结构方便找到下一个任务单元。所以每个 fiber 直接链接它的第一个子节点(child)，子节点链接它的兄弟节点(sibling)，兄弟节点链接到父节点(parent)。 示意图如下(注意不同节点之间的高亮箭头)：

When we finish the cell task of a fiber, if he has a child node / child, this node is used as a nextUnitOfWork. As shown in the following figure, when the div unit task is completed, the next unit task is H2.

If a fiber does not have a child, we use the sibling node / sibling as the next task unit. As shown in the following figure, the p node has sibling instead of child, so the next task unit is node a.

If an fiber has neither child nor sibling, find the sibling node of the parent node. An and H3 as shown in the following figure.

If the parent node does not have a sibling node, continue to look up until a sibling node is found or the fiber root node is reached. Arriving at the root node means that the render task is all completed.

Express this idea in code as follows:

/ / the logic of render was moved to this function function createDom (fiber) {const dom = fiber.type = = "TEXT_ELEMENT"? Document.createTextNode (""): document.createElement (fiber.type); const isProperty = key = > key! = = "children"; Object.keys (fiber.props) .filter (isProperty) .forEach (name = > {dom [name] = fiber.props [name];}); return dom } function render (element, container) {/ / create the root fiber, set to the next unit task nextUnitOfWork = {dom: container, props: {children: [element]}};} let nextUnitOfWork = null; function workLoop (deadline) {let shouldYield = false; while (nextUnitOfWork & &! shouldYield) {nextUnitOfWork = performUnitOfWork (nextUnitOfWork); shouldYield = deadline.timeRemaining ()

< 1; } requestIdleCallback(workLoop); } // 一旦浏览器空闲，就触发执行单元任务 requestIdleCallback(workLoop); function performUnitOfWork(fiber) { if (!fiber.dom) { fiber.dom = createDom(fiber); } // 子节点 DOM 插到父节点之后 if (fiber.parent) { fiber.parent.dom.appendChild(fiber.dom); } // 每个子元素创建新的 fiber const elements = fiber.props.children; let index = 0; let prevSibling = null; while (index < elements.length) { const element = elements[index]; const newFiber = { type: element.type, props: element.props, parent: fiber, dom: null }; // 根据上面的图示，父节点只链接第一个子节点 if (index === 0) { fiber.child = newFiber; } else { // 兄节点链接弟节点 prevSibling.sibling = newFiber; } prevSibling = newFiber; index++; } // 返回下一个任务单元（fiber） // 有子节点直接返回 if (fiber.child) { return fiber.child; } // 没有子节点则找兄弟节点，兄弟节点也没有找父节点的兄弟节点， // 循环遍历直至找到为止 let nextFiber = fiber; while (nextFiber) { if (nextFiber.sibling) { return nextFiber.sibling; } nextFibernextFiber = nextFiber.parent; } } V: render 和 commit 阶段 我们的代码还有一个问题。 每完成一个任务单元都把节点添加到 DOM 上。请记住，浏览器是可以打断渲染流程的，如果还没渲染完整棵树就把节点添加到 DOM，用户会看到残缺不全的 UI 界面，给人一种很不专业的印象，这肯定不是我们想要的。因此需要重构节点添加到 DOM 这部分代码，整棵树（fiber）渲染完成之后再一次性添加到 DOM，即 React commit 阶段。 具体来说，去掉 performUnitOfWork 的 fiber.parent.dom.appendChild 代码，换成如下代码。 function createDom(fiber) { const dom = fiber.type == "TEXT_ELEMENT" ? document.createTextNode("") : document.createElement(fiber.type) const isProperty = key =>

Key! = = "children" Object.keys (fiber.props) .filter (isProperty) .forEach (name = > {dom [name] = fiber.props [name]}) return dom} / / add the function, submit the root node to DOM function commitRoot () {commitWork (wipRoot.child); wipRoot = null;} / / the new subfunction function commitWork (fiber) {if (! fiber) {return } const domParent = fiber.parent.dom; domParent.appendChild (fiber.dom); / / Recursive child node and sibling node commitWork (fiber.child); commitWork (fiber.sibling);} function render (element, container) {/ / render record wipRoot wipRoot = {dom: container, props: {children: [element],},}; nextUnitOfWork = wipRoot;} let nextUnitOfWork = null / / added variable to track the root fiber let wipRoot = null; function workLoop (deadline) {let shouldYield = false; while (nextUnitOfWork & &! shouldYield) {nextUnitOfWork = performUnitOfWork (nextUnitOfWork); shouldYield = deadline.timeRemaining ()

< 1; } // 当 nextUnitOfWork 为空则表示渲染 fiber 树完成了， // 可以提交到 DOM 了 if (!nextUnitOfWork && wipRoot) { commitRoot(); } requestIdleCallback(workLoop); } // 一旦浏览器空闲，就触发执行单元任务 requestIdleCallback(workLoop); function performUnitOfWork(fiber) { if (!fiber.dom) { fiber.dom = createDom(fiber); } const elements = fiber.props.children; let index = 0; let prevSibling = null; while (index < elements.length) { const element = elements[index]; const newFiber = { type: element.type, props: element.props, parent: fiber, dom: null, }; if (index === 0) { fiber.child = newFiber; } else { prevSibling.sibling = newFiber; } prevSibling = newFiber; index++; } if (fiber.child) { return fiber.child } let nextFiber = fiber; while (nextFiber) { if (nextFiber.sibling) { return nextFiber.sibling; } nextFibernextFiber = nextFiber.parent; } } VI: 更新和删除节点/Reconciliation 目前我们只添加节点到 DOM，还没考虑更新和删除节点的情况。要处理这2种情况，需要对比上次渲染的 fiber 和当前渲染的 fiber 的差异，根据差异决定是更新还是删除节点。React 把这个过程叫 Reconciliation。 因此我们需要保存上一次渲染之后的 fiber 树，我们把这棵树叫 currentRoot。同时，给每个 fiber 节点添加 alternate 属性，指向上一次渲染的 fiber。 代码较多，建议按 render ⟶ workLoop ⟶ performUnitOfWork ⟶ reconcileChildren ⟶ workLoop ⟶ commitRoot ⟶ commitWork ⟶ updateDom 顺序阅读。 function createDom(fiber) { const dom = fiber.type === "TEXT_ELEMENT" ? document.createTextNode("") : document.createElement(fiber.type); updateDom(dom, {}, fiber.props); return dom; } const isEvent = key =>

Key.startsWith ("on"); const isProperty = key = > key! = = "children" & &! isEvent (key); const isNew = (prev, next) = > key = > prev [key]! = next [key]; const isGone = (prev, next) = > key = >! (key in next) / / add function Update DOM node attributes function updateDom (dom, prevProps = {}, nextProps = {}) {/ / attributes starting with "on" as events to handle / / remove old or changed event handlers Object.keys (prevProps) .filter (isEvent) .filter (key = >! (key in nextProps) | | isNew (prevProps) NextProps) (key) .forEach (name = > {const eventType = name.toLowerCase () .forEach (2) Dom.removeEventListener (eventType, prevProps [name]);}); / / remove the old attribute Object.keys (prevProps) .filter (isProperty) .filter (isGone (prevProps, nextProps)) .forEach (name = > {dom [name] = "";}) / / add or update attributes Object.keys (nextProps) .filter (isProperty) .filter (isNew (prevProps, nextProps)) .forEach (name = > {/ / React specifies that the style inline style is the hump named object / / each attribute of style is assigned a separate value if (name = = "style") {Object.entries (nextProps [name]) .forEach (([key, value]) = > {dom.style [key] = value according to the specification });} else {dom [name] = nextProps [name];}}); / / add a new event handler function Object.keys (nextProps) .filter (isEvent) .filter (isNew (prevProps, nextProps)) .forEach (name = > {const eventType = name.toLowerCase (). Substring (2); dom.addEventListener (eventType, filter [name])) });} function commitRoot () {deletions.forEach (commitWork); commitWork (wipRoot.child); currentRoot = wipRoot; wipRoot = null;} function commitWork (fiber) {if (! fiber) {return;} const domParent = fiber.parent.dom; if (fiber.effectTag = "PLACEMENT" & fiber.dom! = null) {domParent.appendChild (fiber.dom) } else if (fiber.effectTag = = "UPDATE" & & fiber.dom! = null) {updateDom (fiber.dom, fiber.alternate.props, fiber.props);} else if (fiber.effectTag = "DELETION") {domParent.removeChild (fiber.dom);} commitWork (fiber.child); commitWork (fiber.sibling) } function render (element, container) {wipRoot = {dom: container, props: {children: [element]}, alternate: currentRoot}; deletions = []; nextUnitOfWork = wipRoot;} let nextUnitOfWork = null; let currentRoot = null; let wipRoot = null; let deletions = null; function workLoop (deadline) {let shouldYield = false While (nextUnitOfWork & &! shouldYield) {nextUnitOfWork = performUnitOfWork (nextUnitOfWork); shouldYield = deadline.timeRemaining ()

< 1; } if (!nextUnitOfWork && wipRoot) { commitRoot(); } requestIdleCallback(workLoop); } requestIdleCallback(workLoop); function performUnitOfWork(fiber) { if (!fiber.dom) { fiber.dom = createDom(fiber); } const elements = fiber.props.children; // 原本添加 fiber 的逻辑挪到 reconcileChildren 函数 reconcileChildren(fiber, elements); if (fiber.child) { return fiber.child; } let nextFiber = fiber; while (nextFiber) { if (nextFiber.sibling) { return nextFiber.sibling; } nextFibernextFiber = nextFiber.parent; } } // 新增函数 function reconcileChildren(wipFiber, elements) { let index = 0; // 上次渲染完成之后的 fiber 节点 let oldFiber = wipFiber.alternate && wipFiber.alternate.child; let prevSibling = null; // 扁平化 props.children，处理函数组件的 children elementselements = elements.flat(); while (index < elements.length || oldFiber != null) { // 本次需要渲染的子元素 const element = elements[index]; let newFiber = null; // 比较当前和上一次渲染的 type，即 DOM tag 'div'， // 暂不考虑自定义组件 const sameType = oldFiber && element && element.type === oldFiber.type; // 同类型节点，只需更新节点 props 即可 if (sameType) { newFiber = { type: oldFiber.type, props: element.props, dom: oldFiber.dom, // 复用旧节点的 DOM parent: wipFiber, alternate: oldFiber, effectTag: "UPDATE" // 新增属性，在提交/commit 阶段使用 }; } // 不同类型节点且存在新的元素时，创建新的 DOM 节点 if (element && !sameType) { newFiber = { type: element.type, props: element.props, dom: null, parent: wipFiber, alternate: null, effectTag: "PLACEMENT" // PLACEMENT 表示需要添加新的节点 }; } // 不同类型节点，且存在旧的 fiber 节点时， // 需要移除该节点 if (oldFiber && !sameType) { oldFiber.effectTag = "DELETION"; // 当最后提交 fiber 树到 DOM 时，我们是从 wipRoot 开始的， // 此时没有上一次的 fiber，所以这里用一个数组来跟踪需要 // 删除的节点 deletions.push(oldFiber); } if (oldFiber) { // 同步更新下一个旧 fiber 节点 oldFiberoldFiber = oldFiber.sibling; } if (index === 0) { wipFiber.child = newFiber; } else { prevSibling.sibling = newFiber; } prevSibling = newFiber; index++; } } 注意：这个过程中 React 还用了 key 来检测数组元素变化了位置的情况，避免重复渲染以提高性能。简化起见，本文未实现。 下面 CodeSandbox 代码用了个小技巧，重复执行 render 实现更新界面的效果，动手改改试试。 redact-2 VII: 函数组件 目前我们还只考虑了直接渲染 DOM 标签的情况，不支持组件，而组件是 React 是灵魂，下面我们来实现函数组件。 以一个非常简单的组件代码为例。 /** @jsx Redact.createElement */ function App(props) { return Hi {props.name}; }; // 等效 JS 代码 ? function App(props) { return Redact.createElement( "h2", null, "Hi ", props.name ) } const element = ; const container = document.getElementById("root"); Redact.render(element, container); 函数组件有2个不同点： 函数组件的 fiber 节点没有对应 DOM 函数组件的 children 来自函数执行结果，而不是像标签元素一样直接从 props 获取，因为 children 不只是函数组件使用时包含的子孙节点，还需要组合组件本身的结构 注意以下代码省略了未改动部分。 function commitWork(fiber) { if (!fiber) { return; } // 当 fiber 是函数组件时节点不存在 DOM， // 故需要遍历父节点以找到最近的有 DOM 的节点 let domParentFiber = fiber.parent; while (!domParentFiber.dom) { domParentFiberdomParentFiber = domParentFiber.parent; } const domParent = domParentFiber.dom; if (fiber.effectTag === "PLACEMENT" && fiber.dom != null) { domParent.appendChild(fiber.dom); } else if (fiber.effectTag === "UPDATE" && fiber.dom != null) { updateDom(fiber.dom, fiber.alternate.props, fiber.props); } else if (fiber.effectTag === "DELETION") { // 直接移除 DOM 替换成 commitDeletion 函数 commitDeletion(fiber, domParent); } commitWork(fiber.child); commitWork(fiber.sibling); } // 新增函数，移除 DOM 节点 function commitDeletion(fiber, domParent) { // 当 child 是函数组件时不存在 DOM， // 故需要递归遍历子节点找到真正的 DOM if (fiber.dom) { domParent.removeChild(fiber.dom); } else { commitDeletion(fiber.child, domParent); } } function performUnitOfWork(fiber) { const isFunctionComponent = fiber.type instanceof Function; // 原本逻辑挪到 updateHostComponent 函数 if (isFunctionComponent) { updateFunctionComponent(fiber); } else { updateHostComponent(fiber); } if (fiber.child) { return fiber.child; } let nextFiber = fiber; while (nextFiber) { if (nextFiber.sibling) { return nextFiber.sibling; } nextFibernextFiber = nextFiber.parent; } } // 新增函数，处理函数组件 function updateFunctionComponent(fiber) { // 执行函数组件得到 children const children = [fiber.type(fiber.props)]; reconcileChildren(fiber, children); } // 新增函数，处理原生标签组件 function updateHostComponent(fiber) { if (!fiber.dom) { fiber.dom = createDom(fiber); } reconcileChildren(fiber, fiber.props.children); } VIII: 函数组件 Hooks 支持了函数组件，还需要支持组件状态 / state 才能实现刷新界面。 我们的示例也跟着更新，用 hooks 实现经典的 counter，点击计数器加1。 /** @jsx Redact.createElement */ function Counter() { const [state, setState] = Redact.useState(1) return ( setState(c =>

C + 1)} > Count: {state});} const element =; const container = document.getElementById ("root"); Redact.render (element, container)

Note that the unchanged part is omitted from the following code.

/ / add variable, fiber node let wipFiber = null; / / add variable, current hook index let hookIndex = null; function updateFunctionComponent (fiber) {/ / update fiber node wipFiber = fiber; / / reset hook index hookIndex = 0; / add hooks array to support multiple calls to the same component `useState` wipFiber.hooks = [] Const children = [fiber.type (fiber.props)]; reconcileChildren (fiber, children);} function useState (initial) {/ / alternate saves the fiber node const oldHook = wipFiber.alternate & & wipFiber.alternate.hooks & & wipFiber.alternate.hooks [hookIndex] of the previous rendering; const hook = {/ / the first rendering uses input parameters, and the second rendering reuses the previous state state: oldHook? OldHook.state: initial, / / Save the queue queue: []} for each setState input parameter; const actions = oldHook? OldHook.queue: []; actions.forEach (action = > {/ / generate the latest state hook.state = action instanceof Function according to the order of calling setState. Action (hook.state): action;}); / / setState function is used to update state. The input parameter action / / is the new state value or the function returns a new state const setState = action = > {hook.queue.push (action); / / the following code is very similar to the render function. / / set the new wipRoot and nextUnitOfWork / / browser to start re-rendering when it is idle. WipRoot = {dom: currentRoot.dom, props: currentRoot.props, alternate: currentRoot}; nextUnitOfWork = wipRoot; deletions = [];}; / / Save this hook wipFiber.hooks.push (hook); hookIndex++; return [hook.state, setState];}

The complete CodeSandbox code is as follows. Click Count to try:

Redact-3

Conclusion

In addition to helping readers understand the core working principle of React, many of the variables in this article are consistent with the official React code. For example, if you break a point in any function component of the React application, and then open the debugging work, you can see the call stack as follows:

UpdateFunctionComponent

PerformUnitOfWork

WorkLoop

Note that this article is instructional in nature and lacks a lot of React features and performance optimizations. For example, React behaves differently from Redact in these things.

Redact traverses the entire tree during the rendering phase, while React uses some heuristic algorithms to skip some unchanged subtrees to improve performance. (for example, key is recommended for React array elements, and nodes that do not need to be updated can be skipped. Refer to the official documentation)

Redact traverses the entire tree during the commit phase, and React uses a linked list to save the changed fiber, reducing a lot of unnecessary traversal operations.

Every time Redact creates a new fiber tree, it creates a fiber object node directly, while React reuses the last fiber object to save the performance cost of creating the object.

If Redact receives a new update during the rendering phase, it discards the rendered tree directly and renders from scratch. React marks each update with a timestamp to determine the priority of the update.

There are many optimizations for readers to find out about the source code.

Thank you for reading, the above is the content of "Learning React from scratch". After the study of this article, I believe you have a deeper understanding of the problem of learning React from scratch, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.