面试 React 框架八股文十问十答第三期

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

⭐点赞⭐收藏⭐不迷路！⭐

1）React 事件机制

  • React 事件机制基于合成事件系统，提供了一致的事件处理方式，屏蔽了浏览器之间的差异。
  • 事件通过 React 的事件池传播，使用合成事件对象而非浏览器原生事件对象，以确保一致性和性能。

2）React 的事件和普通的 HTML 事件有什么不同？

  • React 合成事件是跨浏览器的，使得开发者无需担心浏览器兼容性。
  • React 合成事件是在组件层级上处理的，而不是在 DOM 元素上。这样可以更好地管理和追踪事件。

3）React 组件中怎么做事件代理？它的原理是什么？

  • 事件代理是将事件处理委托给父组件或更高层级的元素处理。在 React 中，可以通过将事件处理函数传递给子组件，让子组件的元素上的事件被代理到父组件上。
  • 原理是使用合成事件系统，React 会在顶层进行事件处理，然后通过组件树逐层传递事件，最终触发正确的事件处理函数。

4）React 高阶组件、Render props、hooks 有什么区别，为什么要不断迭代

  • 高阶组件 (HOC): 是一个函数，接受一个组件并返回一个新的组件，通过组件的包裹来复用组件逻辑。
  • Render Props: 是一种在组件之间共享代码的方式，通过 prop 将一个函数传递给组件，该函数返回一个 React 元素。
  • Hooks: 是 React 16.8 引入的，允许在函数组件中使用状态和其他 React 特性，避免了 class 组件的一些问题，使代码更简洁。
  • 不断迭代是为了提供更好的开发体验，降低组件逻辑复用和状态管理的复杂度。

5）对React-Fiber的理解，它解决了什么问题？

  • React Fiber 是 React 16 中引入的一种新的协调引擎，主要解决了渲染任务的优先级和中断的问题。
  • 允许 React 在渲染过程中中断，优先处理高优先级的任务，提高了页面的响应性和性能。
  • 更细粒度的控制渲染任务，避免了阻塞主线程，提高了用户体验。

6）React.Component 和 React.PureComponent 的区别

  • React.Component 是 React 类组件的基类，不实现任何性能优化。
  • React.PureComponent 是 React.Component 的子类，自动实现了 shouldComponentUpdate 方法，用浅比较 props 和 state 来决定是否重新渲染。这在某些情况下可以提高性能，但也可能导致不必要的渲染。PureComponent 适用于简单的 props 和 state 比较场景。

7）Component, Element, Instance 之间有什么区别和联系？

  • Component: React 中的组件，可以是函数组件或类组件，负责返回用于渲染 UI 的 React 元素。
  • Element: React 元素是描述 UI 的普通对象，它是构建 React 应用的最小单位。它不是实际的 DOM 元素，而是虚拟的，最终会被 React 渲染成实际的 DOM 元素。
  • Instance: 当 React 元素被渲染到实际的 DOM 上时，会创建一个组件实例。实例是组件类的具体实现，包含了组件的状态和生命周期方法。

8）React.createClass和extends Component的区别有哪些？

  • React.createClass 是 React 15 及之前的用于创建组件的方法，现在已经不推荐使用。
  • extends Component 是 ES6 的类语法，是 React 推荐的组件创建方式。它更符合现代 JavaScript 的写法，易于理解和维护。

9）React 高阶组件是什么，和普通组件有什么区别，适用什么场景

  • 高阶组件 (HOC) 是一个函数，接受一个组件并返回一个新的组件，用于增强或修改组件的行为。
  • 区别在于 HOC 不是组件，而是一个函数，它通过包裹组件来提供额外的功能。普通组件是直接渲染 UI 的实体。
  • HOC 适用于需要在多个组件之间共享相同逻辑的情况，例如认证、日志记录等。

10）对componentWillReceiveProps 的理解

  • componentWillReceiveProps 是 React 生命周期方法，在组件即将接收新的 props 时触发。
  • 通过比较新旧 props，可以在这个生命周期方法中执行一些操作，例如更新组件内部状态或触发一些副作用。
  • 这个生命周期在 React 17 及以后版本中被标记为过时，因为它在异步渲染中可能导致一些不一致的行为。建议使用 componentDidUpdate 或 getDerivedStateFromProps 替代。