论坛首页 Web前端技术论坛

React面试宝典

浏览 86 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2024-10-24  
React面试宝典
学习地址1:https://pan.baidu.com/s/1xq3UP7S513iTy6nxtFATfw 提取码:9q2b
学习地址2:https://share.weiyun.com/5Tmjy5Lx 密码:a3xhud


React 是靠数据驱动视图改变的一种框架,它的核心驱动方法就是用其提供的 setState 方法设置 state 中的数据从而驱动存放在内存中的虚拟 DOM 树的更新。
更新方法就是通过 React 的 Diff 算法比较旧虚拟 DOM 树和新虚拟 DOM 树之间的 Change ,然后批处理这些改变。

React 性能优化的手段
React 中进行性能优化的手段可以从多个维度进行分类,以下是一些关键类别及其对应的优化策略:

1. 组件优化
使用PureComponent或React.memo:对于仅根据props和state改变才重新渲染的组件,使用React.PureComponent或者对其包装一层React.memo,它们都能通过浅比较props来避免不必要的重新渲染。
shouldComponentUpdate/React Hooks中的useMemo/useCallback:在类组件中实现shouldComponentUpdate生命周期方法来手动控制是否更新组件。在函数组件中,使用useMemo缓存计算结果,useCallback缓存回调函数,防止因依赖项不变而引起的无效渲染。
2. 状态管理与变更
减少不必要的setState调用:合并多次对同一状态的修改,例如使用useState hook时,可以利用函数式的setState来一次性更新多个状态值。
选择性地更新state:只在props或state真正发生变化时才进行更新,避免频繁或大面积的state变更引发大量子组件重新渲染。
3. Virtual DOM与Diff算法优化
合理构建组件层级:保持组件树扁平化,减少不必要的嵌套层次,使React的diff算法更高效。
利用key属性:为列表元素提供稳定的唯一key,帮助React识别并最小化DOM变动。
少用 dom 层级 多使用箭头标签替代
4. 事件处理优化
使用合成事件:React的合成事件系统可以减少全局事件监听器的数量,提高事件处理效率。
避免内联函数绑定:在事件处理函数中,避免每次渲染时创建新的函数引用,而是使用箭头函数或者useCallback来缓存函数引用。
5. 懒加载与代码分割
动态导入:使用React.lazy和Suspense来按需加载组件,减轻初始加载负担,提高首屏加载速度。
使用优先级加载CSS、JavaScript和图片资源。
6. 优化渲染过程
使用ReactDOM.createPortal:将某些组件渲染到根DOM之外,比如渲染到document.body,可以避免不必要的re-render。
CSS动画与交互优化:配合requestAnimationFrame等API来处理复杂的动画,减少不必要的布局重排和重绘。
7、工具辅助
Profiler工具:利用React DevTools的Profiler面板分析组件渲染性能瓶颈。
性能监控与警告:设置性能指标监控点,及时发现和修复潜在性能问题。
8、前端通用优化
静态资源压缩与HTTP缓存:优化CSS、JavaScript文件大小,合理设置HTTP缓存策略。
服务端渲染(SSR):针对SEO友好和首屏加载速度,结合Next.js等框架进行服务器端渲染。


Fiber架构出现之前 react 存在的问题

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


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

2、说说React中引入css的方式有哪几种?区别?
常见的引入方式:
在组件内直接使用
组件中引入.css文件
组件中引入.modules.css文件
CSS in JS


3、React中组件之间是如何通信的?
react中通信方式有以下几种:
父向子:父组件在调用子组件的时候,只需要在子组件标签内传递参数,子组件通过props属性就能接收父组件传递过来的参数。
子向父:子组件向父组件通信的基本思路是,父组件向子组件传一个函数,然后通过这个函数的回调,拿到子组件传过来的值。
兄弟间:父组件作为中间层来实现数据的互通,通过使用父组件传递。
父向后代:使用 context 提供了组件之间通讯的一种方式,可以共享数据,其他数据都能读取对应的数据。
非关系:使用redux,创建全局资源数据管理,共用实现通信。

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

跳转论坛:
Global site tag (gtag.js) - Google Analytics