44 个 React 前端面试问题
发布网友
发布时间：2024-10-04 12:46
共1个回答
热心网友
时间：2024-11-13 14:44
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。通过使用虚拟 DOM，React 提供了一种创建动态和交互式用户界面的方法，同时确保最佳效率和渲染速度。
要渲染元素数组，可以使用该map()方法迭代该数组并返回一个新的 React 元素数组。
受控组件和非受控组件之间的区别在于它们如何管理和更新其状态。受控组件是状态由 React 控制的组件。组件接收其当前值并通过 props 更新它。当值改变时它也会触发回调函数。这意味着该组件不存储其自己的内部状态。相反，父组件管理该值并将其传递给受控组件。另一方面，不受控制的组件使用 refs 或其他方法在内部管理自己的状态。它们独立存储和更新状态，不依赖 props 或回调。父组件对不受控组件的状态控制较少。
基于类的组件和函数式组件之间的主要区别在于它们的定义方式和使用的语法。基于类的组件被定义为 ES6 类并扩展该类React.Component。他们使用该render方法返回定义组件输出的 JSX (JavaScript XML)。this.state类组件可以通过和访问组件生命周期方法和状态管理this.setState()。函数组件被定义为简单的 JavaScript 函数。他们接受 props 作为参数并直接返回 JSX。功能组件无权访问生命周期方法或状态。然而，随着 React 16.8 中 React Hooks 的引入，功能组件现在可以管理状态并使用其他功能，例如上下文和效果。
生命周期方法是一种挂钩组件生命周期不同阶段的方法，允许您在特定时间执行特定代码。以下是主要生命周期方法的列表：一些生命周期方法，如componentWillMount、componentWillReceiveProps和componentWillUpdate，已被弃用或替换为替代方法或挂钩。
useState返回一个状态值和一个更新它的函数。在初始渲染期间，返回的状态与作为第一个参数传递的值匹配。该setState函数用于更新状态。它采用新的状态值作为参数，并对组件的重新渲染进行排队。该setState函数还可以接受回调函数作为参数，该函数将之前的状态值作为参数。
useEffect 钩子允许在功能组件中执行副作用。在功能组件的主体（即 React 渲染阶段）中不允许使用突变、订阅、定时器、日志记录和其他副作用。这可能会导致混乱的错误和用户界面的不一致。因此，建议使用 useEffect。传递给 useEffect 的函数将在呈现提交到屏幕后执行，或者如果您将依赖关系数组作为第二个参数传递，那么每当其中一个依赖关系发生变化时，该函数就会被调用。
通常，useEffect 创建的资源需要在组件离开屏幕前进行清理或重置，例如订阅或计时器标识符。为此，传递给 useEffect 的函数可以返回一个清理函数。清理函数将在组件从用户界面移除之前运行，以防止内存泄漏。此外，如果组件渲染多次（通常是这种情况），则会在执行下一个效果之前清理前一个效果。
Props 是从父组件传递给组件的数据。props 是只读的，无法更改。
状态管理器是一种帮助管理应用程序状态的工具或库。它为存储和管理数据提供了一个集中的存储空间或容器，应用程序中的不同组件都可以访问和更新这些数据。状态管理器可以解决几个问题。首先，将数据和与之相关的逻辑从组件中分离出来是一种很好的做法。其次，当使用本地状态并在组件之间传递时，由于组件有可能深嵌套，代码可能会变得错综复杂。通过全局存储，我们可以从任何组件访问和修改数据。除了 React Context，Rex 或 MobX 也常用作状态管理库。
如果本地状态仅在一个组件中使用并且不打算将其传递给其他组件，则建议使用本地状态。本地状态也用在表示列表中单个项目的组件中。但是，如果组件分解涉及嵌套组件且数据沿层次结构传递，则最好使用全局状态。
recer是一个纯函数，以 state 和 action 为参数。在recer中，我们会跟踪接收到的操作类型，并根据它修改状态，返回一个新的状态对象。
Action 是一个简单的 JavaScript 对象，其字段必须具有类型的字段。可以选择添加一些数据作为payload。为了要改变状态，就必须调用调度函数，并向其传递动作。
Rex 实现了Flux 模式，它是应用程序的可预测状态管理模式。它通过引入单向数据流和应用程序状态的集中存储来帮助管理应用程序的状态。
Mobx 实现了观察者模式，也称为发布-订阅模式。
Mobx 提供了类似observable和的装饰器computed来定义可观察的状态和反应函数。用action修饰的动作用于修改状态，确保跟踪所有更改。Mobx 还提供自动依赖跟踪、不同类型的反应、对反应性的细粒度控制，以及通过 mobx-react 包与 React 无缝集成。总体而言，Mobx 通过根据可观察状态的变化自动执行更新过程来简化状态管理。
可以通过使用装饰器observable 将变量定义为可观察来访问状态中的变量。这是一个例子：在本例中，myVariable 使用 observable 装饰器定义为可观测变量。然后就可以使用 store.myVariable 访问该变量。对 myVariable 所做的任何更改都会自动触发依赖组件或反应的更新。
Rex 和 Mobx 的区别在于它们的实现方式和重点。Rex 强调单一数据源和可预测的更新流，而 Mobx 侧重于观察和反应，以及自动化状态更新。
默认情况下，在 react 中使用以下语法创建元素。但我们通常这样去写：这正是被称为 jsx 的标记。这是一种语言扩展，简化了代码和开发的感知。
Props 透传是指通过多层嵌套组件传递 props 的过程，即使某些中间组件不直接使用这些 props。这可能会导致代码结构复杂且繁琐。
可以使用任何条件运算符，包括三元运算符来有条件地渲染元素。
useMemo 的用途是缓存和记忆计算结果。计算结果。useMemo 仅在任何依赖项的值发生变化时才会重新计算记忆值。这种优化有助于避免昂贵的计算。
useCallback 的用途是将回调的记忆化版本返回，只有当其中一个依赖项的值发生变化时，回调才会发生变化。这在将回调传递给依赖链接平等性的优化子组件时非常有用，可以防止不必要的呈现。
useMemo 和 useCallback 的区别在于他们的使用场景。useMemo 主要用于缓存昂贵的计算结果，而 useCallback 则用于记忆化回调函数。
React Context 是一项功能，它提供了一种在组件树中传递数据的方法，而无需在每一层手动传递道具。它允许您创建一个全局状态，树中的任何组件都可以访问该状态，无论其位置如何。
在典型的 React 应用程序中，数据是使用道具从上到下（从父组件到子组件）传递的。但是，这种使用方法对于某些类型的道具（例如所选语言、用户界面主题）来说可能过于繁琐，因为这些道具必须传递给应用程序中的许多组件。上下文提供了一种在组件间共享此类数据的方法，而无需明确地将道具传递到树的每一层。
useRef 返回一个可修改的 ref 对象，即一个属性。该对象的当前值由传递的参数初始化。返回的对象将在组件的整个生命周期内持续存在，不会因呈现而改变。通常的使用情况是以命令式方式访问后代对象。
React.memo() 是一个高阶组件。如果组件总是以不变的道具渲染相同的内容，可以在某些情况下将其封装在 React.memo() 调用中以提高性能，从而记住渲染结果。这意味着 React 将使用上次渲染的结果，避免重新渲染。
从组件返回多个元素是 React 中的常见做法。片段允许形成子元素列表，而无需在 DOM 中创建不必要的节点。
调和是 React 的一种算法，用于区分一棵元素树和另一棵元素树，以确定需要替换的部分。调和是我们过去所说的虚拟 DOM 背后的算法。其定义听起来是这样的：当您渲染 React 应用程序时，描述应用程序的元素树会在预留内存中生成。然后，这棵树就会被包含在呈现环境中，例如，在浏览器应用程序中，它会被转化为一组 DOM 操作。应用状态更新时，会生成新的元素树。新的树会与之前的树进行比较，以便准确计算和启用重新绘制更新后的应用程序所需的操作。
这些键可帮助 React 确定哪些元素已被更改、添加或移除。必须指定这些键，这样 React 才能匹配数组元素。选择键的最佳方法是使用数据中的 ID 作为键。
要使用 Rex Thunk，需要将其作为中间件导入。Action 创建者不应只返回一个对象，而应返回一个将 dispatch 作为参数的函数。
需要使用useEffect 钩子，并将对象的字段作为依赖数组传递，以跟踪功能组件中对象字段的变化。
引用是使用 React.createRef() 或 useRef() 钩子创建的，并通过 ref 属性附加到 React 元素上。通过访问创建的引用，我们可以使用 ref.current 访问 DOM 元素。
自定义钩子是一种允许您在不同组件之间重复使用逻辑的功能。它是一种封装可重用逻辑的方法，以便在多个组件之间轻松共享和重用。自定义钩子是通常以 *use * 开头的函数，可在需要时调用其他钩子。
在索引文件中，公共 API 通常是指暴露给外部模块或组件并可供其访问的接口或函数。下面是一个表示公共 API 的索引文件的代码示例：在此示例中，index.js 文件充当公共 API，其中导出函数greet()和，并且可以通过导入函数从其他模块访问它们。calculateSum()其他模块可以导入并使用这些函数作为其实现的一部分。
创建自定义钩子的规则包括遵循命名约定、保持简单、使用默认参数、处理状态和副作用、以及正确处理返回值。
服务器端渲染（SSR）是一种用于在服务器上渲染网页并将完全渲染后的网页发送到客户端显示的技术。它允许服务器生成网页的完整 HTML 标记，包括动态内容，并作为对请求的响应发送给客户端。
虽然 SSR 具有这些优点，但必须注意的是，与客户端渲染方法相比，它可能会带来更多的服务器负载和维护复杂性。应仔细考虑缓存、可扩展性和服务器端呈现性能优化等因素。
Next.js 的主要功能包括自动服务器端渲染、预渲染、自动代码分割、热模块替换、组件预加载、动态路由、国际化支持、静态文件优化、以及与 TypeScript 的集成。
Linters 是用于检查源代码是否存在潜在错误、错误、风格不一致和可维护性问题的工具。它们帮助执行编码标准并确保整个代码库的代码质量和一致性。
有多种用于构建 React 项目的架构解决方案和模式，包括单页应用（SPA）、微前端架构、组件化架构、以及 React 应用程序框架等。
功能切片设计是一种用于组织和构建 React 应用程序的现代架构方法。它旨在通过根据功能或模块划分应用程序代码库来解决可扩展性、可维护性和可重用性的挑战。在功能切片设计中，应用程序的每个功能或模块都组织到一个单独的目录中，其中包含所有必要的组件、操作、recers 和其他相关文件。这有助于保持代码库的模块化和隔离性，使其更易于开发、测试和维护。
面试 React 前端开发员职位需要对该框架的核心概念、原理和相关技术有扎实的了解。通过准备本文讨论的问题，可以展示自己的 React 知识，并证明自己有能力创建高效、可维护的用户界面。切记不要只注重记住答案，还要理解基本概念并能清楚地解释它们。
此外，请记住面试不仅涉及技术方面，还要展示您解决问题的能力、沟通能力以及团队合作能力。通过将专业技术与强大的综合技能相结合，在 React 前端开发员面试中脱颖而出，并在这个令人兴奋且快速发展的领域找到理想的工作。
