React中处理多次setState状态变更的最优实现方式是什么？

你顾虑的多次setState确实存在优化空间，以下是可直接落地的调整方案：

1. 合并同逻辑块的setState调用 #

现有代码请求成功后连续调用2次setState，且直接依赖this.state取值可能因为异步更新拿到旧值，可合并为单次调用，同时使用函数式setState保证取值准确

// 原代码连续2次setState的部分优化后写法
if (vehicles && vehicles.length) {
  this.setState(prevState => {
    const newVehicles = [...prevState.vehicles, ...vehicles]
    return {
      vehicles: newVehicles,
      next_page: paginator.next_page_url,
      currentVehicle: prevState.currentVehicle === null ? vehicles[0] : prevState.currentVehicle
    }
  })
}

合并后只会触发一次组件重渲染，性能更优，也避免了异步状态取值错误的问题。

2. 修复潜在内存泄漏风险 #

没有处理组件卸载后请求返回再调用setState的场景，会触发React内存泄漏警告，可新增卸载标记位处理

• 先在constructor中新增标记：this.isUnmounted = false
• 在componentWillUnmount生命周期中更新标记并清理事件：

componentWillUnmount() {
  this.isUnmounted = true
  this.removeScrollEvent()
}

• 所有setState调用前先判断标记：

.then((response) => {
  if (this.isUnmounted) return
  // 后续业务逻辑
})
.finally(() => {
  if (this.isUnmounted) return
  this.setState({ loading: false })
})

3. 其他细节优化 #

• 给getImages绑定正确的this：可直接改成类箭头函数写法getImages = () => {}，避免调用时this指向错误
• 简化过滤逻辑：vehicles过滤逻辑可简化为filter(vehicle => vehicle?.enhanced?.length)，更简洁易读
• 避免滚动事件重复注册：现有代码每次调用getImages都会注册滚动事件，会导致重复绑定，可新增标记位控制仅首次调用时注册

优化后完整getImages示例 #

getImages = () => {
  if (this.state.loading || this.isUnmounted) return

  this.setState({ loading: true })
  // 仅首次调用时注册滚动事件
  if (!this.scrollEventRegistered) {
    this.registerScrollEvent()
    this.scrollEventRegistered = true
  }

  axios.get(this.state.next_page)
    .then((response) => {
      if (this.isUnmounted) return
      const paginator = response.data
      const validVehicles = paginator.data.filter(vehicle => vehicle?.enhanced?.length)

      if (validVehicles.length) {
        this.setState(prevState => ({
          vehicles: [...prevState.vehicles, ...validVehicles],
          next_page: paginator.next_page_url,
          currentVehicle: prevState.currentVehicle ?? validVehicles[0]
        }))
      }

      if (!paginator.next_page_url) {
        this.removeScrollEvent()
        this.scrollEventRegistered = false
      }
    })
    .finally(() => {
      if (this.isUnmounted) return
      this.setState({ loading: false })
    })
}

内容的提问来源于stack exchange，提问作者Evan Lalo