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

最新推荐文章于 2024-04-06 08:59:43 发布

nachaoo

最新推荐文章于 2024-04-06 08:59:43 发布

阅读量686

点赞数 1

分类专栏： React面试题文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/nacooo/article/details/121803856

版权

React面试题专栏收录该内容

17 篇文章 2 订阅

订阅专栏

问题

对 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 对象数据，并不具有更新组件的能力，它只是当前组件状态的一个快照。（唯一能对其赋值的位置就是在构造函数中。）

异步的优点