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

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