React Components, Elements, and Instances

I have read a few react articles recently, but I also learned something from the old ones. Original link: github.com/acdlite/rea…

React Components, Elements, and Instances

Components are created Components.
Instances are Instances of components that are created. For example, if a component is created and used multiple times in

, then each is an instance.

Elements is a generic object that describes the component instances described above, native Dom Elements, and their attributes. Such as:

{
   type: 'button'.props: {
      className: 'button button-blue'.children: {
         type: 'b'.props: {
         children: 'OK! '}}}}Copy the code

An object that describes a native button, including its attributes and child elements. If describing an instance, type would be the component defined, for example: type: ‘Button’. How does React handle these classes differently? If it is an instance type, React will ask the corresponding component to render the returned content. The component returns an Element object. Over and over again, React creates a common object that describes all the elements needed for the interface.

Top-Down Reconciliation

The process described above is something like this, assuming that the root component is a Form

ReactDom.render(<Form isSubmitted={false} buttonText="ok" />.document.queryElementById('root'))
Copy the code

React will first ask what element tree the Form returns and then build a whole tree based on that tree

// Form
{
   type: Form,
   props: {
      isSubmitted: false.buttonText: 'OK! '}}// Form tells React to return the element structure
{
   type: Button,
   props: {
      children: 'OK! '.color: 'blue'}}// Button tells React to return the element structure
{
   type: 'button'.props: {
      className: 'button button-blue'.children: {
         type: 'b'.props: {
         children: 'OK! '}}}}// To the native element ends
Copy the code

The process above is part of the React Reconciliation, which ends with React having a completed element tree. The React Renderer then applies a minimal set of changes to the interface.

Instances are not important in React; they create instances of each class component and manage it themselves.

Reconciliation

React is the React module that handles updates and includes the Diff algorithm. React defines two assumptions because it is too complex to compare two Element trees using existing algorithms:

Two elements of different types produce different trees
Developers can use the key attribute to indicate that an element may not change from rendering to rendering

The Diffing Algorithm

React compares the root element first when comparing trees. If two elements are different, the React tree is discarded and a new one is constructed. When discarding the old tree, componentWillUnmount() is called if it is a class component. When a new tree is built, UNSAFE_componentWillMount() is called.

When comparing Dom class elements of the same type, React only looks for attributes and updates only the changed ones. When the current element is processed, recurse processes its children.

When compare the component instances of the same type, the React will update the instance of props, and call the UNSAFE_componentWillReceiveProps (), And componentDidUpdate UNSAFE_componentWillUpdate () (). In versions after 16.3, static getDerivedStateFromProps() is called. It is important to note that the state of the component will be updated across the hospital.

The Render () method is then called, and React recursively performs a diff algorithm on the returned result and the previous result.

Recursing On Children

By default, React aligns Dom elements with their children at the same time, generating a change whenever they are in a different position. In the following examples 1 and 2, the performance of 2 is obviously better than 1, because React does not know which elements can be retained for reuse.

   / / 1
   <ul>
      <li>first</li>
      <li>second</li>
   </ul>

   <ul>
      <li>first</li>
      <li>second</li>
      <li>third</li>
   </ul>
Copy the code

   / / 2
   <ul>
      <li>Duke</li>
      <li>Villanova</li>
   </ul>

   <ul>
      <li>Connecticut</li>
      <li>Duke</li>
      <li>Villanova</li>
   </ul>
Copy the code

So, we use the key attribute to tell React which elements are the same before and after the update. If they still exist after the update, React may need to update the attributes and move them around instead of regenerating them, which improves performance.

One caveat here is that you should not use the array index as the key, especially if the array will be reordered. Why is that? React uses a key to validate the same element and then only updates its props. The element here could be a Dom node or a component instance. For Dom nodes, mainly form elements, they have a default internal state (not found in browsers for such elements). For instance, we assume that it has a form element inside it, or that it has its own state. It then triggers an order in reverse order, because the array index is used as the key, so the keys in the same position remain the same. React diff a new tree and an old tree, and find the same keys at the same location, update its props and preserve its state. This creates a problem. After updating the first instance, the props of the last instance are used, but the state is still the same as before. I changed the official example, beyond the default state of input element, add a custom status, can see more clearly that props change, the state has not changed: codesandbox. IO/s/stupefied…

Math.random() should also not be used, as each key update will result in unnecessary instance creation.

React Components, Elements, and Instances