javascript - 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

标签： javascriptreactjsreact-dom

Answer 1

如果setCount(count)你不改变状态，React 只会在状态改变时重新渲染（浅比较）。

DoingsetCount({...count})将使用相同的数据重新渲染。

阅读更多关于和解的信息