React 进阶面试题, 在 React 中,修改 props 会引发哪些生命周期函数?
React 进阶面试题, 在 React 中,修改 props 会引发哪些生命周期函数?
QA
Step 1
Q:: 在 React 中，修改 props 会引发哪些生命周期函数？
A:: 在 React 中，当 props 发生变化时，以下生命周期函数可能会被调用：
1. **componentWillReceiveProps(nextProps)**：此生命周期函数在 props 改变时被调用，用于在新的 props 到达前进行处理（注意：在 React 16.3 之后被废弃，建议使用 getDerivedStateFromProps）。
2. **shouldComponentUpdate(nextProps, nextState)：此函数用于判断组件是否应该根据新的 props 重新渲染。通过比较当前的 props 和新的 props，可以决定是否继续更新组件。
3. **componentWillUpdate(nextProps, nextState)**：在新的 props 导致组件重新渲染之前，该函数会被调用（注意：在 React 16.3 之后被废弃，建议使用 getSnapshotBeforeUpdate）。
4. **render()：根据新的 props 渲染组件。
5. **componentDidUpdate(prevProps, prevState, snapshot)**：组件更新并重新渲染后，该函数会被调用。
Step 2
Q:: 为什么建议在 React 中避免直接修改 props？
A:: 在 React 中，props 是只读的，它们应该由父组件传递，并且不应在子组件中被直接修改。直接修改 props 会导致不可预测的行为和数据一致性问题，从而破坏组件的纯函数特性。建议将需要修改的值保存在 state 中，通过 setState 来管理数据更新。
Step 3
Q:: 如何在 React 中管理组件的状态？
A:: React 提供了两种方式来管理组件的状态：
1. **内部状态 (state)：通过 this.state 和 this.setState 来管理状态。state 适用于管理组件内部的临时数据。
2. **外部状态 (props)：通过父组件传递的 props 来管理。props 通常用于组件间共享数据。
3. **使用 React Hooks**：React 16.8 引入了 Hooks，如 useState 和 useReducer，允许在函数组件中管理状态。
Step 4
Q:: 如何在 React 中避免不必要的渲染？
A:: 为了避免不必要的渲染，React 提供了多种优化手段：
1. shouldComponentUpdate：通过覆盖这个生命周期方法，可以精确控制组件在何种条件下重新渲染。
2. **React.memo**：通过使用 React.memo，可以创建一个高阶组件，仅当其 props 发生改变时才会重新渲染。
3. useMemo 和 useCallback Hooks：通过这些 Hooks，可以缓存计算结果或函数，避免因父组件重新渲染导致的子组件不必要更新。