Which periodic function is react performance optimization?-Front-end Q&A-php.cn

Which periodic function is react performance optimization?

WBOY

Release： 2022-05-05 11:00:22

Original

2267 people have browsed it

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

Which periodic function is react performance optimization?

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)

Copy after login

## 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(&#39;root&#39;));
</script>
</body>
</html>

Copy after login

Output result:

Which periodic function is react performance optimization?

The following example demonstrates the operation performed when the shouldComponentUpdate() method returns true (can 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 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(&#39;root&#39;));
</script>
</body>
</html>

Copy after login

Output result:

Which periodic function is react performance optimization?

Click the button After:

Which periodic function is react performance optimization?

Recommended study: "

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!