react效能優化是哪個週期函數
- WBOY原創
- 2022-05-05 11:00:222193瀏覽
react效能最佳化是shouldComponentUpdate週期函數；函數可判斷是否需要呼叫render方法重新描繪dom，能夠最佳化dom diff演算法，語法為「shouldComponentUpdate(Props,state)」。
本教學操作環境：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('root'));
</script>
</body>
</html>輸出結果：
#以下實例示範了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('root'));
</script>
</body>
</html>輸出結果：
#點擊按鈕後：
推薦學習：《react影片教學》
以上是react效能優化是哪個週期函數的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn