React onclick 函数日志在更新之前设置后设置相同状态时执行

Question

import React from "react"
import { useState } from "react"

export default function App() {
  const [count, setCount] = useState({ c: 0 })
  console.log(new Date().toString())
  console.log(`Object output ${count.c}`)

  return (
    <div>
      <p>{new Date().toString()}</p>
      {console.log(new Date().toString())};
      <br />
      <p>You clicked Object counter {count.c} times</p>
      <button onClick={() => setCount({ ...count, c: count.c + 1 })}>
        Click me
      </button>
      <p>You clicked Object counter {count.c} times</p>
      <button onClick={() => setCount(count)}>Click me</button>
    </div>
  )
}

在上面的 React 代码中，通过单击第一个按钮更新计数后执行日志并重新渲染，但在第一次单击第二个按钮之后立即执行函数中的控制台日志但不重新渲染该组件作为日期值对于此事件保持不变，进一步单击第二个按钮不执行此日志谁能解释为什么？

编辑：解释为什么当第二个按钮没有状态变化时执行控制台日志？（注意：只有当第一个按钮在此之前单击时才会发生这种情况，这会更改状态并且第二个按钮的控制台日志仅在第一次单击时记录） Console-logs-screenshot

Answer 1

在 setCount(count) 上您不更改状态，React 仅在状态更改时重新渲染 (shallow comparison)。

执行 setCount({...count}) 将使用相同的数据重新呈现。

阅读更多关于Reconciliation

React onclick 函数日志在更新之前设置后设置相同状态时执行

React onclick function log executes when the same state is set after updating the set previously

javascript

reactjs

react-dom