React state 更新原理 - render 时使用 state 的快照

1,318 阅读2分钟

这是我参与11月更文挑战的第24天,活动详情查看:2021最后一次更文挑战

翻译自:beta.reactjs.org/learn/state…

state 变量可能看起来像您可以读取和写入的常规 JavaScript 变量。但是,state 的行为更像是快照。设置它不会更改您已有的 state 变量,而是会触发重新渲染。

这个系列的文章你将学习到:

  • 如何设置 state 的触发器进行重新 render
  • state 何时以及如何更新
  • 设置 state 后为什么状态不会立即更新
  • 事件处理程序如何访问 state 的“快照”

render 时使用 state 的快照

我们清楚,setState 的时候,会触发重新的 render,那 render 的过程中发生了什么呢?

“rendering”意味着 React 正在调用你的组件(一个函数)。从该函数返回的 JSX 就像是 UI 的快照。它的属性、事件处理程序和局部变量都是使用它在 render 时的 state 来计算的。

与照片或电影画面不同,您返回的 UI “快照”是交互式的,它包括事件处理程序之类的逻辑,用于指定响应 input 时候发生的事情。React 接着会更新屏幕来匹配这个快照,并去连接事件处理程序。因此,按下按钮将触发来自 JSX 的点击处理程序。

当 React 重新 render 组件时:

  • React 再次调用您的函数。(于是不要在函数中存储本地变量,因为在 render 时会重新被初始化的)
  • 您的函数返回一个新的 JSX 快照。(根据 render 时的 state 计算)
  • React 然后更新屏幕以匹配您返回的快照。

image.png

作为组件的内存,state 不像函数返回后就会消失的常规变量。state 实际上“存在”在 React 本身中——就像在架子上一样!——在你的函数之外。当 React 调用您的组件时,它会为您提供该特定渲染的 state 快照。您的组件在其 JSX 中返回带有一组新 props 和事件处理程序的 UI 快照,所有这些都使用该渲染的 state 值计算

image.png