React Bits项目解析：避免直接修改State的反模式-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00215/article/details/148375456

React Bits项目解析：避免直接修改State的反模式

在React开发中，状态管理是核心概念之一。React Bits项目中提到的"Mutating State without setState()"反模式，是许多React初学者常犯的错误。本文将深入剖析这一反模式的问题所在，并提供正确的解决方案。

直接修改State的反模式指的是开发者不通过React提供的setState方法，而是直接修改this.state对象的行为。这种操作虽然看似简单直接，但实际上会带来一系列问题。

让我们先看一个典型的反模式示例：

handleClick() {
  // 反模式：直接修改state
  this.state.items.push('lorem');
  
  this.setState({
    items: this.state.items
  });
}

这段代码的问题在于：

React依赖于setState来触发组件的重新渲染。当直接修改state时：

React的setState可能是异步执行的，直接修改state会导致：

React内部对状态更新有优化机制，直接修改state会绕过这些优化：

正确的做法是始终通过setState更新状态，并遵循不可变数据原则：

handleClick() {
  this.setState(prevState => ({
    items: [...prevState.items, 'lorem']
  }));
}

或者使用concat方法：

handleClick() {
  this.setState(prevState => ({
    items: prevState.items.concat('lorem')
  }));
}

在React Bits的示例中，使用了函数式更新模式：

this.setState(prevState => ({
  items: prevState.items.concat('lorem')
}));

这种模式的优势在于：

数组操作：
- 使用concat、slice、filter等不改变原数组的方法
- 或使用扩展运算符[...arr, newItem]
对象操作：
- 使用Object.assign({}, oldObj, newProps)
- 或使用对象扩展{...oldObj, newProp: value}
深层嵌套结构：
- 考虑使用不可变数据工具库(如Immutable.js)
- 或使用immer等库简化不可变更新