Shulou(Shulou.com)05/31 Report--

This article mainly explains "what is the periodic function of react performance optimization". The content of the explanation 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 is the periodic function of react performance optimization".

React performance optimization is a shouldComponentUpdate periodic function; this function determines whether you need to call the render method to redepict dom, and can optimize the dom diff algorithm with the syntax of "shouldComponentUpdate (Props,state)".

The operating environment of this tutorial: Windows10 system, react16.4.0 version, Dell G3 computer.

Which periodic function is the react performance optimization?

The shouldComponentUpdate method is used to determine whether the render method needs to be called to redepict the dom. Because the description of dom consumes a lot of performance, if we can write a more optimized dom diff algorithm in the shouldComponentUpdate method, the performance can be greatly improved.

The format of the shouldComponentUpdate () method is as follows:

ShouldComponentUpdate (nextProps, nextState)

The shouldComponentUpdate () method returns a Boolean value that specifies whether React should continue to render, and the default value is true, which means that the component will re-render every time the state changes.

The return value of shouldComponentUpdate () is used to determine whether the output of the React component is affected by the current state or props change, and when the props or state changes, shouldComponentUpdate () is called before the rendering is executed.

The following example demonstrates what the shouldComponentUpdate () method does when it returns false (cannot be modified by clicking the button):

React instance class Header extends React.Component {constructor (props) {super (props); this.state = {favoritesite: "runoob"};} shouldComponentUpdate () {return false;} changeSite = () = > {this.setState ({favoritesite: "google"});} render () {return (my favorite website is modified by {this.state.favoritesite}) }} ReactDOM.render (, document.getElementById ('root'))

Output result:

The following example demonstrates what happens when the shouldComponentUpdate () method returns true (click the button to modify it):

React instance class Header extends React.Component {constructor (props) {super (props); this.state = {favoritesite: "runoob"};} shouldComponentUpdate () {return true;} changeSite = () = > {this.setState ({favoritesite: "google"});} render () {return (my favorite website is modified by {this.state.favoritesite}) }} ReactDOM.render (, document.getElementById ('root'))

Output result:

After clicking the button:

Thank you for reading, the above is the content of "what is the periodic function of react performance optimization". After the study of this article, I believe you have a deeper understanding of what the periodic function of react performance optimization is, 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.