Home > Article > Web Front-end > Which periodic function is react performance optimization?
Which periodic function is react performance optimization?
- WBOYOriginal
- 2022-05-05 11:00:222177browse
React performance optimization is the shouldComponentUpdate periodic function; this function can determine whether the render method needs to be called to redraw the dom, and can optimize the dom diff algorithm. The syntax is "shouldComponentUpdate(Props,state)".
The operating environment of this tutorial: Windows 10 system, react16.4.0 version, Dell G3 computer.
Which periodic function is react performance optimization?
shouldComponentUpdate This method is used to determine whether the render method needs to be called to redraw the dom. Because the rendering 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
shouldComponentUpdate() method format is as follows:
shouldComponentUpdate(nextProps, nextState)## The #shouldComponentUpdate() method will return a Boolean value, specifying whether React should continue rendering. The default value is true, that is, the component will be re-rendered every time the state changes. The return value of shouldComponentUpdate() is used to determine whether the output of the React component is affected by changes in the current state or props. When props or state change, shouldComponentUpdate() will be called before rendering is executed. The following example demonstrates the operation performed when the shouldComponentUpdate() method returns false (cannot be modified by clicking the button):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritesite: "runoob"};
}
shouldComponentUpdate() {
return false;
}
changeSite = () => {
this.setState({favoritesite: "google"});
}
render() {
return (
<div>
<h1>我喜欢的网站是 {this.state.favoritesite}</h1>
<button type="button" onClick={this.changeSite}>修改</button>
</div>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
</script>
</body>
</html>Output result:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritesite: "runoob"};
}
shouldComponentUpdate() {
return true;
}
changeSite = () => {
this.setState({favoritesite: "google"});
}
render() {
return (
<div>
<h1>我喜欢的网站是 {this.state.favoritesite}</h1>
<button type="button" onClick={this.changeSite}>修改</button>
</div>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
</script>
</body>
</html>Output result:
react video tutorial"
The above is the detailed content of Which periodic function is react performance optimization?. For more information, please follow other related articles on the PHP Chinese website!