「React 基礎」組件生命周期函數 shouldComponentUpdate() 介紹
- 2020 年 2 月 26 日
- 筆記
大家好，在《組件生命周期相關函數——componentWillMount》 和 《組件生命周期函數——componentDidMount 介紹》這兩篇文章里，我們通過實例的形式學習了 componentWillMount 和 componentDidMount 這兩個生命周期周期函數 ，本篇文章我們將通過一個虛擬幣兌換的例子學習下另外一個重要的函數 shouldComponentUpdate 。
首先看看我們應用長啥樣
大家都應該知道虛擬貨幣比特幣吧，如果你入手早的話，那就發大啦。今天我們來做一個美元購買比特幣的小應用，用戶輸入美金金額，系統會告知能兌換多少虛擬比特幣，我們的例子如下圖所示：
開始創建虛擬貨幣兌換應用
1、在基於前面幾篇文章項目的基礎上，我們在 Components 目錄下新建 Coins 文件夾，然後新建 Coins.js 和 Coins.css 文件。
2、我們這個兌換應用，用戶只能購買整數倍的比特幣，假設10美金能兌換1個比特幣，我們必須要求用戶輸入的金額必須是10美金的整數倍，這樣才能提供服務。由於 Coins.js 的代碼比較簡單，我就不分步講解了，讓我整體來看下代碼，示例代碼如下：
import React,{ Component } from "react"; import './Coins.css'; class Coins extends Component { constructor() { super(); this.state ={ dollars: 0 }; }; shouldComponentUpdate(props,state) { return state.dollars % 10 === 0; }; handleOnChange = e => { this.setState({ dollars:Number(e.target.value || 0) }); }; render() { return ( <div className="Coins"> <h1> Buy Crypto Coins! </h1> <div className="question"> <p>How much dollars do you have?</p> <p> <input placeholder="0" onChange={this.handleOnChange} type="text" /> </p> </div> <div className="answer"> <p> Crypto Coins price: $10 </p> <p> you can buy <strong> {this.state.dollars / 10} </strong> coins. </p> </div> </div> ); } } export default Coins;
3、你可能會認為，只要用戶在輸入框輸入內容，我們就會更新 state.dollars 的數據狀態，但是你運行上述代碼，你將會發現你輸入的數字小於10時，界面的提示信息不會發生改變，一直提示你只能兌換0個比特幣。如果你輸入為10的整數倍時，界面的提示信息才會發生變化。
4、之所以會這樣，是因為我們應用到了生命周期函數shouldComponentUpdate，此方法是我們提高程序性能的重要方法之一。每次我們更新本地狀態時，它都會接收兩個參數（props, state） ，執行這個生命周期函數的邏輯。
這個函數的返回值必須是布爾值，默認返回ture，返回false時不會重寫render，如果你這樣更改代碼，我們的組件狀態將永遠無法更新。
shouldComponentUpdate(props, state) { return false; }
5、如果你不定義這個方法，或者一直返回True, React 的默認行為是始終更新組件的，當我們加載大量的數據時，性能問題就會暴露出來。
6、好了，我們一起來看看應用運行的效果，在我們的示例中，當我們輸入的內容為10的整數倍時，shouldComponentUpdate()返回true，觸發了數據狀態的更新和界面的渲染，這也是我們能看到組件更新的原因 ，如下圖所示：
7、當我們輸入非10的整數倍時，我們應用的界面將不會發生任何變化，如下圖所示：
8、現在我們把 shouldComponentUpdate() 刪掉或者把方法的返回值改成True，我們在輸入框隨意輸入都會觸發我們界面的更新，如下圖所示：
9、通過自己的親自實踐後，想必你加深了對 shouldComponentUpdate() 生命周期函數的理解，通過此函數我們能控制組件更新的時機，大大提高了程序的性能，最後附上組件的 CSS 代碼，如下所示：
.Coins { background-color: #f5f5f5; border-radius: 4px; border: 1px solid #e3e3e3 ; box-shadow: inset 0 1px 1px rgba(0,0,0,.05); margin-bottom: 20px; margin: 50px auto; min-height: 20px; padding: 19px; text-align: left; width: 70%; } .Coins input { background-color: #fff; border-radius: 4px; border: 1px solid #ccc; box-shadow: inset 0 1px 1px rgba(0,0,0,.075); color: #555; font-size: 14px; height: 34px; line-height: 34px; padding: 6px 12px; width: 120px; }
小節
今天的內容就和大家分享到這裡，感謝你的閱讀，下篇文章我將會繼續和大家分享 componentWillReceiveProps() 和 componentWillUnmount() 這兩個函數，敬請期待…
