Component與PureComponent對(duì)比解析

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

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

題外話

有啥不對(duì)的請(qǐng)多多指教，研究的不算很深，記錄為了分享，也為了博采眾長，完善知識(shí)。

官方文檔

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

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

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

對(duì)比

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

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個(gè)對(duì)比的組件Box1與Box2，然后制作一個(gè)父組件引入其中,并設(shè)置一個(gè)方法

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

此時(shí)，點(diǎn)擊button按鈕的時(shí)候，上述2個(gè)Box組件都會(huì)進(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)對(duì)外部count的引入

此時(shí)頁面更新為

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

為什么被稱為淺比較

淺比較是指對(duì)值類型進(jìn)行比較，而稍微復(fù)雜一點(diǎn)的引用類型（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>
  );
};

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

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

小知識(shí)點(diǎn)

const的不可變定義也是只對(duì)于值類型而言，對(duì)于引用類型，還是依然可變。上述代碼云清并不會(huì)報(bào)錯(cuò)。

說明

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

另類的不更新

這里的父組件刷新帶動(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的形式引入。此時(shí)頁面點(diǎn)擊發(fā)生的變化為