React函数组件中如何避免特定状态触发组件重渲染

在React函数组件中，若要声明不会触发组件重渲染的状态，不能使用useState（其更新操作会强制组件重渲染），正确方案是使用useRef Hook。

示例代码 #

import { useRef } from 'react';

function YourComponent() {
  // 初始化状态值为0，存储在ref的current属性中
  const stateRef = useRef(0);

  // 更新状态的方法：直接修改current属性，不会触发重渲染
  const updateState = () => {
    stateRef.current += 1;
    console.log('当前状态值:', stateRef.current);
  };

  return (
    <div>
      <button onClick={updateState}>更新状态</button>
      {/* 注意：若要在页面上实时显示更新后的值，需结合其他触发重渲染的逻辑，
          因为修改ref.current不会让组件自动刷新视图 */}
    </div>
  );
}

补充说明 #

• useRef创建的对象在组件整个生命周期内保持引用不变，修改其current属性不会触发组件重渲染，完全符合你的需求。
• 你之前尝试的React.setState(0)是类组件的状态更新语法，且函数组件中无法通过这种方式创建不触发重渲染的状态，本身语法也是错误的。

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