React 之 setState函数更新在 React 中，setState 是用于更新组件状态的核心方法。它有两种调用

在 React 中，setState 是用于更新组件状态的核心方法。它有两种调用方式：值更新和函数更新。本文将重点介绍 函数式 setState 的用法、场景和最佳实践。

一、`setState` 的两种调用方式

1. 值更新（Value-based Update）

直接传递一个新的状态对象：

this.setState({ count: 1 });

2. 函数更新（Functional Update）

传递一个回调函数，该函数接收 prevState 和 props 作为参数：

this.setState((prevState, props) => {
  return { count: prevState.count + 1 };
});

二、为什么需要函数式 setState？

1. 解决异步更新问题

React 可能会将多个 setState 调用合并为一次更新以提高性能，导致直接使用值更新时可能会丢失状态。

示例（错误做法）：

// 错误：多次值更新可能被合并，最终只加1
this.setState({ count: this.state.count + 1 });
this.setState({ count: this.state.count + 1 });
this.setState({ count: this.state.count + 1 });

函数式更新（正确做法）：

// 正确：每次更新都基于最新状态
this.setState((prevState) => ({ count: prevState.count + 1 }));
this.setState((prevState) => ({ count: prevState.count + 1 }));
this.setState((prevState) => ({ count: prevState.count + 1 }));

2. 确保状态更新的原子性

函数式更新可以保证每次更新都基于最新的状态，避免竞态条件。

场景示例：在 setTimeout 中更新状态

// 错误：可能使用过时的 state.count
setTimeout(() => {
  this.setState({ count: this.state.count + 1 });
}, 1000);

// 正确：始终基于最新状态
setTimeout(() => {
  this.setState((prevState) => ({ count: prevState.count + 1 }));
}, 1000);

三、函数式 setState 的应用场景

1. 状态依赖于之前的值

当新状态需要基于当前状态计算时，必须使用函数式更新。

示例：计数器

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

2. 多个 setState 调用在同一周期

当需要在同一事件处理函数中多次更新状态时，函数式更新能确保顺序执行。

示例：复杂状态更新

handleClick = () => {
  // 先增加计数器
  this.setState((prevState) => ({
    count: prevState.count + 1
  }));
  
  // 再根据新的计数器值更新另一个状态
  this.setState((prevState) => ({
    isEven: prevState.count % 2 === 0
  }));
};

3. 状态更新依赖于 props

当新状态需要使用当前 props 时，函数式更新提供更安全的方式。

示例：基于 props 的状态更新

updateCount = () => {
  this.setState((prevState, props) => ({
    count: prevState.count + props.step // 使用 props.step
  }));
};

四、函数式 setState 的参数

函数式 setState 接收一个回调函数，该函数接受两个参数：

1. `prevState`

类型：与当前状态相同的对象
作用：提供最新的状态值，用于计算新状态

2. `props`

类型：组件当前的 props 对象
作用：提供最新的 props 值，用于计算新状态

示例：同时使用 prevState 和 props

this.setState((prevState, props) => {
  return {
    count: prevState.count + props.increment // 使用 props.increment
  };
});

五、函数式 setState 的返回值

回调函数必须返回一个对象，表示要更新的状态部分。可以是完整的状态对象，也可以是部分状态：

// 更新完整状态
this.setState((prevState) => ({
  count: prevState.count + 1,
  isLoading: false
}));

// 只更新部分状态（其余状态保持不变）
this.setState((prevState) => ({
  count: prevState.count + 1
}));

六、与 Class 组件和 Function 组件的结合

1. Class 组件中的使用

class Counter extends React.Component {
  state = { count: 0 };

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

  render() {
    return <button onClick={this.increment}>{this.state.count}</button>;
  }
}

2. Function 组件中的等价方案（使用 useState）

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount((prevCount) => prevCount + 1); // 函数式更新
  };

  return <button onClick={increment}>{count}</button>;
}

七、最佳实践

优先使用函数式更新：当状态更新依赖于之前的状态时，始终使用函数式更新。
避免混用两种更新方式：在同一组件中尽量保持一致的更新风格。

结合 immer 处理复杂状态：对于嵌套较深的状态对象，使用 immer 简化不可变更新：

import produce from 'immer';

this.setState((prevState) => 
  produce(prevState, (draft) => {
    draft.user.profile.age += 1;
  })
);

理解异步特性：即使使用函数式更新，setState 仍然是异步的，不要在调用后立即读取状态。

八、总结

函数式 setState 是 React 中处理复杂状态更新的最佳实践，它解决了异步更新带来的竞态条件问题，确保状态更新的可靠性和可预测性。在以下场景中，务必使用函数式更新：

状态更新依赖于之前的状态值
同一事件处理函数中多次更新状态
状态更新依赖于当前 props

通过合理使用函数式 setState，可以编写出更健壮、更易于维护的 React 组件。

React 之 setState函数更新

一、setState 的两种调用方式