在ReactJS中应当在什么位置正确发起AJAX请求？

结论 #

你对React官方文档的描述存在理解偏差，不需要强制将所有AJAX请求都放在componentDidMount中发起，在onClick、onChange等事件处理函数中发起请求完全是合法且合理的常用实现方式。

官方文档中提到的「AJAX请求应当在componentDidMount中发起」，特指组件初始化渲染时就需要加载的首屏数据对应的请求，该场景下放到componentDidMount中可以保证组件已完成挂载，请求返回后更新状态不会触发未挂载组件的更新警告，是首屏数据拉取的最佳实践。

两种实现的逻辑正误说明 #

你贴出的第二种按照「文档要求」改造的实现逻辑是错误的：

componentDidMount 生命周期仅会在组件第一次挂载完成后执行一次，后续你通过下拉选择修改valueSelected状态时，componentDidMount不会重复触发，根本无法执行请求逻辑，完全达不到选择用户后拉取对应数据的需求。

而第一种在handleChange事件处理函数中发起请求的实现，完全符合「用户选择下拉选项后触发数据拉取」的交互逻辑，是该场景下的正确实现。

两种请求放置位置的适用场景 #

• componentDidMount适用场景：组件加载完成就需要展示的数据拉取，比如商品详情页一打开就要拉取商品信息、个人中心页一打开就要拉取用户信息等首屏初始化数据请求。
• 事件处理函数适用场景：由用户交互触发的请求，比如下拉选择查询对应数据、点击按钮提交表单、点击搜索触发查询、点击分页切换列表数据等，所有由用户操作触发的请求都可以放在对应的事件处理函数中。

事件中发起请求的注意事项 #

• 可以添加loading状态避免用户重复触发请求
• 建议做好请求异常捕获，处理请求失败的提示逻辑
• 若组件可能在请求返回前卸载，最好添加取消请求的逻辑，避免内存泄漏或无效的状态更新警告

内容的提问来源于stack exchange，提问作者Diego Lope Loyola