- Functions that can be used during the initialization phase:
Getdefaultprops: Call only once and share references between instances. It is only called when the first instance of the component is initialized, and then react will save the return result of the function, starting with the second instance, whose default properties are the same result. Instances share references, there are two types of data in JS, a value type, such as String, Boolean, etc., one is a reference type, such as an array, an object, etc., if the function returns a reference type of data, then react will save the reference, and when creating different instances, He will use the same reference as the attribute, but we know that the reference point is the same address, so the operation between the different instances is actually the same data, so when using this function, pay attention to the return is the reference or value.
Getinitialstate: Initializes the state specific to each instance. From this function, each instance is initialized, it will call him, unlike the first function is called only once, the first function is to handle the property, the second function is the state, because the state is the information of each instance itself, each instance to maintain its own state, so different instances have different states, Then it is necessary to call this function.
Componentwillmount:render the last opportunity to modify the state. At this point, you can still change the state, but in render it is not possible to modify the state.
Render: Only This.props and this.state are accessible, with only one top-level component, which does not allow modification of state and DOM output. This.props and This.state are the two data sources unique to render, and in addition, you should not be getting other data information. Only one top-level component? The return value of render can only be a component, which may contain many sub-components or a lot of sub-code, but in essence he is still a component and you cannot return an array. modifying state and Dom output is not allowed. If it is necessary to modify, it is also possible, but react does not recommend this, if you modify the state and output, then the render function can no longer be used by the server, of course, most of the time we are using the render function on the client, if you want to improve the load performance of the site, Can be processed on the server, but your render function needs to modify the state and the DOM output, in the service side is not such an environment, so if you modify the state and output, you can only use in the browser, which greatly limits your system performance. The second reason is that if you modify the state and output in render, the logic of the code becomes very complex, it is difficult to analyze the result by the state, one of the react design purposes is to make the logic of the component clear and simple, which is contrary to the purpose. It's hard to read this code yourself or someone else.
Componentdidmount: The DOM can be modified after the render is successful and the rendering completes after the real DOM is triggered. When this function is called, the DOM has been created.
- Example: View the trigger order.
<! DOCTYPE html>Notice the Red markup part of the code above, we just output the string HelloWorld, not the label
As we can see, Getdefaultprops is called directly in the actual use, That is, after React.createclass, will be called and store the results, in time you do not generate an instance, this function will also be called, react this is to improve performance, as early as possible to deal with the things we want to do, so when we want to use the HelloWorld instance, it is Will eliminate the time it takes to call this function to improve performance. Let's change the code to make it output correctly.
<! DOCTYPE html>
- Correct usage of each instance
<! DOCTYPE html>
- Output count, generate multiple HelloWorld
<! DOCTYPE html>
React initialization phase
