We all know that Render will be executed during component instantiation and lifetime. Instantiation will be executed after componentWillMount is executed. There is nothing to say about this. Here we mainly analyze the execution of lifetime component updates. Existence methods include:
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
These methods will be in the component It will be executed when the state or
Here we used Redux, but the code will not be posted. , where the addNumber method will increase the count by 1 each time it is clicked. When we click the button at this time, do you think the render method of the subgroup HelloWorldComponent will be executed?
As shown in the figure, when we click the button, the render method of the subcomponent is executed. But from the code point of view, the onClick and text bound to the component have not changed. Why is the component updated? If you add this log in componentWillReceiveProps of the subcomponent: console.log(‘isEqual’, nextProps === this.props); will the output be true or false?
Yes, you read that right, the output is false. This is why the subcomponent is updated, because the property value has changed, not the property value we bound to the component. Each time the button is clicked, the state will be triggered to change, and the entire component will be re-rendered. However, this is not what we want, because this unnecessary rendering will greatly affect the performance of our application. In addition to inheriting Component to create components, there is also PureComponent in react. This component can avoid this situation. Let's make some modifications to the code and see the effect. Modify as follows:
class HelloWorldComponent extends React.PureComponent
Copy after login
What happened when the button was clicked this time?
Although componentWillReceiveProps will still be executed, the component is not re-rendered this time. So, for stateless components, we should try to use PureComponent. It should be noted that PureComponent only focuses on property values, which means that
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website! Recommended reading:
Implementation of indexed address book on the right side (with code)
vue-ssr static website generation Detailed explanation of the use of VuePress
The above is the detailed content of What are the methods to operate render execution?. For more information, please follow other related articles on the PHP Chinese website!
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact [email protected]