javascript 为什么在成功更新和渲染组件后直接对react state和setState({})进行变异而没有bug?

q8l4jmvw  于 2023-09-29  发布在  Java
关注(0)|答案(1)|浏览(73)

假设我有一个Counter组件,它呈现了一个按钮,你可以点击它来增加它的计数:

  1. class Counter extends Component {
  2. constructor(props) {
  3. super(props)
  4. this.state = {
  5. count: 0
  6. }
  7. }
  8. inc = () => {
  9. // Directly mutate state and setState({})
  10. this.state.count += 1
  11. this.setState({})
  12. }
  13. render() {
  14. return (
  15. <button onClick={this.inc}>{this.state.count}</button>
  16. )
  17. }
  18. }

inc方法中,不执行

  1. setState(prevState => ({ count: prevState.count + 1 }))

i直接变异状态,并给定一个空对象给setState函数。我清楚地知道这不是一个推荐的模式,但只是好奇为什么这个例子会工作,似乎没有任何错误。我点击了按钮,它成功地更新了计数。
这两行代码在后台做了什么,它们实际上等于官方推荐的setState方式吗?

xzlaal3s

xzlaal3s1#

为什么在成功更新和渲染组件后直接突变react state和setState({})[...]
调用setState函数要求react重新呈现组件,this.setState({})要求重新呈现并且不更改状态值。即使你已经告诉react不要改变任何值,它仍然默认呈现,当它这样做的时候,它使用任何碰巧处于状态的值。因为你已经改变了状态,状态碰巧有了一个新的值。
[...]没有bug?
它看起来没有bug,因为你有一个简单的例子。当您需要对以前的状态执行任何操作时,错误就会出现。例如,如果你添加一个shouldComponentUpdate,前一个状态将始终等于当前状态:

  1. shouldComponentUpdate(prevProps, prevState) {
  2. console.log(prevState.count, this.state.count);
  3. return prevState.count !== this.state.count;
  4. }

Sandbox link

相关问题