Talking about the similarities between the frontend and backend of React to prevent repeated rendering, and the react is homogeneous

Talking about the similarities between the frontend and backend of React to prevent repeated rendering, and the react is homogeneous

What is the frontend and backend homogeneity?

To solve some problems (such as SEO and rendering speed improvement), react provides two methods to generate an HTML text string on the server side. After the HTML string is obtained, it is usually assembled into a page and directly returned to the user's browser.

At this point, the server has finished working, and then the browser is working.

After obtaining the HTML text, the browser immediately renders the content to the user. Load the. js file required for the page, execute the JavaScript script, and then initialize the react component ............

Here the problem comes. After react initializes the component, it executes all the render () methods in the component, generates a tree structure of the virtual DOM, and writes the virtual dom to the real dom of the browser when appropriate. Because react always generates real dom Based on Virtual dom, it will replace all HTML rendered on the server end.

The above is not a problem, it is not a problem, it is nothing more than a user to see the page and then "Flash. It is really a problem to say that it is a problem. The product will take this problem for half a month from the perspective of user experience. When you get tired, you simply turn off the server rendering, and then the operation is ready to take the SEO problem and begin to tear you up.

Smart Facebook engineers certainly think of these issues, so they provide a checksum mechanism in the ReactDOMServer. renderToString (element) method.

There are not many introductions on the checksum official website, but many blogs at home and abroad are introduced. I have been looking for react developers to introduce this mechanism and have not found it .......

The front and back ends are homogeneous to ensure the consistency of the front-end and back-end dom structures without repeated rendering. React uses the checksum mechanism for protection.

What is React first screen rendering?

Simply put, it is the virtual dom tree first generated by react in the browser memory. Remember to use virtual dom instead of browser dom.

To understand react, you should know that all react components have a render () method (if a component written in the function method is used, all the code in the function will be inserted to render () ). When the ReactDOM. render (element, container, [callback]) method is executed, the following steps are performed:

1. All components are initialized first (es6 executes the constructor ).
2. The render () method of all components is called once. After this process is completed, a virtual dom tree is generated.
3. React will convert the virtual dom into the browser dom. After that, the componentDidMount () method of the component is called to tell you that it has been loaded to the browser.

In the above process, after Step 2 is complete, it is the first screen rendering of the react. In combination with the checksum mechanism, step 3 may not be executed.

When the component status changes (the setState () lifecycle function is called) or the parent component is rendered (the render () method of the parent component is called), the current component's render () all methods will be executed, which may lead to virtual dom changes, but these changes have nothing to do with the first screen rendering.

React frontend and backend homogeneous first screen Rendering

After learning about homogeneous rendering and first-screen rendering, you can understand how to solve the problem of non-repeated first-screen rendering.

After rendering, the server end will write a checksum value on the attribute of the root element:

This checksum is calculated based on the hash of the HTML content generated by the server.

Then, after loading all js files in the browser, start to execute the three steps of ReactDOM. render (element, container, [callback]) initialization rendering described earlier. After the second step is executed to generate the virtual dom, react calculates a hash value based on the virtual dom using the same algorithm. If it is consistent with checksum, the server is deemed to have completed rendering, step 3 will not be executed.

If the checksum comparison is inconsistent, the following warning content is output in the browser console in the development environment and test environment:

The production environment does not output any warning.

The principle of homogeneous rendering is actually quite simple. It is nothing more than ensuring DOM consistency. However, it takes a lot of effort to ensure the consistency between the dom rendered by the server and the browser for the first time after code sharding, asynchronous loading, and asynchronous assembly of data by the server call interface. But the principle is clear and things can always be done.