React useComponentDidUpdate钩子

在组件更新后立即执行回调函数。

• 使用useRef()钩子创建一个变量mounted，用于跟踪组件是否已挂载。
• 使用useEffect()钩子，在第一次执行钩子时将mounted的值设置为true。
• 在后续的钩子执行中运行提供的callback。
• 为第二个参数condition提供一个依赖数组，只有当依赖项发生变化时才会执行钩子。
• 行为类似于类组件的componentDidUpdate()生命周期方法。

const useComponentDidUpdate = (callback, condition) => {
  const mounted = React.useRef(false);
  React.useEffect(() => {
    if (mounted.current) callback();
    else mounted.current = true;
  }, condition);
};

const App = () => {
  const [value, setValue] = React.useState(0);
  const [otherValue, setOtherValue] = React.useState(1);

  useComponentDidUpdate(() => {
    console.log(`当前值为 ${value}。`);
  }, [value]);

  return (
    <>
      <p>
        值: {value}，其他值: {otherValue}
      </p>
      <button onClick={() => setValue(value + 1)}>增加值</button>
      <button onClick={() => setOtherValue(otherValue + 1)}>
        增加其他值
      </button>
    </>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(
  <App />
);