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

Today, the editor will share with you the relevant knowledge of what the four core content structures at the bottom of react are. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

React

Provides the necessary functions to define react components (ReactElement), generally used with the renderer (react-dom,react-native). When writing code for react applications, most of them call the api of this package. Such as React.Component

Most of the api used in development

Use setState () in the class component

Use hook in the function component and initiate dispatchAction to change the hook object

Change context (in fact, you need the help of setState or dispatchAction to change it)

React-dom

It is the bridge between react and web platform (can be used in browser and nodejs environment), and outputs the running results in react-reconciler to web interface. When writing code for react applications, in most scenarios, the one that can use this package is an entry function ReactDOM.render (, document.getElementByID ('root')), and the rest of the api is provided by the react package.

Boot the startup of the react application (via ReactDOM.render).

It can display the fiber tree constructed by react-reconciler package, generate dom node (in browser) and generate string (ssr).

React-reconciler

Comprehensively coordinate the invocation and cooperation among react-dom,react,scheduler packages, manage the input of react application status and the output of results. Finally convert the input signal into an output signal and pass it to the renderer

Receive update requests initiated by react-dom packets (initial render) and react packets (subsequent update setState).

The construction process of the fiber tree is wrapped in a callback function, and the callback function is passed to the scheduler packet to wait for scheduling.

Specific process:

Accept the input (schedulerUpdateOnFiber) and encapsulate the fiber tree generation logic into a callback function (involving fiber tree structure, fiber.updateQueue queue, reconciliation algorithm, etc.)

Send this callback function (performSyncWorkOnRoot or performConcurrentWorkOnRoot) to scheduler for scheduling

Scheduler controls the timing of callback function execution. After the callback function is executed, a brand new fiber tree is obtained.

Then call the renderer (such as react-dom, react-native, etc.) to finally reflect the fiber tree structure on the interface.

Scheduler

The core implementation of the scheduling mechanism controls the execution time of the callback function sent by react-reconciler, and task fragmentation can be realized in concurrent mode.

Maintain a task queue internally, with the highest priority at the top

Cycle through the task queue until the queue is empty.

Overall working logic (not necessarily correct)

Starting from updateContainer, schedule tasks according to scheduler and expand the following process

These are all the contents of the article "what are the four core content structures at the bottom of react?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.