Three states and setState 14React assembly cycle call

First, the three states of the component 

states a: MOUNTING (Loading)
mountComponent responsible for managing the life cycle of getInitialState, componentWillMount, render and componentDidMount.
1, Constructor (constructors) management getDefaultProps;
2, by first mountComponent loading assembly;
3, the status is set to MOUNTING;
. 4, (. 1) performs getInitialState acquisition initialization State, initializes the update queue;
5, (2) perform componentWillMount, [ [[calls the setState within it, does not trigger the reRender, but rather merge state]]];
6, update status label [1] is NULL, label update state [2];
7 (3) performs the render, in which internal this.state may acquire updated data;
8 (4) performs componentDidMount.

State two: RECEIVE_PROPS (receive property)
updateComponent responsible for managing the life cycle of componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, render and componentDidUpdate. On updateComponent recursive nature is by rendering content, due to the recursive properties, componentWillUpdate parent component of certain subcomponents before it componentWillUpdate call, and certainly componentDidUpdate parent component called after its subcomponents componentDidUpdate.
1, the state is set to RECEIVING_PROPS;
2, the implementation of (1) componentWillReceiveProps, [[[within it calls setState, does not trigger reRender, will be merged state]]];
3, the update status is marked NULL [1];
4 performing (2) whether shouldComponentUpdate determining a component update;
5, execution (. 3) componentWillUpdate;
. 6, the update state [label 2];
7, execution (. 4) the render;
. 8 is executed (5) componentDidUpdate;

third state: UNMOUNTING (Uninstalling)
unmountComponent responsible for managing the life cycle of componentWillUnmount.
1, the state is set to unmounting;
2, the implementation of componentWillUnmount, in its internal call setState, does not trigger reRender.
3, the update status is NULL label [1], the unloading operation is completed assembly.

Two, setState cycle call
1, call setState, if the current state is not NULL, it will be state consolidation; if the current state is NULL, then calls enqueueUpdate (queued updating) to perform the update, and then call updateComponent (Update component), which in turn calls shouldComponentUpdate and componentWillUpdate.
2, if the call setState shouldComponentUpdate or componentWillUpdate, since at this time the state is NULL, it will call enqueueUpdate (update queue) to perform the update, which in turn calls updateComponent (update component), and further calls shouldComponentUpdate componentWillUpdate, causing the cycle call.
3, call setstate and render it in the back of the life cycle, there is no doubt also cause the cycle call.
4, isBatchingUpdates default is false, meaning setState gets updated this.state; the other, on the NULL Boolean conversion is false.

Guess you like

Origin www.cnblogs.com/gushixianqiancheng/p/10964073.html