摘自前端 Q - 40 道 ReactJS 面试问题及答案
[toc]
ReactJS 是什么以及它是如何工作的？
- ReactJS 是一个功能强大的 JavaScript 库，用于使用构建块创建交互式用户界面
- ReactJS 的运行原理是声明式和基于组件的方法。这些组件是小型的独立单元，可以组合在一起构建复杂的用户界面。
- 当 React 应用程序运行时，它会在内存中创建用户界面的虚拟表示，称为虚拟 DOM（Virtual DOM 是一个轻量级 JavaScript 对象，包含实际 DOM 元素的所有属性和属性。这是一个在内存中保留 UI 的理想表示并将其与实际 DOM 同步的编程概念）
- 当 React 组件的 state 或 props 发生变化时，React 会创建一个新的 VDOM 树
- VDOM 与 React 的协调算法相结合，计算新的和以前的 VDOM 表示之间的差异
- 然后，它仅更新实际 DOM 中已更改的部分，从而最大限度地减少整页刷新的需要并提高性能
Shadow DOM 和 Virtual DOM 有什么区别？
- 虚拟 DOM：它是库在内存中保存的实际 DOM（文档对象模型）的轻量级副本。当对虚拟 DOM 进行更改时，库会计算更新实际 DOM 的最有效方法，并且仅进行这些特定更改，而不是重新渲染整个 DOM。
- Shadow DOM：Shadow DOM 专注于封装 Web 组件的样式和结构。它是一种浏览器技术，主要用于在 Web 组件中确定变量和 CSS 的范围
State 和 Props 是什么？
- State：状态用于管理组件的内部数据及其随时间的变化。状态是可变的，可以使用 setState 方法进行更新。状态更改可以是异步的。状态的更改会触发组件的重新呈现，从而允许用户界面反映更新后的状态
- Props（属性的缩写）：是一种将数据从父组件传递到子组件的机制。它们是只读的（不可变的），有助于使组件可重用和可定制。
什么是纯组件和 React.memo()？
- 纯组件：是 React 中的一种组件，它通过浅层 prop 和状态比较自动实现 shouldComponentUpdate() 方法
- React.memo()： 是一个高阶组件，与功能组件一起使用以防止不必要的重新渲染。它的工作原理是记住组件渲染的结果，并且只有在 props 发生变化时才重新渲染
React 中什么是合成事件？
合成事件是浏览器本机事件系统的跨浏览器包装器。它们旨在确保不同浏览器和设备之间的行为和性能一致。
组件生命周期有哪些不同阶段？
在 React 中，组件生命周期由三个主要阶段组成：安装、更新和卸载。每个阶段都包含特定的生命周期方法，允许您在组件生命周期的不同点执行操作。
-
安装
- 构造函数：这是创建组件时调用的第一个方法。它用于初始化状态和绑定事件处理程序
- getDerivedStateFromProp：当接收到新的 props 或 state 时，在渲染之前调用此方法。它允许组件根据 props 的变化更新其内部状态
- render：此方法负责根据当前状态和属性渲染组件的 UI。
- componentDidMount：该方法在组件第一次渲染后调用。它用于执行需要完全安装组件的任何操作，例如数据获取或设置订阅
-
更新中
- getDerivedStateFromProps：当接收到新的 props 或 state 时，在渲染之前调用此方法。它允许组件根据 props 的变化更新其内部状态
- shouldComponentUpdate：该方法在组件重新渲染之前调用。它允许您控制组件是否应根据状态或道具的变化进行更新
- render：再次调用 render 方法来根据状态或 props 的变化来更新组件的 UI
- getSnapshotBeforeUpdate（被废弃）：在将最近呈现的输出提交到 DOM 之前调用此方法。它使您的组件能够在 DOM 可能发生更改之前从 DOM 捕获一些信息
- componentDidUpdate：该方法在组件因 state 或 props 变化而重新渲染后被调用。它用于在更新后执行操作，例如更新 DOM 以响应状态更改
-
卸载
- componentWillUnmount：在组件从 DOM 中删除之前调用此方法。它用于执行任何清理，例如取消网络请求或清理订阅
- 错误处理
- static getDerivedStateFromError(error)：当后代组件抛出错误时，在“渲染”阶段调用此方法。它允许组件更新其状态以响应错误
- componentDidCatch(error, info)：当后代组件抛出错误时，在“提交”阶段调用此方法。它用于捕获组件树中发生的错误并执行副作用，例如记录错误
refs 有什么用，React.createRef 和 useRef hook 是什么？
在 React 中，“ref”是一个对象，它提供了一种引用或访问特定 DOM 节点或 React 元素的方法。Refs 通常用于与 DOM 命令式交互，例如聚焦输入、获取其尺寸或访问其方法
- 引用是使用类组件中的 React.createRef() 方法或功能组件中的 useRef() 挂钩创建的。
- 创建后，可以使用 ref 属性将 ref 附加到 React 元素。这允许您使用 ref 对象的当前属性访问底层 DOM 节点或 React 元素
什么是前裁判？
转发引用是一种允许父组件将引用传递给其子组件的技术。当您需要从父组件访问子组件的 DOM 节点或 React 实例时，这会很有用。转发引用通常用于高阶组件 (HOC) 和其他包装组件。
什么是反应纤维（React Fiber）？
React Fiber 是 React 16 中引入的一种新的协调算法。它旨在使 React 应用程序更快、更流畅，特别是对于具有大量更新的复杂应用程序