react效能優化是哪個週期函數-前端問答-PHP中文網

react效能優化是哪個週期函數

WBOY

發布： 2022-05-05 11:00:22

原創

2276 人瀏覽過

react效能最佳化是shouldComponentUpdate週期函數；函數可判斷是否需要呼叫render方法重新描繪dom，能夠最佳化dom diff演算法，語法為「shouldComponentUpdate(Props,state)」。

react效能優化是哪個週期函數

本教學操作環境：Windows10系統、react16.4.0版、Dell G3電腦。

react效能最佳化是哪個週期函數

shouldComponentUpdate 這個方法用來判斷是否需要呼叫render方法重新描繪dom。因為dom的描繪非常消耗性能，如果我們能在shouldComponentUpdate方法中能夠寫出更優化的dom diff演算法，可以極大的提高性能

shouldComponentUpdate() 方法格式如下：

shouldComponentUpdate(nextProps, nextState)

登入後複製

shouldComponentUpdate() 方法會傳回布林值，指定React 是否應該繼續渲染，預設值是 true，即 state 每次變更元件都會重新渲染。

shouldComponentUpdate() 的回傳值用於判斷 React 元件的輸出是否受目前 state 或 props 變更的影響，當 props 或 state 發生變更時，shouldComponentUpdate() 會在渲染執行之前被呼叫。

以下實例示範了shouldComponentUpdate() 方法傳回false 時執行的動作（點選按鈕無法修改）：

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

登入後複製

輸出結果：

react效能優化是哪個週期函數

#以下實例示範了shouldComponentUpdate() 方法傳回true 時執行的動作（點擊按鈕可以修改）：

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

登入後複製

輸出結果：

react效能優化是哪個週期函數