react常见面试题(持续更新)

React面试题

1.对虚拟dom理解

在React.js中，虚拟DOM（Virtual DOM）是一种优化策略，用于解决传统Web应用直接操作DOM带来的性能问题。以下是关于React虚拟DOM的核心理解点：

1. 虚拟DOM的概念：

   • 虚拟DOM是实际DOM（Document Object Model）在内存中的抽象表现，用JavaScript对象模拟DOM节点及其属性。当React组件渲染时，它并不会立即操作浏览器的真实DOM，而是创建对应的虚拟DOM树。

2. 工作原理：

   • 当React组件的状态或属性发生变化时，React会重新运行render()方法生成新的虚拟DOM树。

   • 新旧两棵虚拟DOM树之间会通过高效的Diff算法进行比较（也称为reconciliation过程）。

   • Diff算法找出最小差异集，即哪些子节点需要更新、插入、删除等操作。

   • 只有那些经过Diff算法识别出的需要更新的部分，React才会去操作真实DOM，进行必要的增删改查操作。

3. 优势：

   • 性能优化：避免频繁操作真实DOM，每次变更都全量更新DOM的成本极高，而虚拟DOM通过Diff算法能有效减少对真实DOM的操作次数，显著提升性能。

   • 跨平台性：虚拟DOM本身是一种抽象概念，这使得React不仅适用于Web环境，还能应用于其他非DOM环境，例如React Native就是利用虚拟DOM思想构建原生移动应用UI。

4. 简化开发：

   • 开发者只需要关心组件的状态变化，React负责根据状态变化后的虚拟DOM去更新视图，实现了声明式编程模式，极大地简化了UI开发和维护工作。

综上所述，React虚拟DOM是React框架下高效管理UI更新的重要技术手段，它通过在内存中构建和操作抽象的DOM模型，有效地提升了大规模Web应用的性能表现。

2.谈谈你对React的理解

React 是一个由 Facebook 开发并开源的 JavaScript 库，主要用于构建用户界面（UI）。它是目前Web前端开发领域最流行的库之一，特别是在构建单页应用（SPA）、移动应用和桌面应用中占有重要地位。React以其独特的设计理念和强大的功能著称：

1. 组件化开发：React的核心思想是组件化编程，它鼓励开发者将UI切分成一系列可复用的独立部件——组件（Components）。组件可以嵌套，每个组件负责自己的渲染和状态管理，这有助于复杂界面的模块化和维护。

2. 虚拟DOM：React使用虚拟DOM（Virtual DOM）技术，这是一种内存中的轻量级JavaScript对象树，用来描述真实的DOM结构。每当组件的状态改变时，React会重新计算虚拟DOM树，通过高效的Diff算法找出实际DOM中需要更新的部分，然后仅针对这些变化进行实际DOM操作，极大提高了网页的更新效率。

3. 单向数据流与状态管理：React推崇单向数据绑定和父子组件之间通过props向下传递数据的方式。对于复杂的组件间通信和状态管理，React配合Redux、Context API或React Hooks（如useState、useReducer、useContext等）提供了解决方案。

4. JSX：React引入了JSX语法扩展，它允许在JavaScript中书写类似HTML的语法来定义组件结构。JSX让开发者可以直接在JavaScript代码中编写UI模板，提高了代码的可读性和直观性。

5. 响应式编程：React通过对组件内state或props的变化实时响应，能够保证界面状态始终与数据同步。

6. 可维护性与测试性：React组件易于理解和测试，因为它们是纯粹的函数输入输出，而且React提供了丰富的生命周期方法，帮助开发者在组件的不同阶段进行初始化、更新和清理工作。

7. 生态丰富：围绕React建立了一个庞大的生态系统，包括但不限于Router（路由库）、State Management Libraries（如Redux、MobX）、Testing Tools（如Jest、Enzyme）、UI Component Libraries（如Material-UI、Ant Design）等。

总之，React不仅仅是一个视图层库，它提供了一种现代化的、声明式的编程方式来构建交互性强、性能优越的动态用户界面，并且在大型项目的开发和维护过程中展现出了极高的价值。随着React Hooks的推出以及React Native对原生移动应用的支持，React的应用范围得到了进一步拓展。

3.如何避免React生命周期中的坑

• 避免生命周期中的坑需要做好两件事：不在恰当的时候调用了不该调用的代码；在需要调用时，不要忘了调用。

• 那么主要有这么 7 种情况容易造成生命周期的坑

  • getDerivedStateFromProps 容易编写反模式代码，使受控组件与非受控组件区分模糊

  • componentWillMount 在 React 中已被标记弃用，不推荐使用，主要原因是新的异步渲染架构会导致它被多次调用。所以网络请求及事件绑定代码应移至 componentDidMount 中。

  • componentWillReceiveProps 同样被标记弃用，被 getDerivedStateFromProps 所取代，主要原因是性能问题

  • shouldComponentUpdate 通过返回 true 或者 false 来确定是否需要触发新的渲染。主要用于性能优化

  • componentWillUpdate 同样是由于新的异步渲染机制，而被标记废弃，不推荐使用，原先的逻辑可结合 getSnapshotBeforeUpdate 与 componentDidUpdate 改造使用。

  • 如果在 componentWillUnmount 函数中忘记解除事件绑定，取消定时器等清理操作，容易引发 bug

  • 如果没有添加错误边界处理，当渲染发生异常时，用户将会看到一个无法操作的白屏，所以一定要添加

4.React 的请求应该放在哪里,为什么

对于异步请求，应该放在 componentDidMount 中去操作。从时间顺序来看，除了 componentDidMount 还可以有以下选择：

• constructor：可以放，但从设计上而言不推荐。constructor 主要用于初始化 state 与函数绑定，并不承载业务逻辑。而且随着类属性的流行，constructor 已经很少使用了

• componentWillMount：已被标记废弃，在新的异步渲染架构下会触发多次渲染，容易引发 Bug，不利于未来 React 升级后的代码维护。

• 所以React 的请求放在 componentDidMount 里是最好的选择。

5.React Fiber架构

React Fiber 架构是React团队对React核心算法的重大革新，旨在改善React应用程序的性能并提供更好的用户体验。以下是对React Fiber架构关键理解和特性概述：

1. 背景与问题：

   • 在React 15及之前的版本中，渲染过程是一个递归且不可中断的过程，对于大型组件树或者高频率的更新场景，可能导致主线程长时间阻塞，进而影响应用的响应性和流畅度。

2. Fiber核心概念：

   • Fiber节点：Fiber架构引入了一种新的内部数据结构——Fiber节点，每个React组件都会有一个对应的Fiber节点，它包含了组件的类型、props、状态等信息，形成了一个新的“Fiber树”结构，取代了原有的单一递归调用链。

   • 可中断与恢复渲染：Fiber架构允许渲染过程被打断并在之后恢复，这是通过将渲染任务拆分成一系列小的工作单元（microtasks），每个工作单元都可以被单独调度和优先级排序，这样就可以在渲染过程中灵活地切换上下文，比如响应高优先级的浏览器事件。

3. 增量渲染与优先级调度：

   • Fiber架构支持增量渲染，这意味着React不再一次性计算整个组件树的差异，而是分阶段逐步进行，可以根据优先级决定何时暂停渲染并处理其他任务，比如高优先级的动画帧或者用户交互。

4. 任务调度器：

   • React Fiber引入了一个新的任务调度器，可以根据组件的不同特性（如是否可见、是否有动画、是否悬停等）分配优先级，确保重要的更新能够及时得到处理。

5. 性能优化：

   • 通过Fiber架构，React能够更好地管理复杂的渲染逻辑，降低不必要的DOM操作，从而提升性能，特别是在大规模的应用场景下，有助于减小UI更新带来的卡顿现象，增强应用的实时性和流畅性。

6. 未来扩展性：

   • Fiber架构也为React后续功能的拓展提供了基础，如异步渲染、并发模式等功能，使得React能够适应更多复杂和高性能的需求。

总之，React Fiber架构通过对React核心算法的重构，从根本上改变了React处理组件更新和渲染的方式，提高了其在复杂场景下的性能和灵活性，从而带来了更好的用户体验。

6.react中有哪些优化?

在React应用中进行性能优化可以从多个角度入手，以下是一些常见的React性能优化手段：

1. 减少渲染

   • shouldComponentUpdate: 实现shouldComponentUpdate生命周期方法，根据props和state的变化来决定组件是否需要重新渲染。若新的props或state与现有值相等，则返回false以阻止渲染。

   • React.PureComponent / React.memo: 使用React.PureComponent替代React.Component，它会浅比较props和state的变化。而对于函数组件，可以使用React.memo来进行优化，它会对组件进行 memoization，只有当props改变时才重新渲染。

2. 懒加载和代码分割

   • 懒加载（Dynamic Import）: 使用React.lazy和Suspense组件实现组件级别的懒加载，降低首屏加载时间，按需加载组件。

   • Webpack代码分割（Code Splitting）: 结合构建工具如Webpack，将应用拆分为多个bundle，延迟加载未到达视窗的组件所依赖的代码。

3. 状态管理优化

   • 精简setState调用：合并多个setState调用，避免短时间内频繁更新状态引发过多渲染。

   • 选择合适的状态容器：使用Redux、MobX等状态管理库可以更有效地管理全局状态，减少不必要的组件层级更新。

4. 渲染优化

   • 使用React.Fragment：避免多余的DOM节点，用<>...</>或者<React.Fragment>包裹多个子元素以减少DOM开销。

   • 避免不必要的计算和变量创建：在render方法中，尽量减少每次渲染时创建新对象或执行耗时计算的操作。

5. 事件处理

   • 避免在render方法中直接创建匿名函数：事件处理函数应作为实例方法或使用箭头函数绑定到实例上，防止每次渲染都产生新的函数实例。

6. React Fiber架构利用

   • React 16 引入的Fiber架构允许任务中断和恢复，可以更好地进行优先级调度，尤其对于高优先级的交互和动画有更好的支持。

7. 优化上下文（Context）使用

   • 对于大型应用，谨慎使用Context，因为它可能导致大量组件重新渲染。可使用useContextSelector（如果有的话）来挑选需要的Context值，避免不必要的重渲染。