setState组件更新
setState - 告诉React 状态变化 - 需要重新渲染 - 重新执行NameInput函数import { useState } from react; function NameInput() { const [name, setName] useState() console.log(name) const [agreed, setAgreed] useState(false) console.log(agreed) return ( input value{name} onChange{(e) setName(e.target.value)} / input typecheckbox checked{agreed} onChange{(e) setAgreed(e.target.checked)} / / ) } export default NameInput原理很简单console.log(agreed)写在组件函数体里不是写在事件回调里。React 组件本质就是一个函数每次这个组件要重新渲染React 就会重新调用这个函数一遍函数体里的代码包括console.log都会重新执行一次。点击 checkbox 的流程是触发onChange调用setAgreed(e.target.checked)setAgreed是 state 更新函数调用它会告诉 React这个组件的状态变了需要重新渲染React 重新执行NameInput()这个函数函数体从头执行一遍console.log(agreed)也就跟着执行一遍打印出最新的agreed值所以你点一次 checkboxsetAgreed触发一次重渲染NameInput函数体整体跑一遍console.log自然就打印一次。同理你打字改name的时候console.log(name)也会跟着打印因为setName也会触发重渲染。这也是为什么之前提到的TodoApp里那个console.log在 StrictMode 下刷新会打印 2 次的原因是一样的只要函数体被调用里面所有同步代码都会执行不只是 return 的 JSX。
