Lifecycle API and event handling for React components

A simple lifecycle API for simply documenting react components:

A: Instantiation Period:

The API that is called when an instance is first created is slightly different from the API that is invoked when other subsequent instances are created.

The first time the instance is created, it calls Getdefaultprops, and the subsequent instance is created without calling this method.

When an instance is created, the APIs that are called in turn are:

Getdefaultprops:

The first time the instance is created, it is called only once for the component class.

The object returned by this method can set the default props value for the instance.

Getinitialstate:

For each instance, this method is called only once. Executes once each time the instance is created.

The state of each instance is initialized here, where it can be accessed to this.props.

Componentwillmount:

Called before the first render, changing the last chance of the component state before rendering.

Render

The only required method for the component. Creates a virtual DOM that represents the component output.

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

You can return Null,return false, or return any react component.

There can be only one top-level component.

You cannot change the state of a component, or modify the output of the DOM.

(Note that the result of the render return says that the virtual dom,react will then compare it to the real DOM to determine if it is necessary to make changes)

Componentdidmount:

This method is called when Render is successfully invoked and the real DOM has been rendered.

Here you can access the real DOM through the This.getdomnode () method.

For example, you need to measure the width and height of dom elements and so on, which you can do in this method.

(Note that Componentdidmount will not be called when react runs on the server side.)

B: Existence Period:

As the application state changes, the following APIs are called in turn:

Componentwillreceiveprops

Shouldcomponentupdate

Componentwillupdate

Render

Componentdidupdate

C: Destruction Period:

After the component is exhausted, the following APIs are called to clean up the instance itself:

Componentwillunmount

Note the anti-pattern:

In the Getinitialstate method, the way to create state by This.props is an anti-pattern!

REACT focuses on maintaining a single source of data, which is an anti-pattern when the state value of a component is not synchronized with the prop it is based on!

Examples of anti-patterns:

Getdefaultprops:function () {

return {date:new date ()}

};

getinitialstate: function () {

return {

Day:this.props.date.getDay () //Do not calculate here

}

};

Render:function () {

Return <div>day is: {this.state.day}</div>;

};

The correct pattern should be calculated at render time: (The calculated value is guaranteed not to be out of sync with the props value derived from it)

Getdefaultprops:function () {

return {date:new date ()}

};

Render: function () {

　　var day = This.props.date.getDay (); //calculation is correct at render time

Return <div>day is: {day}</div>;

};

Note that the component can access props with this.props, but cannot modify its own props!

About State:

Each component has its own state. The difference between state and props is that state exists only within the component.

State is used to determine the view states of an element.

State can be modified with setstate or replacestate. (Cannot use This.state to modify state)

As long as SetState or replacestate are called, Render is called. If the render return value changes, the DOM is updated.

Second, the React event processing:

Event Document: http://facebook.github.io/react/docs/events.html

Bind an event handler:

React.DOM.button ({className: "btn", OnClick:this.handleSendClick}, "Send");

Touch Events need to call this method to start manually: react.initializetouchevents (true);

Updating Component Status triggers component redraw.

SetState updates a state property, and Replacestate replaces the entire state object.

Do setstate in the bound event handler:

Getinitialstate:function () {

return {title: "Title 1.0"}

};

handlepageonload: function (EV) {

This. setState ({title: "title 2.0"});

Ev.preventdefault (); //not required, subject to availability

};

Summary: changing state can only be done with setstate or replacestate, because they can notify react to redraw the DOM, calling the Render method .

Add: About the onchange event that handles input:

Handlecomplete:function (event) {

This. Callmethodonprops ("oncompleted", event.target.value);

};

Render:function () {

return <textarea onblur= "{this.handlecomplete}" ></textarea>

};

Note that using Event.target.value to get the input value is a common method.

Lifecycle API and event handling for React components