React渲染需为纯计算？useState场景下的逻辑疑问解析

首先要明确：React所说的渲染是纯计算，这里的「输入」并不仅仅指组件的props，还包括组件当前的状态（state）——也就是说，当props和state的组合完全相同时，组件必须返回完全相同的JSX。

拿计数器例子来说：

• 首次渲染时，组件的state是0，此时的输入是「无props + state=0」，渲染函数根据这个输入返回显示0的JSX；
• 当点击按钮触发state更新为1后，触发新的渲染，此时的输入变成「无props + state=1」，渲染函数根据这个新输入返回显示1的JSX。

这两次渲染的输入本身就不一样，所以完全符合「相同输入，相同输出」的纯计算要求。

另外要区分清楚：渲染函数本身不能产生副作用（比如直接修改state、发起网络请求），它只是基于当前的props和state做纯计算。state的更新操作是在渲染之外的逻辑里完成的（比如事件处理函数），更新完成后才会触发新的渲染，此时新的state会作为下一次渲染的输入之一。

内容的提问来源于stack exchange，提问作者Stefanie Gauss