React面试宝典

React面试宝典

• 组件优化

  使用PureComponent或React.memo：对于仅根据props和state改变才重新渲染的组件，使用React.PureComponent或者对其包装一层React.memo，它们都能通过浅比较props来避免不必要的重新渲染。

  shouldComponentUpdate/React Hooks中的useMemo/useCallback：在类组件中实现shouldComponentUpdate生命周期方法来手动控制是否更新组件。在函数组件中，使用useMemo缓存计算结果，useCallback缓存回调函数，防止因依赖项不变而引起的无效渲染。

• 状态管理与变更

  减少不必要的setState调用：合并多次对同一状态的修改，例如使用useState hook时，可以利用函数式的setState来一次性更新多个状态值。

  选择性地更新state：只在props或state真正发生变化时才进行更新，避免频繁或大面积的state变更引发大量子组件重新渲染。

• Virtual DOM与Diff算法优化

  合理构建组件层级：保持组件树扁平化，减少不必要的嵌套层次，使React的diff算法更高效。

  利用key属性：为列表元素提供稳定的唯一key，帮助React识别并最小化DOM变动。

  少用dom层级，多使用箭头标签替代：减少DOM层级结构，优化渲染性能。

• 事件处理优化

  使用合成事件：React的合成事件系统可以减少全局事件监听器的数量，提高事件处理效率。

  避免内联函数绑定：在事件处理函数中，避免每次渲染时创建新的函数引用，而是使用箭头函数或者useCallback来缓存函数引用。

• 懒加载与代码分割

  动态导入：使用React.lazy和Suspense来按需加载组件，减轻初始加载负担，提高首屏加载速度。

  使用优先级加载CSS、JavaScript和图片资源：优化资源加载顺序，提升用户体验。

• 优化渲染过程

  使用ReactDOM.createPortal：将某些组件渲染到根DOM之外，比如渲染到document.body，可以避免不必要的re-render。

  CSS动画与交互优化：配合requestAnimationFrame等API来处理复杂的动画，减少不必要的布局重排和重绘。

• 工具辅助

  Profiler工具：利用React DevTools的Profiler面板分析组件渲染性能瓶颈。

  性能监控与警告：设置性能指标监控点，及时发现和修复潜在性能问题。

• 前端通用优化

  静态资源压缩与HTTP缓存：优化CSS、JavaScript文件大小，合理设置HTTP缓存策略。

  服务端渲染(SSR)：针对SEO友好和首屏加载速度，结合Next.js等框架进行服务器端渲染。

• 主线程阻塞：在React 15及更早版本中，当组件树发生更新时，React会通过递归算法一次性完成整个组件树的渲染过程，这个过程如果涉及大量组件，会导致主线程长时间阻塞，无法处理其他的UI交互，从而造成卡顿和延迟，降低用户体验。
• 无法中断与恢复渲染：原有的渲染过程不具备中断和恢复的能力，一旦开始渲染，就必须等到整个过程结束，即使在中间有更高优先级的任务也需要等待。
• 无法实现增量渲染：以往的React无法有效区分渲染任务的重要性和紧急程度，所有更新任务都被视为同等重要的，无法做到逐步、增量地渲染UI。
• 资源优化不足：旧版React无法根据应用的具体需求动态分配资源，无法高效利用有限的CPU周期来优化渲染性能。

• 说说React的事件机制？

  在React中，基于浏览器事件有一套自身的事件机制，包括：事件注册、事件合成、事件派发等，这些事件被称为合成事件。它的所有事件都是挂载在Document对象上，当真实DOM触发时，会冒泡到document上后，再处理react事件，所以会先执行原生事件，再处理react事件，最后再真正执行document上挂载事件。

• 说说React中引入css的方式有哪几种？区别？

  在组件内直接使用：直接在组件JSX中内联样式，灵活性高但不利于维护。

  组件中引入.css文件：传统方式，全局作用域，可能引发样式冲突。

  组件中引入.modules.css文件：CSS Modules方式，局部作用域，避免样式冲突。

  CSS in JS：如styled-components，将CSS写在JavaScript中，便于组件化管理和动态样式调整。

• React中组件之间是如何通信的？

  父向子：父组件在调用子组件的时候，只需要在子组件标签内传递参数，子组件通过props属性就能接收父组件传递过来的参数。

  子向父：子组件向父组件通信的基本思路是，父组件向子组件传一个函数，然后通过这个函数的回调，拿到子组件传过来的值。

  兄弟间：父组件作为中间层来实现数据的互通，通过使用父组件传递。

  父向后代：使用context提供了组件之间通讯的一种方式，可以共享数据，其他数据都能读取对应的数据。

  非关系：使用redux，创建全局资源数据管理，共用实现通信。

• Redux工作原理

  Redux是React的第三方状态管理库，创建于上下文API存在之前。它基于一个称为存储的状态容器的概念，组件可以从该容器中作为props接收数据。更新存储区的唯一方法是向存储区发送一个操作，该操作被传递到一个reducer中。reducer接收操作和当前状态，并返回一个新状态，触发订阅的组件重新渲染。