DOM 中的 React 组件渲染

Question

1) When you build an app with create-react-app will all the code in every component's render method be packaged into one file and loaded all at once to the DOM initially? Or are they loaded when they are needed? If so, what components are loaded early and which are loaded later?

2) If everything is loaded all at once when it is injected into the root node via the React.render() method, then what is the point of the lifecycle method componentDidMount? Wouldn't everything mount at the same time if it is all just getting injected together and becoming part of the DOM tree on the initial load?

Answer 1

Create-React-app gives you a powerful preset configurations so you dont need to config react project from scratch. You don't have to set webpack, default packages, lint configuration, folder structure and so on. Eventually you can make changes if you feel comfortable. Or you can even start from scratch, but that can be challenging when you are a beginner.

Components in react are created and imported as needed starting by a root point at html file. The root entrance point will serve as reference for react to create an entrance point and from it will build the virtual DOM and create other components as needed, not every every thing at once.

Meanwhile, Webpack compiles all files and directories into a single file based on the entrance file which calls the rest. Without webpack, or similar, you wouldnt have a nice folder structure to develop you react project.

From there on, react handles a virtual DOM, to manage components state and props updates through component lifecycicles, making proper comparison to avoid unnecessary rerenders, and remove components if needed. If everything was rendered at once you would have static file which would make the use of react, or similar spa, unnecessary.