Components are created in the process from being destroyed called components of the life cycle;
Typically, the life cycle of components can be divided into three stages: mount stage, update phase, unloading phase;
First, mount the stage
This phase components are created, perform initialization, and is mounted to the DOM, to complete the first rendering component.
Life-cycle approach in turn calls are:
-
- constructor
- componentWillMount
- render
- componentDidMount
1、constructor
This is when the ES 6 class constructor, the component is created, it will first call the constructor method of the component. The constructor method receives a props parameter, is passed from parent props component property of the object, if the parent component does not pass attributes assembly itself defines the default attribute, then this is the default attribute props directed component. You must first call the super (props) in order to ensure that this method is passed props assembly. constructor is commonly used to bind state and event handling methods to initialize components work.
2、componentWillMount
This method of assembly to be mounted in front DOM calls, and will only be called once. This method is rarely used in actual projects, because the work can be carried out in this method can be the constructor in advance. Call this method this.setState not cause re-rendering components.
3、render
This is the only necessary means (other life-cycle approach component can be omitted) when custom components. In this method, the component and returns props according to a state React element, a UI description of components, elements commonly used React JSX syntax. Note that, the render is not responsible for actually rendering the assembly work, it just returns a description of the UI, the real rendering the page DOM is the responsibility of the React itself. render a pure function, can not perform any operations with side effects in this method can not be called in the render this.setState, which changes the state of the component.
4、componentDidMount
Ask after the assembly is mounted to the DOM calls, and will only be called once. This time may haveto get into the DOM structure, the operation may be dependent DOM node into this method. This method is typically also used to request data to the server. Call this method this.setState cause re-render the assembly.
Second, the update phase
After the assembly is mounted to the DOM, props or components may cause state component updates.
Components props caused by the update, essentially by the parent component rendering the assembly causes, that is, when the render method of the parent component is called, the component will update process takes place, this time, the value of the components of props to change without notice, may not changed, because the parent may use the same objects or props component value assignment. However, regardless of whether or not to change the props, the parent component render method of each call, will result in component updates. State-induced component updates, by calling this.setState modifying component state triggered. Component update phase.
Life-cycle approach in turn calls are:
-
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
1、componentWillReceiveProps(nextProps)
This method is only the component update process caused by the props, will be called. State component updates will not trigger due to the implementation of the method. Parameter nextProps assembly process is passed to the new parent props current component. However, as described above, render method call the parent component does not guarantee delivery to the subassembly props changed, that is to say the value and current value may nextProps props subassembly equal, and often need to compare nextProps determined this.props whether to perform logic behind props changes, such as call according to the new props to re-render this.setState trigger assembly.
2、shouldComponentUpdate（nextProps, nextState）
This method determines whether to continue the update process components. When the method returns true (true is the default return value of this method), the component will continue to update process; when the method returns false, stop the update process components, subsequent componentWillUpdate, the render, componentDidUpdate will no longer be called. Typically performed by comparing nextProps, current and props nextState assembly, state decision returns the result of this method. This method can be used to reduce unnecessary rendering components to optimize performance of the assembly.
3、componentWillUpdate（nextProps, nextState）
This method is invoked before the assembly render execution, as the place to perform some work before the component updates occur, generally rarely used.
4、componentDidUpdate（prevProps, prevState）
Component update after the call, you can manipulate the DOM as the place after the update. PrevProps two parameters of this method, before the representative component updates prevState props and state.
Second, the unloading phase
Components of the process are unloaded from the DOM;
Life-cycle approach in turn calls are:
-
- componentWillUnmount
1、componentWillUnmount
This method is invoked before the component is uninstalled, you can do some clean-up work here, such as clearing the timer used in the assembly, remove componentDidMount manually created DOM elements, so as to avoid memory leaks;
Knock blackboard time
About cycle components, in fact, look down and not very complex, react team has done very well;
Reference text:
React + Advanced Road; (PS: great book, thanks to the Giants;)
