如何在不更新React组件状态或属性的情况下强制其重渲染？

首先得明确：React的核心渲染机制就是状态或属性变化触发重渲染，绕过这个机制的操作本质上都是非常规手段，仅适合研究或极端特殊场景使用。

你提到的几种尝试方案确实都存在问题：

• 用相同值更新useState：React的状态更新逻辑会跳过与当前值完全相同的更新操作，不一定能触发重渲染，而且属于无意义的状态变更，违背React的设计原则。
• 创建新对象作为props：本质还是通过修改props触发渲染，而且需要父组件配合生成新对象，会带来不必要的渲染开销，也不符合"不更改属性"的要求。
• useReducer虚拟更新：本质还是通过修改状态（哪怕是无意义的虚拟状态）触发渲染，同样绕不开状态变更的逻辑。

一种可行的非常规方案：自定义强制更新Hook #

函数式组件中没有类组件的forceUpdate方法，但可以自己实现一个极简的强制更新逻辑，完全不需要修改业务状态或属性：

import { useState } from 'react';

const useForceUpdate = () => {
  const [counter, setCounter] = useState(0);
  // 通过修改一个无关的计数器触发重渲染
  return () => setCounter(prev => prev + 1);
};

在组件中的使用方式（以窗口响应式场景为例）：

function ResponsiveComponent() {
  const forceUpdate = useForceUpdate();

  // 监听窗口 resize 事件，触发强制更新
  useEffect(() => {
    const handleResize = () => {
      forceUpdate();
    };
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, [forceUpdate]);

  // 直接读取最新的 window.innerWidth，无需存入状态
  return <div>当前窗口宽度：{window.innerWidth}px</div>;
}

重要提醒 #

这种强制更新的方式是绕过React正常渲染机制的权宜之计，仅适合研究或极端场景使用。在实际业务中，更合理的做法是将window.innerWidth这类外部依赖存入组件状态，遵循React的状态驱动渲染原则，比如：

function ResponsiveComponent() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return <div>当前窗口宽度：{width}px</div>;
}

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