The life cycle of react

2. What is a declaration cycle?
   The component is essentially a state machine, the input is OK, the output must be definite. How do you understand this? React has two features, the first one is to remove all manual DOM operations, that is, the use of JSX. The second is that the component corresponds to the state and result one by one, so that it can be intuitively seen, the program is output in a different state. A property is passed to a subassembly by a parent component, and the state is some data maintained internally by the subcomponent, and the component is updated when the state changes, so we can understand that the result of a render is one of the states, so that we can know the What results the component will render, thus knowing what content the component is showing on the page. State machine is essentially a combination of state and transfer, as we have just said, different states correspond to different output, state and state can sometimes be converted, when the state changes, it will trigger different hook functions, so that developers have the opportunity to make the corresponding, because the state transition is maintained by the react. As a developer there is no way to directly participate in the state transition, but react gives us a lot of hook functions, we can write these hooks ourselves, so that react in the state transition, we can call our state function.
   
   We can also use the idea of events to understand the state, the developer does not know when the event will occur, but we can decide what to do when the event occurs, the event of the listener, the status and events are similar, their difference is that there is no direct relationship between events and events, each event is independent of the occurrence , but there is a relationship between state and state, and the component can be in a different state, then all the state of the component is combined to form the declaration period of the component.
   
   
   
4. What are the parts of a component's life cycle?
   Initialization phase: Using the component code we write to generate an instance of the component, the component code is the class we write, just like the object-oriented class, class is not really used, we really use the class initialized instance. For example, suppose we have a HelloWorld component, then we use HelloWorld in two places on the page, the two places render two instances, the instances and instances are different, but they all come from the same component, That is, they are initialized with the same component, in the initialization phase, the component will make some initial state settings, as well as rendering, that is, render, after the initialization is completed, the instance will be really displayed on the page, to be used by the user.
   
   After the initialization is over, it goes into operation, for instance, most of the time is running, the state of the running instance may change, thus triggering a series of hook functions, and eventually these changes may cause the component to be re-rendered, note that what we say here is likely to cause, Some changes may not cause the component to be re-rendered, only the internal state has changed
   
   
   
6. The end is the destruction phase. It will be destroyed when the component is not used.
   
   
   The timing of these three occurrences is not fixed and needs to be judged according to the page, and these three phases simply classify the components logically, and we actually focus on the hooks and their usage when we write the code.
   
   
7. Functions that can be customized for different declaration periods
   Initialization phase:
   Getdefaultprops: Gets the default property of the instance, which is only called when the first of the component is initialized, that is, starting with the second component and only invoking the other. All instances of the same component, the default properties they get are the same.
   Getinitialstate: Gets the initialization state of the instance
   Componentwillmount: The component is about to be loaded, i.e. the component is about to be rendered onto the page. Note that at this stage, the component has not really been rendered
   Render: Group price generates a virtual DOM node in the render function, which is JSX, and finally the virtual DOM node is rendered by react as a true DOM node and placed in the page so that the user can see that and interact with
   Componentdidmount: The difference between this function and the third function will turn into did, that is, he was called after the component was loaded, and when the function was called, the component was rendered to the On the page
   In operation:
   
   Componentwillreceiveprops: The component will be called when the property is to be received, and if the component's properties change, such as if the parent component changes the properties of the component, then the component needs to be updated, to be precise, that the component may be updated, This function is triggered before the property is received, and before it is passed to the component, the developer has the opportunity to deal with such properties, such as modifying properties, updating some internal states, and so on, where the properties are not being routed.
   Shouldcomponentupdate: When a component receives a new property or a new state, it triggers the function, which is a question from the name, and he says whether the component is to be updated, and obviously we can tell him that the component does not need to be updated. Since react will help us determine if the component is to be updated, why do we have to make a manual judgment? Because sometimes the state or property changes, and does not cause the component to update, if the component does not need to be updated we can directly return false in this step, so that react will not directly call the render function, which can improve performance, if we do not do such an operation, So even if the result of the render return, react also need to pass the render and diff algorithm to determine if the component needs to be updated, if we return false directly in this step, then react do not take these two steps, which can improve performance,
   Componentwillupdate: He will call this time before the render trigger we are already running and need the update operation instead of the mount operation.
   Render: Is the same as the render we initialized.
   Componentdidupdate: After the render is finished, the real DOM is created and then called.
   
   Destruction Phase: Componentwillunmount: This function is called before the destruction is actually executed, giving developers some real opportunity to do some cleanup.

The life cycle of react