Question

React documentation声称，如果将状态挂钩更新为与当前状态相同的值，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

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

中的位置

import React, { useState } from 'react';
`

    setState({value:state+1});

Answer 2

问题是您使用的是旧的React alpha版本16.7.0-alpha.0（我认为救助功能尚未实现）。只需更新到最新版本，即可解决问题：updated sandbox

为什么在值保持不变的情况下setState重新呈现组件

2 个答案: