React useToggler钩子

提供一个可以在两个状态之间切换的布尔状态变量。

• 使用useState()钩子创建value状态变量及其setter。
• 创建一个函数来切换value状态变量的值，并使用useCallback()钩子进行记忆。
• 返回value状态变量和记忆化的切换函数。

const useToggler = initialState => {
  const [value, setValue] = React.useState(initialState);

  const toggleValue = React.useCallback(() => setValue(prev => !prev), []);

  return [value, toggleValue];
};

const Switch = () => {
  const [val, toggleVal] = useToggler(false);
  return <button onClick={toggleVal}>{val ? 'ON' : 'OFF'}</button>;
};
ReactDOM.createRoot(document.getElementById('root')).render(
  <Switch />
);