React Hooks：用useRef替代useState维护布尔切换状态更高效吗？

你提到用useRef替代useState维护布尔切换状态，理论上因为useRef不触发重渲染会更高效，但这里有个核心问题需要先明确：你的useRef实现无法驱动UI更新，这会导致功能失效，谈性能也就失去了意义。

核心差异与问题分析 #

useRef实现的致命缺陷 #

你写的useRef版本中，调用toggle只会修改stateRef.current的值，但React不会因为ref的变化触发组件重渲染。这意味着即使状态变了，依赖这个状态的UI部分完全不会更新——比如你用这个状态控制的弹窗、开关按钮，用户根本看不到变化。如果要让UI同步，你还得额外加一个useState或者手动触发重渲染，反而增加了代码复杂度，所谓的性能优势也荡然无存。

useState实现的合理性 #

useState版本的实现符合React设计逻辑：调用toggle后，setState会更新状态并自动触发组件重渲染，保证UI和状态一致。对于大多数需要切换UI的场景（比如开关、折叠面板），这才是正确的选择。

性能层面的实际考量 #

• 如果你的场景完全不需要根据这个布尔状态更新UI（比如只是在内部逻辑中记录一个标记，不需要展示给用户），那用useRef确实更高效，因为避免了不必要的重渲染。但这种场景非常少。
• 对于常规的toggle场景，组件重渲染的开销微乎其微——尤其是当组件本身很小时，这点性能差异完全可以忽略。为了这点可能不存在的性能收益，牺牲功能正确性和代码可维护性，完全不值得。

两种实现代码回顾 #

useToggle（useRef实现） #

const useToggle = () => {
    const stateRef = useRef<boolean>(false);
    
    const toggle = useCallback(() => stateRef.current = !stateRef.current, []);
    
    return [stateRef, toggle];
}

useToggle（useState实现） #

const useToggle = () => {
    const [state, setState] = useState<boolean>(false);
    
    const toggle: React.Dispatch<React.SetStateAction<boolean>> = useCallback(() => setState(state => !state), []);
    
    return [state, toggle];
}

内容的提问来源于stack exchange，提问作者jefelewis