React-Component Life cycle

This document is synchronized to the public number http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=402267570&idx=1&sn= 4b0dc27842c32d902bad2dc4eea75f9a#rd

Interested in can sweep code attention to ha

The term life cycle, usually refers to the birth and death of an object. The code codes of the bitter force should not be unfamiliar. The "Object" in object-oriented programming also has the concept of life cycle. such as object creation instantiation, run, destroy and so on. React components are also life-cycle.

React gives each component a life-cycle hook function to respond to different moments---created, exists and destroys it. These life cycle hook methods I think it is very useful, can be done in the hook method is still a lot of things.

instantiation of

When a component class is first used, these methods are called at a time:

Getdefaultprops

Getinitialstate

Componentwillmount

Render

Componentdidmount

There is a need to pay attention to getdefaultprops methods. The change method is used to set default properties for the component. Only one component is invoked when it is first instantiated.

Getinitialstate, this method is called only once for each instance of the component. This method is used to initialize the state of each instance. Unlike Getdefaultprops, the change method is created each time the instantiation is instantiated. Because each component instance should have its own state (about the state machine, self-searched ha). In this method, you can access the This.props.

Componentwillmount, words too literally all know, this method is called before the render function call. Uh, words too literally? This is what you've always said about the benefits of semantics for code maintainability. HTML elements, CSS class property names, variable names, method names, and so on should be semantically better ...

After the Render.render function is called, a virtual DOM is created to represent the output of the component. For a component, render is the only required method and has a specific rule:

Data can only be accessed through This.props and this.state

can return Null,false or any react component

Only one top-level component can appear (cannot return a set of elements)

Must be pure (cannot change the state of the component or modify the output of the DOM)

Componentdidmount, after the Render method has been successfully called and the real Dom has been rendered, it can be accessed through the This.getdomnode () method inside the Componentdidmount function. You can manipulate real DOM elements in this method.

Without practice there is no say, in the principle of seeking truth from facts, their code snippet to verify the ha.

Like the code, I define a divider component. and sequentially initialized the props,state of the reorganization pieces, and so on. The Reacdom.render method is then called to render the reorganization pieces. The results of the operation are as follows:

As you can see, the contents of the console are output in the desired order.

The console also outputs a segment warning, and the Divider.getdomnode method is obsolete. Let's replace it with the Reactdom.finddomnode method. Review the official documents below, and have modified the Componentdidmount method to the following version.

Componentdidmount:function () {

Console.log (Reactdom.finddomnode (this));

}

And then run, there will be no warning.
The Getdefaultprops method runs only once, and when we render the reorganization again, the Getdefaultprops method is not called.

Existence period

At this point, the component is rendered well and the user can interact with it. This is usually done with a single mouse click, finger tap or keyboard event to start an event handler. As the user has revised the state of the component or the entire application, there will be a new state flowing into the component tree, and we will have the opportunity to manipulate it.

Destruction & Cleanup period

whenever react uses a component, the component must be unloaded from the DOM and then destroyed. At this point, only one hook function is called. Complete cleanup and destruction work.

Chairman Mao has taught us that we should study hard and make Progress day by day. Chairman Mao has also taught us that the purpose of learning is all in use. After understanding the life cycle of the react component and its associated hook methods, the small Mo is also the hold of the exercise, the Code section of the demo. The following is modeled as a simple counter of the website demo. The code and comments are as follows:

Finally, a summary of the three life cycles of the react component and its Hook method are described first. Then wrote a code to verify the life cycle of the hook function call order, and finally use the relevant knowledge points to practice a very small and small demo ha.

React-Component Life cycle