React组件对象状态内容相同时仍重渲染的原因与解决方法

你猜的没错——React的useState对于对象、数组这类引用类型，是通过引用地址是否相同来判断是否需要更新组件的。哪怕两个对象内容完全一致，只要是新创建的对象（引用不同），就会触发重渲染。下面是几种可行的解决方案：

1. 手动比较后再更新 #

在调用setState前，先对比新旧对象的内容，只有当内容确实变化时才执行更新。根据对象的复杂度选择浅比较或深比较：

浅比较（适用于无嵌套的扁平对象） #

自己实现简单的浅比较逻辑：

const [state, setState] = useState({ keyOne: true, keyTwo: 'someKey' });

// 要设置的新状态
const newState = { keyOne: true, keyTwo: 'someKey' };

// 浅比较：检查所有键值对是否相等
const isStateEqual = Object.keys(newState).every(key => 
  Object.is(newState[key], state[key])
) && Object.keys(state).every(key => 
  Object.is(newState[key], state[key])
);

// 只有内容不同时才更新
if (!isStateEqual) {
  setState(newState);
}

深比较（适用于有嵌套结构的对象） #

如果对象包含嵌套的子对象/数组，需要递归比较所有层级的内容。可以自己实现深比较函数，或者使用成熟的工具函数（比如lodash的isEqual，注意按需引入避免冗余依赖）。

2. 使用useReducer控制更新逻辑 #

把状态更新逻辑放到useReducer的reducer函数中，在reducer里判断新旧状态是否一致，一致则返回原状态（引用不变），React就不会触发重渲染：

const initialState = { keyOne: true, keyTwo: 'someKey' };

function stateReducer(state, action) {
  if (action.type === 'UPDATE') {
    // 这里做深/浅比较，示例用浅比较
    const isEqual = Object.keys(action.payload).every(key => 
      Object.is(action.payload[key], state[key])
    ) && Object.keys(state).every(key => 
      Object.is(action.payload[key], state[key])
    );
    // 内容相同则返回原状态，否则返回新状态
    return isEqual ? state : { ...state, ...action.payload };
  }
  return state;
}

// 在组件中使用
const [state, dispatch] = useReducer(stateReducer, initialState);

// 触发更新时
dispatch({ 
  type: 'UPDATE', 
  payload: { keyOne: true, keyTwo: 'someKey' } 
});

3. 拆分独立的useState变量 #

如果对象的各个属性之间没有强关联，直接把它们拆成单独的useState状态。React对于字符串、布尔值这类原始类型，会自动比较值是否相等，只有值真正变化时才会重渲染：

const [keyOne, setKeyOne] = useState(true);
const [keyTwo, setKeyTwo] = useState('someKey');

// 调用时，值相同不会触发重渲染
setKeyOne(true); // 无重渲染
setKeyTwo('someKey'); // 无重渲染

补充说明 #

React本身没有内置针对引用类型的自动内容比较机制，所以必须手动处理比较逻辑。选择哪种方案取决于你的状态复杂度：简单扁平对象适合手动比较；嵌套复杂状态适合用useReducer；属性独立的场景拆分状态最省心。

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