Component與PureComponent對比解析

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

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

題外話

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

官方文檔

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

官方解釋也很容易理解，React.PureComponent比React.Component中多實現(xiàn)了一個方法，就導致了在組件數(shù)據(jù)發(fā)生變化時，React.PureComponent會先進行和上一次的比較，如果相同，就不會再繼續(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，然后制作一個父組件引入其中,并設置一個方法

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組件都會進行更新。

這也是最基礎的組件更新。

取消外部數(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組件內對外部count的引入

此時頁面更新為

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

為什么被稱為淺比較

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

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>
  );
};

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

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

小知識點

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

說明

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

另類的不更新

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

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ā)生的變化為