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.
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)
<!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>
<!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>
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!