useReducer:即使状态未更改，调度也会导致重新渲染

Question

我注意到，如果我调度一个碰巧不修改状态的操作，该组件无论如何都会重新渲染。

例：

// for simplicity sake, we simply pass state on (no mutation)
const someReducer = (state, action) => state
const App = () => {
const [state, dispatch] = useReducer(someReducer, 0)
// in my use case, I want to dispatch an action if some specific condition in state occurs
if(state === 0) {
dispatch({ type: 'SOME ACTION' })  // type doesn't matter
}
// return some JSX
}

我得到：

Error in app.js (16929:26)
Too many re-renders. React limits the number of renders to prevent an infinite loop.

这是设计使然吗？应该是这样的吗？

Answer 1

就您的示例而言，对于导致组件重新渲染的原因并不明显。但是，文档似乎表明，当您不改变状态时，不能保证不会发生重新渲染：

请注意，在救援之前，React 可能仍然需要再次渲染该特定组件。这不应该是一个问题，因为 React 不会不必要地"更深入"地进入树中。如果您在渲染时进行昂贵的计算，则可以使用 useMemo 对其进行优化。

这就是为什么通常建议您运行可能对useEffect产生副作用的代码，例如

const [state, dispatch] = useReducer(someReducer, 0);
...
useEffect(() => {
if (state === 0) {
dispatch({ type: 'SOME ACTION' });
}
}, [state]);