React usePrevious钩子

存储先前的状态或属性。

• 创建一个接受value的自定义钩子。
• 使用useRef()钩子为value创建一个ref。
• 使用useEffect()钩子来记住最新的value。

const usePrevious = value => {
  const ref = React.useRef();
  React.useEffect(() => {
    ref.current = value;
  });
  return ref.current;
};

const Counter = () => {
  const [value, setValue] = React.useState(0);
  const lastValue = usePrevious(value);

  return (
    <div>
      <p>
        当前值: {value} - 上一个值: {lastValue}
      </p>
      <button onClick={() => setValue(value + 1)}>增加</button>
    </div>
  );
};

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