相关疑难解决方法(0)

考虑以下 Component

const Component = () =>{
    const [state, setState] = useState(null)

    const onClick = () => setState('foo')        

    console.log(state)

    return <button onClick={onClick}> Change </button>   
}

• 在按下按钮之前 console只打印null
• 第一次按下按钮console打印foo
• 第二次按下按钮并console打印foo
• 第三次和向前console不打印任何东西

我知道这console不会打印任何内容，因为我正在调用setState传递与当前状态相同的值，而 React 正在救助状态更新。这部分对我来说很清楚。我的问题是关于以下断言

请注意，在退出之前，React 可能仍需要再次渲染该特定组件。这不应该是一个问题，因为 React 不会不必要地“深入”到树中。如果您在渲染时进行昂贵的计算，您可以使用 useMemo 优化它们。

为什么需要这个额外的渲染？我的意思是，不是第二次点击后就Object.is返回false了吗？

我有下面的示例代码：

function App() {
  console.log("render");
  const [val, setVal] = React.useState(0);
  return (
    <div className="App">
      <h1>{val}</h1>
      <button onClick={() => setVal(12)}>Update with same value</button>
    </div>
  );
}

当我多次单击一个按钮时，控制台会记录 3 次并显示“渲染”消息。对我来说，它应该只有 2 次：

• 1 用于第一次渲染

• 2 用于从 val 0 到 12 的更新（单击按钮时）

从这一次开始，它不应重新渲染，因为相同的值 (12) 已更新为 val。

但是为什么会出现3次呢？这意味着尽管更新了相同的值，它仍然会重新渲染一次。

哪位知道的请解释一下，先谢谢了。

P/S：我发现它只会在值改变时导致额外的重新渲染，然后用相同的值更新

function App() {
  console.log("render");
  const [val, setVal] = useState(4);
  return (
    <div className="App">
      <h1>{val}</h1>
      <button onClick={() => {
        setVal(val => val + 1)
      }}>Update</button>
      <button onClick={() => {
        setVal(val => val)
      }}>Update with same …