React: Don't move or you'll get fired

Hello everyone, I'm Casson.

I don't know if you are using React when developing, did you notice react and react-dom there is a very strange attribute in these two packages __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED :

The literal translation is the internal mysterious attribute, don't use it indiscriminately! Otherwise you will get fired .

Why is there such a terrifying attribute? Let's talk today.

Welcome to join the human high-quality front-end framework group , with flying

React project architecture

We are accustomed to using the following statement to import Hook in the project:

 import {useState} from 'react';

Hook this mean that all concrete implementations of ---cef37d128c8a75505659191e819bc308--- are in the react package? Actually not.

The specific implementation of all Hook is in the ReactFiberHooks.new.js method, which comes from the react-reconciler package.

So why has this package never been actively introduced in our project? Because the part used in ---e50a76d8987ffe1e2e65523fd12471e1 react-reconciler is packaged into react-dom .

To put it simply, React In order to achieve cross-platform rendering, the mode of one main module + one renderer is used .

The main module is the react package, which provides all common methods.

Renderers vary according to the host environment, for example:

• Browser environment use ReactDOM/client Renderer
• SSR Use ReactDOM/server Renderer
• Native Environment use ReactNative Renderer

In addition to the code related to the host environment, the renderer also has a lot of general logic (such as Diff algorithm).

So it can be considered that react-dom is packaged by the parts used in the following packages:

• shared , a package that holds common methods
• react-reconciler , provides the implementation of ---d3b19b3a4b4701e03f7d106298c0b081 Hooks , Diff algorithm, priority scheduling and other update related functions
• react-dom , provides host environment methods, such as DOM add/move/delete/modify
• and so on other packages

This is why the hosting environment varies widely, but all can be executed by executing useState to change the state and trigger the view update.

The reason is - the implementation of Hooks is packaged into the same package as the methods for manipulating views in the host environment .

Since the implementation of Hooks is packaged into react-dom (or other packages corresponding to the host environment), how can it be exported from react in the final use? like this:

 // 而不是 from 'react-dom'
import {useState} from 'react';

This uses the variable mentioned at the beginning __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED .

internal structure

It can be assumed that when React the team wants to share data between react and the package corresponding to the host environment , it will save it in this mysterious internal variable.

For example, as mentioned above, the specific implementation of Hook .

For another example, object.assign method polyfill , in react and react-dom are used in two packages respectively, but if eeb9--- is used in both packages. Then package them separately, then the code of polyfill will appear repeatedly in the two packages react and react-dom .

To reduce duplication of code, react will import object.assign method's polyfill and store it in a mysterious internal variable.

react react-dom的peerDependencies ，当项目中引入这两个包后， react-dom内部使用的object.assign -actually from object.assign react :

 // react-dom包内部
const react = require('react');
const { assign } = react.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

common problem

Now that we know what the mysterious internal variable does, let's look at the problems this implementation can cause.

Suppose we have 2 projects:

• Component library project A, responsible for developing components
• Business project B, dependent on A

After B installs dependencies, A will appear in B's node_modules .

For the convenience of debugging, we use the npm link function to change the dependent A in B from A in B's node_modules to component library project A ,

When npm link , the business code in B uses useState from react in B's node_modules .

And the components used in the component library A introduced in B useState come from react in A's node_modules .

Different react correspond to different __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED , and finally correspond to different react-dom .

This will cause an error.

The solution is to add an alias (alias) for react in the project, so that all the places where react are used in the project point to the same react .

Summarize

In this article, we learned about the role of the mysterious internal variable __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED in react and react-dom .

He is able to pass shared data between the two packets.

One thing to note is that if you also want to share data between two packages in this way, you need to set one of the packages to the other's peerDependencies .

Otherwise, when packaging, the shared data will only exist in each of the two packages.