面试题：React componentDidUpdate 性能优化在复杂场景下的策略

使用 shouldComponentUpdate 或 React.memo：
- 在类组件中，通过重写 shouldComponentUpdate(nextProps, nextState) 方法，根据 nextProps 和 nextState 与当前的 props 和 state 进行比较，只有当真正影响组件渲染的状态或属性发生变化时才返回 true，触发更新。例如，在一个展示用户信息的组件中，如果仅 user.name 会影响显示，可在 shouldComponentUpdate 中比较 nextProps.user.name 和 this.props.user.name 来决定是否更新。
- 在函数组件中，使用 React.memo 包裹组件，它会对 props 进行浅比较，只有当 props 变化时才会重新渲染。比如一个展示商品价格的纯函数组件，通过 React.memo 包裹后，只要 price prop 不变就不会重新渲染。
优化 props 和 state：
- 减少不必要的 props 传递，确保传递给组件的 props 都是其真正需要的。例如，父组件可能有很多状态，但只传递子组件渲染所需的最小集合。
- 保持 state 的简洁性，避免在 state 中存储过多冗余或不必要的数据，因为每次 state 变化都会触发组件更新。

控制更新粒度：
- 将大组件拆分成多个小组件，每个小组件负责更细粒度的功能，这样可以减少级联更新的范围。比如在一个电商购物车页面，将商品列表、总价计算、结算按钮等功能拆分成不同组件，商品列表的更新不会影响结算按钮组件。
- 使用 React.memo 对频繁更新的子组件进行包裹，防止不必要的重新渲染。例如，在一个聊天窗口组件中，聊天消息列表子组件使用 React.memo 后，只有当消息数据发生变化时才会更新，而不是因为父聊天窗口组件的其他无关更新而重新渲染。
使用 context 进行数据传递：
- 对于一些全局共享的数据，如用户登录信息、主题设置等，使用 React.createContext 创建上下文，避免通过层层传递 props 导致不必要的子组件更新。例如，在一个多页面应用中，用户登录信息通过 context 传递，这样页面中的各个组件可以直接从 context 中获取信息，而不需要通过多层 props 传递，减少级联更新的可能性。

使用 setTimeout 或 requestAnimationFrame：
- 如果在 componentDidUpdate 中有一些操作不需要立即执行，可以使用 setTimeout 将其延迟执行，避免阻塞主线程。例如，在一个图表组件更新后，可能需要重新计算一些复杂的布局，但这个计算不需要马上进行，就可以通过 setTimeout 延迟执行。
- requestAnimationFrame 适用于与动画或视觉更新相关的操作，它会在浏览器下一次重绘之前执行回调函数，能够更高效地利用浏览器资源。比如在一个动画组件更新后，使用 requestAnimationFrame 来触发动画的重新计算和渲染。
使用 Promise 或 async/await：
- 对于异步数据获取或操作，使用 Promise 或 async/await 进行处理，确保在数据准备好后再进行相关操作。例如，在组件更新后需要获取新的数据并更新界面，可通过 async 函数发起网络请求（返回 Promise），在 await 数据返回后再更新组件的状态或进行其他操作，避免在数据未准备好时进行无效的更新操作。

在一个在线教育平台项目中，有一个课程详情页面组件，包含课程介绍、讲师信息、课程章节列表等多个子组件。由于课程章节内容经常更新，导致整个课程详情页面频繁更新，性能出现问题。

优化措施：
- 对各个子组件使用 React.memo，特别是课程章节列表组件，通过对章节数据进行浅比较，只有当章节内容真正变化时才重新渲染，减少了不必要的更新。
- 将讲师信息组件拆分成独立组件，并且使用 context 传递讲师的基本信息，避免在课程详情组件更新时因讲师信息 props 的传递导致讲师信息组件不必要的重新渲染。
- 在课程详情组件的 componentDidUpdate 中，对于一些统计信息的更新（如课程浏览量等），使用 setTimeout 延迟更新，避免阻塞主线程，提升了用户体验。通过这些优化策略，有效地提升了课程详情页面的性能，减少了卡顿现象。

星途面试题库