React面试题-CSDN博客

本文链接：https://blog.csdn.net/m0_72303036/article/details/133362068

函数组件和类组件

一.React组件之间如何通讯？

通过 props 传递：最常见和简单的方法是将数据或回调函数作为 props 传递给子组件。父组件可以通过修改传递给子组件的 props 来更新子组件的状态。
Context API：Context API 允许您在组件树中共享数据，而无需显式地将它们传递给每个组件。这对于在应用程序的多个部分中共享全局数据或主题样式等信息非常有用。
事件总线：事件总线允许组件之间通过发布/订阅模式进行通信。可以使用第三方库如 EventEmitter3 管理事件总线。
Redux：Redux 是一个专门用于管理复杂应用程序中状态的 JavaScript 库。由于 Redux 可以将状态提升到整个应用程序级别，因此它可以作为跨组件通信的一种解决方案。
自定义 hook：自定义 hook 在 React 中是共享状态和逻辑的常用方式，可以帮助组件之间共享业务逻辑和操作内部状态等信息。
引用 Ref：引用 Ref 允许组件之间直接访问其他组件的 DOM 节点或其实例，这在需要进行一些 low-level 操作时非常有用

二.JSX本质是什么？

JSX（JavaScript XML）是一种在 React 中使用的语法扩展，它被设计用于描述 React 组件的结构和外观。虽然 JSX 看起来像是将 HTML 和 JavaScript 结合在一起，但实际上，JSX 本质上是 JavaScript 对象。

当编写使用 JSX 的组件时，JSX 会被转译为 React.createElement() 函数的调用。这个函数返回一个描述组件结构的 JavaScript 对象，即虚拟 DOM（Virtual DOM）节点。

三.Context是什么，如何应用?

在 React 中，Context 是一种用于在组件树中共享数据的机制。它可以让您将数据传递给组件树中的深层组件，而不需要手动通过 props 一层一层地传递。Context 在类似全局状态、主题样式等需要在多个组件之间共享的情况下非常有用。

四.说一下shouldConponentUpdate的用途？

shouldComponentUpdate 是 React 组件生命周期中的一个函数，用于控制组件是否需要重新渲染。它在组件接收新的 props 或 state 之后、在渲染之前被调用。

shouldComponentUpdate 的用途是优化 React 应用程序的性能。默认情况下，每当组件的 props 或 state 发生变化时，React 会重新渲染该组件及其子组件。但有时候，并不是所有的 props 或 state 变化都会导致组件需要重新渲染。通过在 shouldComponentUpdate 中进行比较和判断，可以避免不必要的渲染，提高应用程序性能。

在 shouldComponentUpdate 函数中，您可以根据组件的当前 props 和 state（通过 this.props 和 this.state 访问），以及即将更新的 props 和 state（通过参数传递）的值进行比较。根据比较结果，返回一个布尔值，指示是否要重新渲染组件。

五.说一下redux单项数据流的机制？

Redux 是一种用于管理状态的 JavaScript 库，其核心思想是单向数据流。Redux 的单项数据流机制确保了状态的可预测性和一致性，使得状态的变化易于追踪和调试。

六.React类组件的setState是同步操作还是异步操作？

在 React 类组件中，setState 方法的行为是异步的，而不是同步的。

当调用 setState 方法时，React 会将传入的状态更新合并到组件的待处理队列中，并在合适的时机批量执行更新。这个过程是异步的，即 setState 方法立即返回，并且不会阻塞后续代码的执行。

由于 setState 是异步的，连续多次调用 setState 方法并不能保证立即更新组件的状态。React 会对连续的多次 setState 调用进行合并，并在进行下一轮渲染时执行合并后的状态更新。这种批量更新机制有助于提高性能，避免不必要的重复渲染。

七.什么是纯函数？

纯函数是指在函数执行过程中，不会对除了函数参数之外的任何外部状态产生影响，并且对于相同的输入，总是返回相同的输出。

具体来说，一个函数被称为纯函数需要满足以下两个条件：