React 进阶面试题, 在 React 中,调用 setState 会更新哪些生命周期函数?
React 进阶面试题, 在 React 中,调用 setState 会更新哪些生命周期函数?
QA
Step 1
Q:: 在 React 中，调用 setState 会更新哪些生命周期函数？
A:: 调用 setState 会触发以下生命周期函数：
1. componentWillReceiveProps（在新的 props 被传入时，触发）
2. shouldComponentUpdate（判断是否需要更新组件）
3. componentWillUpdate（组件即将被更新）
4. render（渲染更新后的组件）
5. componentDidUpdate（组件更新完成）
从 React 16.3 版本开始，componentWillReceiveProps 和 componentWillUpdate 已被废弃，推荐使用 getDerivedStateFromProps 和 getSnapshotBeforeUpdate 作为替代。
Step 2
Q:: 在 React 16.x 版本中，为什么要废弃 componentWillMount，componentWillReceiveProps 和 componentWillUpdate？
A:: 这些生命周期函数在异步渲染的情况下容易引起错误和不可预测的行为。React 16.x 版本引入了新的生命周期函数，如 getDerivedStateFromProps 和 getSnapshotBeforeUpdate，这些函数更加适合异步渲染，并且可以提供更好的数据流管理和性能优化。
Step 3
Q:: React 中的 getDerivedStateFromProps 有什么作用？
A:: getDerivedStateFromProps 是一个静态方法，用于在 props 变化时更新 state。它的返回值会作为新的 state，并在调用 render 之前更新组件的状态。这个方法替代了 componentWillReceiveProps，适用于所有 props 的变化情况。
Step 4
Q:: 如何优化 React 组件的性能？
A:: 1. 使用 shouldComponentUpdate 或 React.PureComponent 来避免不必要的重新渲染。
2. 使用 React.memo 包裹函数组件，防止在相同 props 下重新渲染。
3. 避免在 render 方法中创建新的对象或函数。
4. 使用 React.lazy 和 React.Suspense 进行代码分割。
5. 使用 React 的 useCallback 和 useMemo hooks 进行性能优化，避免不必要的重渲染。
Step 5
Q:: React 中的 useEffect 和 componentDidMount 有什么区别？
A:: useEffect 是 React Hook，用于函数组件中替代生命周期方法，而 componentDidMount 是类组件中的生命周期方法。useEffect 默认在每次渲染后运行，而 componentDidMount 仅在组件挂载后运行。可以通过在 useEffect 中传递一个空数组作为依赖项来模仿 componentDidMount 的行为。