What are the react life cycle functions?

react life cycle function

Initialization

1.getDefaultProps()

Note: getDefaultProps This definition method is used when you define components using the React.createClass method.
If you are using es6 syntax, for example, if you use the class component name extends React.Component, do not use
getDefaultProps. method to define props, but should be defined with static propTypes = {}, so that there will be no alarm

设置默认的props，也可以用dufaultProps设置组件的默认属性. ---》设置

2.getInitialState()

Note: The difference with getDefaultProps is The former sets the default props, and the latter sets the initial state. When using the es6 class syntax, there is no such hook function. You can define this.state directly in the constructor. You can access this.props

3.componentWillMount

at this time. Note: It is only called when the component is initialized. It will not be called when the component is updated. It is only called once in the entire life cycle. At this time, the state can be modified.

4. render()

Note: The most important steps of react, creating virtual dom, performing diff algorithm, and updating dom tree are all performed here. At this point, the state cannot be changed.

5.componentDidMount()

Note: Called after the component is rendered, it is only called once. You can request data here

·Update

1.componentWillReceiveProps(nextProps)

Note: It is not called when the component is initialized, but is called when the component accepts new props.

2.shouldComponentUpdate(nextProps, nextState)

Note: React performance optimization is a very important part. Called when the component accepts new state or props. We can set whether the two props and state before and after comparison are the same. If they are the same, return false to prevent the update, because the same attribute state will definitely generate the same DOM tree, so there is no need Create a new DOM tree and compare the old DOM tree with the diff algorithm to save a lot of performance, especially when the DOM structure is complex

3.componentWillUpdata(nextProps, nextState)

Note: Component It is not called during initialization. It is only called when the component is about to be updated. At this time, you can modify the state

4.render()

Note: Component rendering

5.componentDidUpdate( )

Note: It is not called when the component is initialized. It is called after the component update is completed. At this time, the dom node can be obtained.

·Uninstall

componentWillUnmount()
Note: Called when the component is about to be unmounted, some event listeners and timers need to be cleared at this time.

Recommended tutorial: "react tutorial"

The above is the detailed content of What are the react life cycle functions?. For more information, please follow other related articles on the PHP Chinese website!