React 基础面试题, React 中如何监听 state 的变化?
React 基础面试题, React 中如何监听 state 的变化?
QA
Step 1
Q:: React 中如何监听 state 的变化？
A:: 在 React 中，监听 state 的变化通常通过生命周期方法或使用 React Hooks。通过生命周期方法（例如 componentDidUpdate）来监听 state 的变化。在函数组件中，可以使用 useEffect Hook，它会在组件渲染后或 state 更新后执行。在 useEffect 中，您可以通过传入依赖数组来指定您想要监听的特定 state 变化。
Step 2
Q:: 如何使用 useEffect 监听特定的 state 变化？
A:: useEffect 是 React Hook，可以用于执行副作用，例如数据获取、手动 DOM 操作、订阅等。要监听特定的 state 变化，可以在 useEffect 的依赖数组中传入该 state 变量。useEffect(() => { // 执行副作用逻辑 }, [state])。当 state 发生变化时，useEffect 会被重新调用，从而实现对该 state 的监听。
Step 3
Q:: React 中如何避免不必要的组件重新渲染？
A:: 可以通过使用 React.memo、高效的 shouldComponentUpdate 方法、或在函数组件中使用 React.memo 包裹组件来优化渲染性能。使用 React.memo 时，如果传入的 props 没有发生变化，则不会重新渲染组件。在 Class 组件中，shouldComponentUpdate 方法可以通过自定义逻辑来决定组件是否需要更新。
Step 4
Q:: 在大型 React 应用中管理 state 的最佳方式是什么？
A:: 在大型 React 应用中，管理 state 通常会使用一些 state 管理库，例如 Redux、MobX 或者使用 React 的 Context API。Redux 提供了一个集中化的 store 来管理全局 state，并通过 actions 和 reducers 来更新 state。MobX 侧重于通过可观察的数据流来自动更新视图。而 React 的 Context API 则适合用于跨组件传递数据，避免繁琐的 props drilling。
Step 5
Q:: 什么是 React 中的副作用？为什么需要管理副作用？
A:: 副作用是指组件渲染过程中产生的除了返回 JSX 以外的其他行为，例如数据获取、订阅外部数据源、手动修改 DOM 等。管理副作用的重要性在于确保这些操作在组件生命周期中的正确时机执行，避免内存泄漏和不必要的更新。useEffect 是管理副作用的主要工具，它允许开发者在特定时机执行副作用代码。