state

可能会认为用户界面会直接对点击之类的用户输入做出响应并发生变化。

在

React

中它的工作方式与这种思维模型略有不同。

这意味着要使界面对输入做出反应需要设置其

在这个例子中当按下

{e.preventDefault();setIsSent(true);sendMessage(message);}}textareaplaceholderMessagevalue{message}onChange{e

setMessage(e.target.value)}/button

}function

“快照”是可交互的。

它其中包括类似事件处理函数的逻辑这些逻辑用于指定如何对输入作出响应。

React

随后会更新屏幕来匹配这张快照并绑定事件处理函数。

因此按下按钮就会触发JSX

React

这里有个展示其运行原理的小例子。

在这个例子中可能会以为点击“3”按钮会调用

setNumber(number

可能已经发生了更改但它是使用用户与之交互时状态的快照进行调度的

state

这里有个示例能够说明上述特性会使事件处理函数更不容易出现计时错误。

下面是一个会在五秒延迟之后发送一条消息的表单。

想象以下场景

按下“发送”按钮向

发送“你好”。

在五秒延迟结束之前将“To”字段的值更改为“Bob”。

你觉得

{e.preventDefault();setTimeout(()

{alert(You

onSubmit{handleSubmit}labelTo:{

valueBobBob/option/select/labeltextareaplaceholderMessagevalue{message}onChange{e

setMessage(e.target.value)}/button

}React

快照。

变量和事件处理函数不会在重渲染中“存活”。

每个渲染都有自己的事件处理函数。

每个渲染以及其中的函数始终“看到”的是

React