Detailed explanation of react life cycle

react lifecycle functions:

1. constructor(props, context);
2. componentWillMount() is called before mounting, once, if setState is called in this function, this render function can see the updated state and render it only once;
3. render() Executed after componentWillMount and before componentDidMount. Trigger conditions: 1. Initialize the page, 2. The state machine changes setState, 3. New props (parent component update). Note: The essential core function of the component; the state machine state cannot be modified in this function;
4. componentDidMount() is called after mounting, once, you can use the refs attribute;
5. componentWillReceiveProps(nextProps), props is passed from the parent component For child components, it is called when the parent component renders;

6. shouldComponentUpdate(nextProps,nextState),

Called when new state or props are received. After the component hangs, it will be called every time after setState to determine whether the component needs to be re-rendered. By default, it returns true and needs to be re-rendered; if true, call componentWillUpdate(nextProps, nextState);

7. componentWillUpdate() is called immediately after receiving new state or props. (passive);
8. componentDidUpdate() is called after re-rendering, but will not be called during initialization. Function: After the component is updated, operate the DOM element;
9. componentWillUnmount() is called before the component is unmounted. Role: cleanup, such as clearing timers, or clearing DOM elements created in componentDidMount().

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324750044&siteId=291194637