03.useToggler

文章预览

在 React 应用中， 切换布尔状态 是一个常见的需求，比如开关按钮、显示/隐藏元素等。 useToggler 钩子提供了一种简洁而高效的方式来管理这种二元状态。这个自定义钩子不仅简化了代码，还提高了组件的可读性和可维护性。以下是如何实现和使用这个自定义钩子： 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  /> ); 这个技巧的关键点包括： 创建一个自定义钩子 useToggler ，它接受一个初始状态参数。 使用 useState() 创 ………………………………