不要直接改变状态。使用setState()反应/无直接突变状态

基础概念

在前端开发中，特别是在使用React这样的库时，状态管理是一个核心概念。状态（state）是组件内部的数据存储，它决定了组件的行为和渲染输出。直接改变状态（mutation）会违反React的设计原则，因为它破坏了组件的可预测性和性能优化。

类型

setState()可以接受两种类型的参数：

对象：直接传递一个对象，包含需要更新的状态。
对象：直接传递一个对象，包含需要更新的状态。
函数：传递一个函数，该函数接收前一个状态和当前的props，并返回一个新的状态对象。
函数：传递一个函数，该函数接收前一个状态和当前的props，并返回一个新的状态对象。

应用场景

在任何需要更新组件状态的场景中，都应该使用setState()而不是直接修改状态。例如，在处理用户输入、定时任务或者异步操作（如API调用）时。

遇到的问题及解决方法

问题：为什么直接修改状态会导致问题？

直接修改状态会导致React无法正确追踪状态的变化，可能会导致以下问题：

渲染不一致：React可能不会重新渲染组件，导致UI显示不正确。
性能下降：React可能会进行不必要的渲染，浪费计算资源。
难以调试：直接修改状态使得状态变化难以追踪，增加了调试难度。

原因

React的设计依赖于状态的不可变性（immutability），即状态一旦创建就不能被改变。直接修改状态违反了这一原则。

解决方法

始终使用setState()方法来更新状态。如果需要基于现有状态进行更新，可以使用函数形式的setState()。

// 错误的直接修改状态
this.state.count += 1;

// 正确的使用setState()
this.setState({ count: this.state.count + 1 });

示例代码

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

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

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}