快捷導(dǎo)航

Component與PureComponent對比解析

更新時間：2023年03月01日 12:01:33 作者：別哭0摸摸頭

這篇文章主要為大家介紹了Component與PureComponent解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

題外話

有啥不對的請多多指教，研究的不算很深，記錄為了分享，也為了博采眾長，完善知識。

官方文檔

React.PureComponent 與 React.Component很相似。兩者的區(qū)別在于 React.Component 并未實現(xiàn) shouldComponentUpdate()，而 React.PureComponent 中以淺層對比 prop 和 state 的方式來實現(xiàn)了該函數(shù)。

官方解釋也很容易理解，React.PureComponent比React.Component中多實現(xiàn)了一個方法，就導(dǎo)致了在組件數(shù)據(jù)發(fā)生變化時，React.PureComponent會先進(jìn)行和上一次的比較，如果相同，就不會再繼續(xù)更新了。

口說無憑，還是得通過代碼來體會。

對比

先看兩者相同得地方代碼如下

class Box1 extends React.Component {
  render() {
    console.log('Box1 update');
    return <div>Box1: {this.props.count}</div>;
  }
}

class Box2 extends React.PureComponent {
  render() {
    console.log('Box2 update');
    return <div>Box2: {this.props.count}</div>;
  }
}

先制作2個對比的組件Box1與Box2，然后制作一個父組件引入其中,并設(shè)置一個方法

export default () => {
  const [count, setCount] = React.useState(1);
  console.log('parent update');
  return (
    <div>
      <Box1 count={count}/>
      <Box2 count={count}/>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
};

此時，點擊button按鈕的時候，上述2個Box組件都會進(jìn)行更新。

這也是最基礎(chǔ)的組件更新。

取消外部數(shù)據(jù)引入

class Box1 extends React.Component {
  render() {
    console.log('Box1 update');
    return <div>Box1</div>;
  }
}
class Box2 extends React.PureComponent {
  render() {
    console.log('Box2 update');
    return <div>Box2</div>;
  }
}
export default () => {
  const [count, setCount] = React.useState(1);
  console.log('parent update');
  return (
    <div>
      <Box1 />
      <Box2 />
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
};

取消Box組件內(nèi)對外部count的引入

此時頁面更新為

此時會發(fā)現(xiàn)只有Box1重新刷新了一遍，而Box2未重新加載組件，也就是PureComponent內(nèi)部做了淺比較相同的不會進(jìn)行更新。

為什么被稱為淺比較

淺比較是指對值類型進(jìn)行比較，而稍微復(fù)雜一點的引用類型（Object）,就無法進(jìn)行判斷了，react內(nèi)部的更新都是淺比較。

export default () => {
  const [count, setCount] = React.useState({ num: 1 });
  console.log('parent update');
  const click = () => {
    const newCount = count;
    newCount.num = count.num + 1;
    setCount(newCount);
    console.log('update:', count)
  };
  return (
    <div>
      <Box1 />
      <Box2 />
      <button onClick={click}>+1</button>
    </div>
  );
};

此時，父組件內(nèi)部的count為對象類型，此時進(jìn)行更新時，頁面不會觸發(fā)任何更新，父組件也不會進(jìn)行刷新（由于是引用類型，newCount發(fā)生數(shù)據(jù)變化時，count其實已經(jīng)發(fā)生變化，但是頁面并不會有任何的反應(yīng)）。

由圖可見，子組件和父組件并沒有進(jìn)行刷新，均未打印。

小知識點

const的不可變定義也是只對于值類型而言，對于引用類型，還是依然可變。上述代碼云清并不會報錯。

說明

上述的一切代碼都是建立在父組件自身更新的基礎(chǔ)上子組件才會刷新，如果我將setCount(count + 1)改為setCount(count + 0),那么，父組件本身不會進(jìn)行刷新，子組件也就理所當(dāng)然的不會有任何變化。

另類的不更新

這里的父組件刷新帶動子組件刷新有一種例外的情況。代碼如下

const Parent = ({ children }) => {
  const [count, setCount] = React.useState(1);

  console.log('parent update');
  return (
    <div>
      {children}
      <button onClick={() => setCount(count + 1)}>box2</button>
    </div>
  );
};

export default () => {
  return (
    <Parent>
      <Box1 />
      <Box2 />
    </Parent>
  );
};

將父組件抽離出來，子組件以children的形式引入。此時頁面點擊發(fā)生的變化為