Shulou(Shulou.com)06/01 Report--

This article mainly explains "what are the stages of the life cycle of the react framework". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the stages of the life cycle of the react framework".

1. Mounting and uninstalling process

(1) constructor ():

This method is used to initialize the React data, and also accepts the parameters props and context. If we want to use these two parameters inside the function, we must use super () to pass in the parameters; otherwise, it will cause the this to point to an error.

(2) componentWillMount ():

This method is generally less used, and more often used on the server side.

(3) componentDidMount ():

When the dom node is generated when the component is rendered for the first time, the request of ajax can be called here, and the component will render again after the setstate data is returned.

(4) componentWillUnmount ():

This method is used to unload the component and destroy the data. Sometimes we encounter the following warning when executing because the setstate returned by the Ajax request in our component did not request to complete the reported warning when we performed the destruction!

Can only update a mounted or mounting component. This usually means you called setState () on an unmounted component. This is a no-op. Please check the code for the undefined component.

The solution is as follows:

ComponentDidMount () {this.isMount = true axios.post () .then ((res) = > {this.isMount & & this.setState ({/ / add aaa:res} if ismount is true)})} componentWillUnmount () {this.isMount = = false}

two。 Update process

(1) componentWillReceiveProps (nextProps):

This method is often used when the props needs to re-render the component after accepting the parent group change. Here are the code and comments that are re-rendered by comparing nextProps with this.props.

ComponentWillReceiveProps (nextProps) {nextProps.openNotice! = = this.props.openNotice&&this.setState ({openNotice:nextProps.openNotice}, () = > {console.log (this.state.openNotice:nextProps) / / Update state to nextProps, and the new state} can be printed in the second parameter of setState (callback))}

(2) .accoundComponentUpdate (nextProps,nextState):

This method is mainly used for optimization in the performance part, and you can also block component updates through return false.

(3) componentWillUpdate (nextProps,nextState):

In this method, when shouldComponentUpdate returns true, the component will enter the process of re-rendering. When entering this method, we can also get nextProps and nextState in this method.

(4) .implementDidUpdate (prevProps,prevState):

The purpose of this method is that when the component update is completed, react will enter the life cycle of componentDidUpdate (prevProps,prevState) only after the first initialization is completed. After each re-rendering, react will enter the componentDidUpdate (prevProps,prevState) life cycle, and you can get prevProps and prevState, that is, props and state before the update.

(5) render ():

The function render will be inserted into the dom structure generated by jsx to generate a virtual dom tree, and each time the component is updated, the DOM tree before and after the update will be compared with its diff algorithm to find the smallest and different DOM nodes to re-render.

Thank you for reading, the above is the content of "what are the stages of the life cycle of the react framework". After the study of this article, I believe you have a deeper understanding of the stage of the life cycle of the react framework, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.