React 16.3组件生命周期：异步重取操作的处理疑问

你对componentDidMount和componentWillUnmount的理解完全没错！初始请求放在componentDidMount里是标准操作，卸载时取消未完成请求也能有效避免内存泄漏和报错。至于后续的重取操作，其实要分场景来处理，我给你拆解一下：

1. 按钮点击这类用户交互触发的重取 #

这种情况根本不需要依赖生命周期钩子，直接给按钮绑定点击事件处理函数就行。比如：

class DataComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null, loading: false };
    this.abortController = new AbortController();
    this.fetchData = this.fetchData.bind(this);
  }

  fetchData() {
    // 先取消之前可能未完成的请求
    this.abortController.abort();
    this.abortController = new AbortController();
    
    this.setState({ loading: true });
    fetch('/api/data', { signal: this.abortController.signal })
      .then(res => res.json())
      .then(data => this.setState({ data, loading: false }))
      .catch(err => {
        // 忽略取消请求的错误
        if (err.name !== 'AbortError') {
          this.setState({ loading: false });
          console.error('请求失败:', err);
        }
      });
  }

  componentDidMount() {
    this.fetchData(); // 初始请求
  }

  componentWillUnmount() {
    this.abortController.abort(); // 卸载时取消请求
  }

  render() {
    return (
      <div>
        <button onClick={this.fetchData}>刷新数据</button>
        {/* 数据展示逻辑 */}
      </div>
    );
  }
}

这里用AbortController来管理请求的取消，不管是初始请求还是用户点击触发的重取，都能确保组件卸载后不会有残留的异步操作。

2. 定时自动刷新的重取 #

如果需要每隔一段时间自动拉取数据，你可以在componentDidMount里设置定时器，然后在componentWillUnmount里清除它：

componentDidMount() {
  this.fetchData(); // 初始请求
  this.refreshInterval = setInterval(() => {
    this.fetchData(); // 定时重取
  }, 30000); // 30秒刷新一次
}

componentWillUnmount() {
  this.abortController.abort();
  clearInterval(this.refreshInterval); // 清除定时器
}

注意定时器的时间要根据实际业务场景调整，同时同样要结合AbortController处理请求取消。

3. 依赖props变化触发的重取 #

如果组件的props发生变化（比如筛选条件、用户ID改变）需要重新获取数据，这时候就要用到componentDidUpdate钩子，但一定要加判断条件，避免每次更新都发起请求：

componentDidUpdate(prevProps) {
  // 对比前后props的关键值，只有变化时才重取
  if (this.props.userId !== prevProps.userId) {
    this.fetchData();
  }
}

这个判断非常重要，不然会导致无限循环的请求（比如请求回来更新state，state更新触发componentDidUpdate，又发起请求...）。

总结一下 #

• 用户交互触发的重取：直接写在事件回调里，配合请求取消机制
• 定时重取：用setInterval配合componentDidMount和componentWillUnmount
• props变化触发的重取：用componentDidUpdate加props对比判断

不管哪种场景，核心都是要处理好异步请求的取消，避免组件卸载后还执行setState，这是React有状态组件处理异步数据的关键细节。

内容的提问来源于stack exchange，提问作者Pedro Felix