刷刷题48 (setState常规问答）

‌1. 为什么说setState是异步的？React如何处理多个setState调用？ ‌

• ‌异步原因 ‌：为了优化性能，React会将多个setState合并为一次更新，减少不必要的渲染次数（批处理机制）。

• ‌处理方式‌：

  // 连续调用会被合并，最终count只+1
  this.setState({ count: this.state.count + 1 });
  this.setState({ count: this.state.count + 1 });

  React内部通过updater队列收集多个更新，在事件循环末尾统一处理。

---

‌2. 如何强制在setState后立即获取最新状态？ ‌

使用setState的‌回调函数 ‌或‌Promise封装‌：

// 方式1：回调函数
this.setState({ count: 1 }, () => console.log(this.state.count));

// 方式2：async/await（需自行封装）
const setStateAsync = (state) => new Promise(resolve => this.setState(state, resolve));
await setStateAsync({ count: 1 });

---

‌3. 哪些场景下setState会同步执行？ ‌

在React的‌控制范围之外‌的代码中会同步更新：

• setTimeout/setInterval
• 原生DOM事件监听器
• Promise回调

setTimeout(() => {
  this.setState({ count: 1 }); // 同步更新
  console.log(this.state.count); // 输出1
}, 0);

---

‌4. setState(partialState, callback)和this.state = ...直接修改的区别？ ‌

• ‌**setState**‌：

  • 触发组件重新渲染
  • 遵守React的更新队列机制
  • 支持批处理优化

• ‌**直接修改this.state**‌：

  • 不会触发渲染（状态不更新到UI）
  • 破坏React状态管理机制，导致数据不一致

---

‌5. 为什么说在setState中依赖this.state的值是危险的？如何解决？ ‌

• ‌危险原因‌：异步更新可能导致获取的是过期状态

  // ❌ 错误：可能基于旧值计算
  this.setState({ count: this.state.count + 1 });

• ‌解决方案 ‌：使用‌函数式更新‌

  // ✅ 正确：接收前一个状态
  this.setState((prevState) => ({ count: prevState.count + 1 }));

---

‌6. React 18中setState的批处理机制有哪些改进？ ‌

• ‌React 17及之前‌：仅在React事件处理函数中自动批处理

• ‌React 18+ ‌：

  • 所有场景（包括Promise、setTimeout等）默认自动批处理
  • 可使用flushSync强制同步更新：

  import { flushSync } from 'react-dom';
  flushSync(() => this.setState({ count: 1 })); // 立即更新

---

‌7. 如何避免setState导致的不必要重复渲染？ ‌

• ‌浅比较优化‌：

  class Component extends React.PureComponent { // 自动浅比较props/state
    state = { list: [] };
    addItem = () => {
      // ✅ 正确：返回新数组
      this.setState(prev => ({ list: [...prev.list, newItem] }));
    }
  }

• ‌手动控制‌：

  shouldComponentUpdate(nextProps, nextState) {
    return nextState.count !== this.state.count; // 仅当count变化时更新
  }

---

‌8. 在componentWillUpdate中调用setState会发生什么？ ‌

• ‌引发无限循环 ‌：
  componentWillUpdate → setState → 重新渲染 → 再次触发componentWillUpdate
• ‌解决方案 ‌：
  禁止在此生命周期中调用setState，改用componentDidUpdate处理副作用。

---

‌9. 为什么推荐在setState中返回不可变数据？如何正确实现？ ‌

• ‌不可变性优势‌：

  • 便于React快速比较状态变化
  • 避免引用类型数据共享导致的副作用

• ‌正确写法‌：

  // ✅ 对象
  this.setState({ user: { ...this.state.user, name: 'Alice' } });
  
  // ✅ 数组
  this.setState({ list: [...this.state.list, newItem] });

---

‌10. setState在异步操作（如AJAX请求）中可能遇到什么问题？如何解决？ ‌

• ‌竞态条件（Race Condition） ‌：

  当多个异步操作返回顺序不确定时，可能导致状态覆盖

• ‌解决方案‌：

  1. 使用AbortController取消过期请求
  2. 函数式更新确保基于最新状态：

  fetchData().then(data => {
    this.setState(prev => ({ 
      list: prev.filterId === currentId ? data : prev.list 
    }));
  });