### What is the life cycle function
1. component function at some stage will be performed automatically.
- For example, we use the render function to perform, when the prop or state changes, render function automatically.
- therefore render function is a function of the life cycle.
2. constructor will be automatically called when the component is created. But he is not unique to react, is a function of es6 So, we are not listed him as the life cycle functions.
### life cycle is divided into four stages
1. initialization (component initialization)
- we need to inherit in the creation of this component react Component base class will inherit this base class react in order to have a render (), life-cycle and other methods can be used, which explains why the function components the reason these methods can not be used. Components can also make use setState method.
- then we use the Super (props) in the constructor constructor to the parent component delivered to the injection assembly props, and using this property this.state initialize the component.
- This series of actions is to initialize components.
2. mount (mount components)
- This stage is divided into three periods
(before mounting) 1. componentWillMount
- This function performs the component mounted to the time before the DOM, so you quote here setState method, is not causing re-rendering components.
- do the same thing here if placed constructor constructor to use is also possible.
- This function will only be called once the component is mounted to the time before the DOM. Other times it will not trigger this function.
2. render (mounted in)
- props and state whether changes according assembly, i.e. perform changes, the change is to be noted here, the value is not changed. As long as the re-assignment, old and new values will be the same execution.
- then return a React element (described components, namely UI), the component is not responsible for the actual rendering work, after the React itself according to the element to render the page DOM. render pure function (Pure function: function that returns the result depends only on its parameters; execution of functions there is no side effects
- which can not be performed in this.setState, will change the state of the component side.
3. componentDidMount (Mount complete)
- agreed to this request in the ajax function in the life cycle
- the component mounted to the DOM has been executed, only once.
3. update (when component update)
- First let us look at what the component updates. Only called component updates in the sate and props change by setState function or reassigned when.
- setState render function causes the parent component of the implementation, but also cause the render function of its sub-components of the implementation.
- The reason is that the DOM virtual react diff algorithms, peer comparison principle.
- as long as the re-assignment is updated components, if the value has not changed, and update components, which would consume performance, but also when we are talking about the same level compared to say a drawback.
- Next we look at those periodic function
1. componentWillReceiveProps (nextProps)
- This method is called only in the components caused by the update process props, the parameters passed to the parent component is nextProps current component of the new props. But to call the parent component render method does not guarantee retransmitted to the current props component is changing, so in this method to find out whether changes in the retransmission of props, and if you change what you want to perform according to nextProps and this.props, For example, to re-render the current call this.setState starting assembly in accordance with the new props
ShouldComponentUpdate 2. (nextProps, NextState)
- this method by comparing nextProps, this.props nextState and current components, this.state, returns true if the current component will continue to perform the update process, returns false if the current component updates will be stopped as available to reduce unnecessary rendering components to optimize component performance. ps: here can be seen, even if componentWillReceiveProps () in the implementation of the this.setState, update the state, but before the render (such as shouldComponentUpdate, componentWillUpdate), this.state still point to state before the update, and otherwise nextState current component in contrast this.state would have been true of.
ComponentWillUpdate 3. (nextProps, NextState)
- this method before calling the render method performed here can perform some of the work before the component updates occur, generally less use.
The render 4.
- the render method above mentioned, just recalled here.
ComponentDidUpdate 5. The (prevProps, PrevState)
- This method is invoked after the component updates, updated components may operate DOM, prevProps PrevState these two parameters and refers to the assembly before the update and props State
- Optimization drawbacks
- 1. Because when parent component to re-render, making props re-assigned, leading to sub-assemblies along with rendering.
/ **
* Method a: to solve the above drawbacks, the function may be performed before shouldComponentUpdate, component update is determined, props whether to change, and then determines whether to perform re-rendering.
* /
Class the extends the Component Child {
shouldComponentUpdate (nextProps) {
IF (nextProps.value === this.props.value) {
return to false
}
return to true
}
the render () {
return <div> this.props.value {} </ div>
}
}
/ **
* method two:
* 1 to solve the above drawbacks, you may be assigned to the first sub-assembly this.props.value State
* 2. in yet componentWillReceiveProps function, Stae to re-use to the setState property assignment this.props.value
* 3. mentioned document, call this.setState the function (componentWillReceiveProps) in () will not cause a second rendering.
* 4. Because componentWillReceiveProps is only triggered when there is a change of props, so there do this.setState () must be a change in State
* /
//
{Child the extends the Component class
constructor (The props) {
Super (The props);
this.state = {
value: // props.value this.props.value first state assigned to the subassembly
};
}
componentWillReceiveProps (nextProps) {// when there is a change in the props will trigger this method
this.setState ({value: nextProps.value}) ; // re-assignment, causing the render
}
the render () {
return <div> this.state.value {} </ div >
}
}
- 2. The component itself setState method call, but the value has not changed in the state.
/ **
* is determined whether to change the old and new values by shouldComponentUpdate change before doing the render
* /
class the extends the Test the Component {
constructor (The props) {
Super (The props);
this.state = {
value:. 1
}
}
shouldComponentUpdate (NextState) {/ / should use this method of determining whether to change the old and new values
iF (nextState.value === this.state.value) {
return to false // returns no change to false
}
return to true
}
ChangeState = () => {// call while setState , but no change in state
const value = this.state.value
this.setState ({
value
})
}
the render () {
return <div this.changeState the onClick = {}>} {this.state.value </ div>
}
}
4. unloading phase (componentWillUnmount)
- only a life-cycle approach componentWillUnmount
- This method is invoked before the component is uninstalled, you can do some clean-up work here, such as clear timer component used in clear DOM element componentDidMount manually created, etc. in order to avoid a memory leak.
5. react components in addition to the render function, any other lifecycle functions can not write, because the component inherits react in Component, Component built-in functions other life cycle