为什么 setState 在值保持不变时重新呈现组件

Question

React 文档声称，如果你将状态钩子更新为与当前状态相同的值，React 将在不渲染子项或触发效果的情况下进行救助。

但是，在该示例中似乎并非如此：

function Child() {
useEffect(() => console.log("Re-render Child"));
return (<div>Child</div>);
}
export default function App() {
function Counter({ initialCount }) {
const [state, setState] = useState({value: initialCount });
useEffect(() => console.log("Re-render"));
return (
<>
Count: {state.value}
<br />
<br />
<button onClick={() => {
state.value += 1;
setState(state);
}}>+1</button>
<Child></Child>
</>
);
}
return (
<div>
<Counter initialCount={1} />
</div>
);
}

单击按钮只会更改内部属性value，但对象保持不变，那么为什么 React 会触发重新渲染(包括重新渲染子项并触发console.log效果(？

这是一个沙盒来测试这一点：https://codesandbox.io/embed/react-hooks-counter-example-wrr2p

Answer 1

问题是您使用的是旧的 React alpha 版本16.7.0-alpha.0(我认为尚未实现救助功能(。只需更新到最新版本，问题就解决了：更新了沙盒

Answer 2

使用此代码 首先，您应该导入 usestate，并且您应该指定值将在 value：state+1 中的存储位置

import React, { useState } from 'react';
`
setState({value:state+1});