React 进阶面试题, 在 React 中,发起网络请求应该放在生命周期的哪个阶段?为什么?
React 进阶面试题, 在 React 中,发起网络请求应该放在生命周期的哪个阶段?为什么?
QA
Step 1
Q:: 在 React 中，发起网络请求应该放在生命周期的哪个阶段？为什么？
A:: 在 React 中，通常将网络请求放在 componentDidMount 或 useEffect 钩子中（对于函数组件）。原因是当组件完成挂载时，DOM 已经准备好，因此发起网络请求是安全的，且不会阻塞 UI 的渲染。这样做也可以确保请求只在组件加载时发起，而不会在每次重绘时重复发起。
Step 2
Q:: React 中的 useEffect 钩子与类组件中的生命周期方法有什么对应关系？
A:: useEffect 钩子可以看作是类组件中 componentDidMount、componentDidUpdate 和 componentWillUnmount 这些生命周期方法的结合体。通过 useEffect，你可以在函数组件中处理副作用，例如数据获取、订阅或手动操作 DOM。使用 useEffect 的第一个参数定义要执行的副作用函数，第二个参数（依赖数组）决定何时重新执行这个副作用函数。
Step 3
Q:: 在 React 中如何确保组件在卸载时正确取消正在进行的网络请求？
A:: 在 React 中，为了避免组件卸载后仍然尝试更新状态而引发内存泄漏，应该在网络请求发出前创建一个标志（如使用 useRef 来保存一个布尔值），在组件卸载时设置该标志，并在网络请求的响应中检查该标志的状态。如果组件已卸载，则不进行状态更新。同时，也可以使用 AbortController 来手动取消 fetch 请求。
Step 4
Q:: React 如何优化网络请求的发起频率？
A:: React 可以通过使用 useEffect 钩子中的依赖数组或 React.memo、useMemo 和 useCallback 等优化工具来减少不必要的网络请求。依赖数组可以确保副作用函数只在依赖变化时重新执行，从而避免重复请求。此外，使用缓存策略、去抖动和节流技术也可以有效减少网络请求的频率。
Step 5
Q:: 在 React 中如何处理并行的多个网络请求？
A:: 在 React 中，可以使用 Promise.all 或 Promise.allSettled 来并行处理多个网络请求。Promise.all 会在所有请求都成功时返回结果，若有任意一个请求失败，则整体失败。而 Promise.allSettled 无论每个请求的结果是成功还是失败，都会返回每个请求的结果。这两种方法都可以在 useEffect 或 componentDidMount 中使用，以确保组件挂载后同时发起多个请求并处理结果。