useReducer函数在使用和不使用React严格模式时给出不同的答案

Question

useReducer函数在启用和不启用严格模式时给出不同的答案。随着严格模式的启用，我的计数随着每次点击而增加2，而没有严格模式，计数增加1。我明白，在严格模式下，减速器函数被调用两次，但更新函数内的状态，增加2的计数，而同样的事情，如果我用setState做，那么计数总是增加1。在usestate和usereducer函数中，函数呈现两次，但为什么输出不同?

import { useState, useReducer } from "react";
import styles from "./App.module.css";
const reducer = (state, action) => {
if (action.type === "INCREMENT") {
state.count = state.count + 1;
console.log(state);
return { count: state.count };
}
return state;
};
function App() {
const [state, dispatch] = useReducer(reducer, { count: 0 });
const increment = () => {
dispatch({ type: "INCREMENT" });
};
return (
<div>
<button onClick={increment}>+</button>
{state.count}
<button>-</button>
</div>
);
}
export default App;

我想知道在启用和禁用严格模式的情况下，reducer是如何在幕后工作的。为什么增加状态并返回状态与增加状态同时返回的输出不同

Answer 1

我不确定我是否正确，但我认为问题是因为我们有非基本类型(对象)和对象是基于内存引用的，所以对对象的任何键的更新持续存在于内存中，这就是为什么增量是由2完成的。因此，由于反应严格模式，减速器函数运行两次，并且在第一次减速器函数调用期间所做的增量在第二次渲染期间持续存在，最终在提交期间，我们看到增量为2。我也尝试了同样的事情与原始数据类型(整数在我的情况下)，增量发生1即使我直接更新状态，而不是在返回期间。

import { useState, useReducer } from "react";
import styles from "./App.module.css";
const reducer = (state, action) => {
if (action.type === "INCREMENT") {
state += 1;
console.log(state);
return state;
}
return state;
};
function App() {
const [state, dispatch] = useReducer(reducer, 0);
const increment = () => {
dispatch({ type: "INCREMENT" });
};
return (
<div>
<button onClick={increment}>+</button>
{state}
<button>-</button>
</div>
);
}
export default App;

如果我说错了，请纠正我。