函数组件中setState传入相同原始值时如何强制重渲染组件

方案1：给状态添加版本标识 #

把activePageInView改成包含页面值和版本号的对象，每次需要强制更新时，只递增版本号——即使页面值不变，版本号的变化会让React检测到state更新，从而触发重渲染。

代码示例：

// 初始化状态时改成对象结构
const [activePageInView, setActivePageInView] = useState({ page: 初始值, revision: 0 });

const setActivePage = (page: number): void => {
    setSelectedPageNumber(page);
    setActivePageInView(prevState => {
        if (prevState.page === page) {
            // 页面相同，递增版本号触发重渲染
            return { ...prevState, revision: prevState.revision + 1 };
        }
        // 页面不同，直接更新页面值并重置版本号
        return { page, revision: 0 };
    });
};

组件内使用页面值时，取activePageInView.page即可。这个方案的优势是状态更新逻辑和业务语义绑定，不会引入额外的无关状态。

方案2：单独维护强制更新状态 #

专门声明一个用于触发重渲染的计数器状态，每次需要强制更新时，只需要递增这个计数器——React会因为状态变化触发组件重渲染。

代码示例：

// 新增一个专门用来触发重渲染的状态
const [forceUpdateCounter, setForceUpdateCounter] = useState(0);
// 封装强制更新函数
const forceUpdate = () => setForceUpdateCounter(prev => prev + 1);

const setActivePage = (page: number): void => {
    setSelectedPageNumber(page);
    if (activePageInView === page) {
        // 页面相同，调用强制更新
        forceUpdate();
        return;
    }
    setActivePageInView(page);
};

这个方案更通用，适合组件内多个场景需要强制重渲染的情况，但本质是利用状态变化的"hack"手段，没有和业务状态绑定。

方案3：使用useReducer（复杂场景适配） #

如果组件状态逻辑比较复杂，可以用useReducer替代useState。reducer函数里可以处理"强制更新"的action，即使页面值不变，只要dispatch对应的action，就能触发状态更新和重渲染。

代码示例：

type State = { activePageInView: number };
type Action = 
    | { type: 'SET_PAGE', payload: number }
    | { type: 'FORCE_UPDATE_PAGE', payload: number };

const pageReducer = (state: State, action: Action): State => {
    switch (action.type) {
        case 'SET_PAGE':
            return { activePageInView: action.payload };
        case 'FORCE_UPDATE_PAGE':
            // 即使值相同，也返回新的对象引用触发重渲染
            return { ...state, activePageInView: action.payload };
        default:
            return state;
    }
};

// 初始化reducer
const [state, dispatch] = useReducer(pageReducer, { activePageInView: 初始值 });

const setActivePage = (page: number): void => {
    setSelectedPageNumber(page);
    if (state.activePageInView === page) {
        dispatch({ type: 'FORCE_UPDATE_PAGE', payload: page });
        return;
    }
    dispatch({ type: 'SET_PAGE', payload: page });
};

这个方案适合状态逻辑复杂的组件，把状态更新逻辑集中到reducer里，更易维护。

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