React如何避免子组件无效刷新

import { useState } from 'react';

const Child = () => {
  console.log('child render');

  return null;
};

const App = () => {
  const [name, setName] = useState(1);

  return (
    <div onClick={() => setName(2)}>
      <Child />
    </div>
  );
};

typescript复制代码const oldProps = current.memoizedProps; // 更新前老的props

const newProps = workInProgress.pendingProps; // 待比较更新后的props

if (oldProps !== newProps) {
  didReceiveUpdate = true; // 标记为发生变化，需要更新
}

function shallowEqual(objA: mixed, objB: mixed): boolean {
  // 一样的对象返回true

  if (Object.is(objA, objB)) {
    return true;
  }

  // 不是对象或者为null返回false

  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
    return false;
  }

  const keysA = Object.keys(objA);

  const keysB = Object.keys(objB);

  // key数量不同返回false

  if (keysA.length !== keysB.length) {
    return false;
  }

  // 对应key的值不相同返回false

  for (let i = 0; i < keysA.length; i++) {
    if (!hasOwnProperty.call(objB, keysA[i]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {
      return false;
    }
  }

  return true;
}

import { useMemo } from 'react';

const Child = () => {
  console.log('child render');

  return null;
};

const App = () => {
  const [name, setName] = useState(1);

  const child = useMemo(() => <Child />, []);

  return <div onClick={() => setName(2)}>{child}</div>;
};

import { useMemo } from 'react';

const Child = ({ name }) => {
  console.log('child render');

  return name;
};

const App = () => {
  const [name, setName] = useState(1);

  const child = useMemo(() => <Child name={name} />, []);

  return <div onClick={() => setName(2)}>{child}</div>;
};

const App = () => {
  const [color, setColor] = useState('red');

  return (
    <div>
      <input value={color} onChange={(e) => setColor(e.target.value)} />

      <p style={{ color }}>Hello, world!</p>

      <Child />
    </div>
  );
};

const App = () => {
  return (
    <div>
      <Form />
      <Child />
    </div>
  );
};

const Form = ({ children }) => {
  const [color, setColor] = useState('red');

  return (
    <div style={{ color }}>
      <input value={color} onChange={(e) => setColor(e.target.value)} />

      {children}
    </div>
  );
};

const App = () => {
  return (
    <div>
      <Form>
        <p>Hello, world</p>
        <Child />
      </Form>
    </div>
  );
};