2022年前端React的100道面试题的第13题：setState 方法

问题

对 setState(updater, [callback]) 方法正确说明的是？

选项

A. 它应视为请求更新而不是立即更新组件的命令。

B. updater 的返回值会与 state 进行深合并。

C. 第二个可选回调函数是在 setState 完成合并后会执行。

D. this.state 是在 shouldComponentUpdate() 返回 true 后，在 render() 执行前才会被更新的。

答案

A、D

纠错

B. updater 的返回值会与 state 进行浅合并。

C. 第二个可选回调函数是在 setState 完成合并且重新渲染组件后会立即执行。

解答

调用 setState 其实是异步的 —— 不要指望在调用 setState 之后，this.state 会立即映射为新的值。如果你需要基于当前 state 来计算出新的值，那你应该传递一个函数，而不是一个对象

对象与函数方式的区别

传递一个函数可以让你在函数内访问到当前的 state 的值。

this.setState((state) => {
    // 重要：在更新的时候读取 `state`，而不是 `this.state`。
    return {count: state.count + 1}
});

异步设计的原因

在 React ( state, props, refs) 提供的对象在内部都是遵循此协调方式，因此 props 也是异步更新的，它是在父级组件被渲染时才能获取到的最新值。

例如下面的代码，将状态提升到父级管理：

- this.setState({ value: this.state.value + 1 }); 
+ this.props.onIncrement(); // 在父级中做同样的事情

此时执行方法，就会得到与 state 一样的现象：

console.log(this.props.value) // 0
this.props.onIncrement();
console.log(this.props.value) // 0
this.props.onIncrement();
console.log(this.props.value) // 0

异步的缺点

• 不利于调试，当需要多种修改状态来确认更新时，无法满足；

• 在 componentWillUpdate 和 shouldComponentUpdate 生命周期中，获取到的状态数据 this.state 仍然是修改前的值。

• 对于刚接触的开发人员有理解成本，最初很容易理解为修改 state 便会触发组件再次渲染，实际上 this.state 只是一个纯 JS 对象数据，并不具有更新组件的能力，它只是当前组件状态的一个快照。（唯一能对其赋值的位置就是在构造函数中。）

异步的优点

• 在长期维护中对 props 和 state 管理有统一的方式和准则。

• 在组件的事件处理函数内出现重复调用 setState() 时，这样可以通过避免不必要的重新渲染来提升性能。

• 为后续并发模式提供的实现的可能，为渲染进行更细颗粒的评级和控制。

并发模式（concurrent mode）

React 团队一直在解释 “异步渲染” ，React 可以通过 setState() 方法根据调用的来源为它们分配不同的优先级：事件处理程序、网络响应、动画等。

它不仅仅是性能上的优化，而是 React 组件模型所发挥价值上的一大提升。详细的请阅读《React 18 发布计划》

React 18 已进入 Beta 阶段。—— 2021 年 11 月 15 日

资料

setState：这个API设计到底怎么样

using-state-correctly

setstate()

javascript - Does React keep the order for state updates? - Stack Overflow

https://medium.com/javascript-scene/setstate-gate-abc10a9b2d82#.ftefj7nn2

来源

搜索《考试竞技》微信小程序