const List = () => {
  const [name, setName] = useState<string>("");
  // 用來測試的其它狀態(tài)值
  const [count, setCount] = useState<number>(0);
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const val = e.target.value;
    setName(val);
  };
  const handleClick = () => {
    setCount((c) => c + 1);
  };
  return (
    <main>
      <div className="list">
        <input value={name} onChange={handleInputChange} />
        <button onClick={handleClick}>測試</button>
        <Child count={count} />
      </div>
    </main>
  );
};
const Child: React.FC<any> = (props) => {
  console.log("Child has render");
  return <p>count:{props.count}</p>;
};

當 Input name改變的時候 List觸發(fā)rerender Child會發(fā)生rerender 可是Child 依賴的props只有count而已, 如果所有的子組件都被迫渲染，計算在render花費的時間和資源有可能成為性能瓶頸.

方案一：shallow compare

React其實剛出來就提供了優(yōu)化的手段：

shouldComponentUpdate: 返回false 就直接跳過組件的render過程
React.PureComponent: 對props進行淺比較，如果相等則跳過render 用于class 組件
React.memo: 也是進行淺比較，適用于functional Component

本文設計的組件以functioal component為主因為后面會涉及到hooks的使用，對上述例子修改：

const Child: React.FC<any> = React.memo((props) => {
  console.log("Child has render");
  return <p>count:{props.count}</p>;
})

很好 child沒有跟著name重渲染了，如果props是一個對象呢？

const List = () => {
  const [name, setName] = useState<string>("");
  // 用來測試的其它狀態(tài)值
  const [count, setCount] = useState<number>(0);
  console.log(count)
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const val = e.target.value;
    setName(val);
  };
  const handleClick = () => {
    setCount((c) => c + 1);
  };
  const item: IItem = {
    text: name,
    id: 1,
  };
  return (
    <main>
      <div className="list">
        <input value={name} onChange={handleInputChange} />
        <button onClick={handleClick}>測試</button>
        <Child  item={item} />
      </div>
    </main>
  );
};
const Child: React.FC<{ count?: number; item: IItem }> = React.memo(
  ({ item }) => {
    console.log("Child has render");
    return <p>text:{item.text}</p>;
  }
);

改變name時候Child會改變這是預期內的而當改變count時，Child還是會重渲染，這是什么原因呢？因為count改變后 List組件會rerender 從而導致導致 item這個對象又重新生成了導致child每次接受的是一個新的object對象由于每個literal object的比較是引用比較雖然前后屬性相同，但比較得出的結果為false，造成 Child rerender 。

淺比較一定要相同引用嗎？不一定，一般的面試中淺比較只是對值的比較但是React.memo中要求引用類型一定要相同為什么呢？我猜是出于對性能的考慮，不用深比較也是為了節(jié)約性能通常情況下我們想要的UI對應的是每個葉子節(jié)點的值，即只要葉子節(jié)點的值不發(fā)生變化就不要rerender

方案：

直接對前后的對象進行deepCompare

還好React.memo有第二個參數可以使用

const Child: React.FC<{ item: IItem }> = React.memo(
  ({ item }) => {
    console.log("Child has render");
    return <p>text:{item.text}</p>;
  },
  (preProps, nextProps) => {
    return _.isEqual(preProps, nextProps); // lodash的深比較 
  }
);

保證引用相等的情況下,值也相等 useRef

  const item: MutableRefObject<IItem> = React.useRef({
    text: name,
    id: 1,
  });
<Child item={item.current} />

好家伙，name無論怎么變化 Child 始終不會更新,useRef保證了返回的值是一個MutableObject 不可變的，意思就是引用完全相同不管值變化就不會保持更新.導致了UI不一致,那么我們怎么保證 name 不變的時候 item 和上次相等，name 改變的時候才和上次不等。useMemo

  const item: IItem = React.useMemo(
    () => ({
      text: name,
      id: 1,
    }),
    [name] // name變化觸發(fā)item不等 name不變item和上次相同
  );

總結：

父組件重渲染的時候,會遞歸重渲染所有的子組件
對primitive 值的數據 React比較值的相等來判斷是否重渲染組件對Object數據 React比較引用如果引用相同不會重渲染,如果引用不同會認為是不同對象造成重渲染
useRef返回一個MutableRefObject數據永遠返回的是同一個引用直到生命周期結束,官網的注解