一.它們幾乎完全相同，但是PureComponent通過prop和state的淺比較來實現shouldComponentUpdate，某些情況下可以用PureComponent提升性能

1.所謂淺比較(shallowEqual)，即react源碼中的一個函數，然后根據下面的方法進行是不是PureComponent的判斷，幫我們做了本來應該我們在shouldComponentUpdate中做的事情

if (this._compositeType === CompositeTypes.PureClass) {shouldUpdate = !shallowEqual(prevProps, nextProps) || ! shallowEqual(inst.state, nextState); }

而本來我們做的事情如下，這里判斷了state有沒有發生變化（prop同理），從而決定要不要重新渲染，這里的函數在一個繼承了Component的組件中，而這里this.state.person是一個對象，你會發現，在這個對象的引用沒有發生變化的時候是不會重新render的（即下面提到的第三點），所以我們可以用shouldComponentUpdate進行優化，這個方法如果返回false，表示不需要重新進行渲染，返回true則重新渲染，默認返回true

shouldComponentUpdate(nextProps, nextState) {return (nextState.person !== this.state.person);}

2.上面提到的某些情況下可以使用PureComponent來提升性能，那具體是哪些情況可以，哪些情況不可以呢，實踐出真知

3.如下顯示的是一個IndexPage組件，設置了一個state是isShow，通過一個按鈕點擊可以改變它的值，結果是：初始化的時候輸出的是constructor，render，而第一次點擊按鈕，會輸出一次render，即重新渲染了一次，界面也會從顯示false變成顯示true，但是當這個組件是繼承自PureComponent的時候，再點擊的時，不會再輸出render，即不會再重新渲染了，而當這個組件是繼承自Component時，還是會輸出render，還是會重新渲染，這時候就是PureComponent內部做了優化的體現

4.同理也適用于string，number等基本數據類型，因為基本數據類型，值改變了就算改變了

import React, { PureComponent } from 'react';class IndexPage extends PureComponent{constructor() {super();this.state = {isShow: false};console.log('constructor');}changeState = () => {this.setState({isShow: true})};render() {console.log('render');return (<div><button onClick={this.changeState}>點擊</button><div>{this.state.isShow.toString()}</div></div>);} }

5.當這個this.state.arr是一個數組時，且這個組件是繼承自PureComponent時，初始化依舊是輸出constructor和render，但是當點擊按鈕時，界面上沒有變化，也沒有輸出render，證明沒有渲染，但是我們可以從下面的注釋中看到，每點擊一次按鈕，我們想要修改的arr的值已經改變，而這個值將去修改this.state.arr,但是因為在PureComponent中淺比較這個數組的引用沒有變化所以沒有渲染，this.state.arr也沒有更新，因為在this.setState()以后，值是在render的時候更新的，這里涉及到this.setState()的知識

6.但是當這個組件是繼承自Component的時候，初始化依舊是輸出constructor和render，但是當點擊按鈕時，界面上出現了變化，即我們打印處理的arr的值輸出，而且每點擊一次按鈕都會輸出一次render，證明已經重新渲染，this.state.arr的值已經更新，所以我們能在界面上看到這個變化

import React, { PureComponent } from 'react';class IndexPage extends PureComponent{constructor() {super();this.state = {arr:['1']};console.log('constructor');}changeState = () => {let { arr } = this.state;arr.push('2');console.log(arr);// ["1", "2"]//?["1", "2", "2"]//?["1", "2", "2", "2"] // ....this.setState({arr})};render() {console.log('render');return (<div><button onClick={this.changeState}>點擊</button><div>{this.state.arr.map((item) => {return item;})}</div></div>);} }

7.下面的例子用擴展運算符產生新數組，使this.state.arr的引用發生了變化，所以初始化的時候輸出constructor和render后，每次點擊按鈕都會輸出render，界面也會變化，不管該組件是繼承自Component還是PureComponent的

import React, { PureComponent } from 'react';class IndexPage extends PureComponent{constructor() {super();this.state = {arr:['1']};console.log('constructor');}changeState = () => {let { arr } = this.state;this.setState({arr: [...arr, '2']})};render() {console.log('render');return (<div><button onClick={this.changeState}>點擊</button><div>{this.state.arr.map((item) => {return item;})}</div></div>);} }

8.上面的情況同樣適用于對象的情況

二.PureComponent不僅會影響本身，而且會影響子組件，所以PureComponent最佳情況是展示組件

1.我們讓IndexPage組件里面包含一個子組件Example來展示PureComponent是如何影響子組件的

2.父組件繼承PureComponent，子組件繼承Component時：下面的結果初始化時輸出為constructor，IndexPage render，example render，但是當我們點擊按鈕時，界面沒有變化，因為這個this.state.person對象的引用沒有改變，只是改變了它里面的屬性值
所以盡管子組件是繼承Component的也沒有辦法渲染，因為父組件是PureComponent，父組件根本沒有渲染，所以子組件也不會渲染

3.父組件繼承PureComponent，子組件繼承PureComponent時：因為渲染在父組件的時候就沒有進行，相當于被攔截了，所以子組件是PureComponent還是Component根本不會影響結果，界面依舊沒有變化

4.父組件繼承Component，子組件繼承PureComponent時：結果和我們預期的一樣，即初始化是會輸出constructor，IndexPage render，example render，但是點擊的時候只會出現IndexPage render，因為父組件是Component，所以父組件會渲染，但是當父組件把值傳給子組件的時候，因為子組件是PureComponent，所以它會對prop進行淺比較，發現這個person對象的引用沒有發生變化，所以不會重新渲染，而界面顯示是由子組件顯示的，所以界面也不會變化

5.父組件繼承Component，子組件繼承Component時：初始化是會輸出constructor，IndexPage render，example render，當我們第一次點擊按鈕以后，界面發生變化，后面就不再改變，因為我們一直把它設置為sxt2，但是每點擊一次都會輸出IndexPage render，example render，因為每次不管父組件還是子組件都會渲染

6.所以正如下面第四條說的，如果state和prop一直變化的話，還是建議使用Component，并且PureComponent的最好作為展示組件

//父組件 import React, { PureComponent, Component } from 'react'; import Example from "../components/Example";class IndexPage extends PureComponent{constructor() {super();this.state = {person: {name: 'sxt'}};console.log('constructor');}changeState = () => {let { person } = this.state;person.name = 'sxt2';this.setState({person})};render() {console.log('IndexPage render');const { person } = this.state;return (<div><button onClick={this.changeState}>點擊</button><Example person={person} /></div>);} } //子組件 import React, { Component } from 'react';class Example extends Component {render() {console.log('example render');const { person } = this.props;return(<div>{person.name}</div>);} }

三.若是數組和對象等引用類型，則要引用不同，才會渲染

四.如果prop和state每次都會變，那么PureComponent的效率還不如Component，因為你知道的，進行淺比較也是需要時間

五.若有shouldComponentUpdate，則執行它，若沒有這個方法會判斷是不是PureComponent，若是，進行淺比較

1.繼承自Component的組件，若是shouldComponentUpdate返回false，就不會渲染了，繼承自PureComponent的組件不用我們手動去判斷prop和state，所以在PureComponent中使用shouldComponentUpdate會有如下警告:

IndexPage has a method called shouldComponentUpdate(). shouldComponentUpdate should not be used when extending React.PureComponent. Please extend React.Component if shouldComponentUpdate is used.

也是比較好理解的，就是不要在PureComponent中使用shouldComponentUpdate，因為根本沒有必要

總結

以上是生活随笔為你收集整理的React 的 PureComponent Vs Component的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。