react性能優(yōu)化的周期函數(shù)是什么

發(fā)布時(shí)間：2022-05-05 11:58:19 來源：億速云閱讀：167 作者：iii 欄目：web開發(fā)

這篇文章主要講解了“react性能優(yōu)化的周期函數(shù)是什么”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“react性能優(yōu)化的周期函數(shù)是什么”吧！

react性能優(yōu)化是shouldComponentUpdate周期函數(shù)；該函數(shù)可判斷是否需要調(diào)用render方法重新描繪dom，能夠優(yōu)化dom diff算法，語法為“shouldComponentUpdate(Props,state)”。

本教程操作環(huán)境：Windows10系統(tǒng)、react16.4.0版、Dell G3電腦。

react性能優(yōu)化是哪個(gè)周期函數(shù)

shouldComponentUpdate 這個(gè)方法用來判斷是否需要調(diào)用render方法重新描繪dom。因?yàn)閐om的描繪非常消耗性能，如果我們能在shouldComponentUpdate方法中能夠?qū)懗龈鼉?yōu)化的dom diff算法，可以極大的提高性能

shouldComponentUpdate() 方法格式如下：

shouldComponentUpdate(nextProps, nextState)

shouldComponentUpdate() 方法會(huì)返回一個(gè)布爾值，指定 React 是否應(yīng)該繼續(xù)渲染，默認(rèn)值是 true，即 state 每次發(fā)生變化組件都會(huì)重新渲染。

shouldComponentUpdate() 的返回值用于判斷 React 組件的輸出是否受當(dāng)前 state 或 props 更改的影響，當(dāng) props 或 state 發(fā)生變化時(shí)，shouldComponentUpdate() 會(huì)在渲染執(zhí)行之前被調(diào)用。

以下實(shí)例演示了 shouldComponentUpdate() 方法返回 false 時(shí)執(zhí)行的操作（點(diǎn)擊按鈕無法修改）：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 實(shí)例</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>
      <h2>我喜歡的網(wǎng)站是 {this.state.favoritesite}</h2>
      <button type="button" onClick={this.changeSite}>修改</button>
      </div>
    );
  }
}
ReactDOM.render(<Header />, document.getElementById('root'));
</script>
</body>
</html>

輸出結(jié)果：

react性能優(yōu)化的周期函數(shù)是什么

以下實(shí)例演示了 shouldComponentUpdate() 方法返回 true 時(shí)執(zhí)行的操作（點(diǎn)擊按鈕可以修改）：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 實(shí)例</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>
      <h2>我喜歡的網(wǎng)站是 {this.state.favoritesite}</h2>
      <button type="button" onClick={this.changeSite}>修改</button>
      </div>
    );
  }
}
ReactDOM.render(<Header />, document.getElementById('root'));
</script>
</body>
</html>

輸出結(jié)果：

react性能優(yōu)化的周期函數(shù)是什么

點(diǎn)擊按鈕后：

react性能優(yōu)化的周期函數(shù)是什么

感謝各位的閱讀，以上就是“react性能優(yōu)化的周期函數(shù)是什么”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對react性能優(yōu)化的周期函數(shù)是什么這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

向AI問一下細(xì)節(jié)

react性能優(yōu)化的周期函數(shù)是什么

react性能優(yōu)化是哪個(gè)周期函數(shù)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽