React useGetSet钩子

创建一个有状态的值，返回一个getter和一个setter函数。

• 使用useRef()钩子创建一个持有有状态值的引用，并用initialState进行初始化。
• 使用useReducer()钩子，在每次更新时创建一个新对象，并返回其dispatch。
• 使用useMemo()钩子来记忆一对函数。第一个函数将返回state引用的当前值，第二个函数将更新它并强制重新渲染。

const useGetSet = initialState => {
  const state = React.useRef(initialState);
  const [, update] = React.useReducer(() => ({}));

  return React.useMemo(
    () => [
      () => state.current,
      newState => {
        state.current = newState;
        update();
      },
    ],
    []
  );
};

const Counter = () => {
  const [getCount, setCount] = useGetSet(0);
  const onClick = () => {
    setTimeout(() => {
      setCount(getCount() + 1);
    }, 1_000);
  };

  return <button onClick={onClick}>计数：{getCount()}</button>;
};

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