react 相关面试题

概念

react 为啥需要写成组件？直接写成一个文件不好吗，比如几千上万行代码？

可维护性： 组件使代码更具可维护性。通过将应用程序划分为多个小块，每个组件专注于特定的任务，使得代码更易于理解和修改。当需要进行调整或修复时，您可以更快地定位到特定的组件，并进行必要的更改，而无需影响其他部分。

可重用性： 组件可以被多次使用，从而提高了代码的可重用性。您可以在应用程序的不同部分使用相同的组件，减少了编写重复代码的工作量。这样，您可以通过修改单个组件来实现全局的更改，而无需逐个修改每个实例。

分离关注点： 组件将应用程序的不同方面分离开来。您可以创建专门处理界面呈现的组件，以及专门处理数据逻辑的组件。这种分离可以提高代码的可读性和可理解性，并且使得不同团队成员可以同时工作而不会相互干扰。

性能优化： React组件具有自己的生命周期方法，这使得您可以对组件的行为进行精细控制。通过使用shouldComponentUpdate()方法，您可以决定是否重新渲染组件，从而避免不必要的渲染操作，提高应用程序的性能。

单一职责原则： 组件的设计鼓励遵循单一职责原则。每个组件只关注特定的功能或呈现，这使得代码更加模块化和可测试。

尽管React组件通常是写在单独的文件中，但这不是React的强制要求。您可以选择将组件定义在同一个文件中，特别是对于较小或简单的组件。但是，随着应用程序的增长和复杂性的提高，将组件分割为独立的文件将会更加有益，以便更好地组织和管理代码。

什么是受控组件？什么是非受控组件？input 标签是受控组件还是非受控组件？

受控组件（Controlled Components）：
受控组件是指由React组件控制其表单输入元素的值和状态的组件。这意味着组件的值由组件的状态（state）来管理，并通过onChange事件处理函数进行更新。每当用户输入发生变化时，状态会更新，从而保持组件和表单输入元素的同步。

非受控组件（Uncontrolled Components）：
非受控组件是指表单输入元素自己管理其值和状态的组件，而不受React组件的控制。在非受控组件中，我们通常使用ref引用来获取输入元素的值。

input标签可以同时作为受控组件和非受控组件使用，具体取决于是否将其值绑定到React组件的状态。

React Hook

问题1：什么是 React Hooks？请简要介绍一下它的作用和优势。

回答：
React Hooks 是 React 16.8 版本引入的特性，用于在函数组件中添加状态管理和其他 React 特性。它的作用是使函数组件能够具备类组件的功能，如管理组件状态、处理副作用等。React Hooks 的优势包括简化了组件代码、提高了可复用性、简化了状态管理和副作用处理等。通过使用 React Hooks，我们可以更轻松地编写和组织组件，减少样板代码的数量，并提高代码的可读性和可维护性。

问题2：React Hooks 使用条件和限制？为什么 Hooks 只能在函数组件中使用？
回答：
React Hooks 的使用条件和限制主要包括以下几点：

只能在 React 函数组件中使用：React Hooks 是为了解决类组件的一些缺点而引入的新特性，因此只能在函数组件中使用。Hooks 的设计目标是使函数组件具备类组件的功能，同时避免类组件的复杂性。这种限制可以帮助开发者使用更简洁、易于理解和组织的代码编写 React 组件。

Hooks 调用必须在函数组件的顶层位置进行：Hooks 的调用必须在函数组件的顶层位置进行，不能在循环、条件语句或嵌套函数中调用。这是为了保持 Hooks 的调用顺序一致，以确保状态管理和副作用的正确执行。如果 Hooks 的调用顺序发生变化，会导致状态管理和副作用执行出现错误。

使用 Hooks 需要遵循 Hooks 规则：在使用 Hooks 时，需要遵循一些规则，例如：

只能在 React 函数组件或自定义 Hook 中调用 Hooks，不允许在普通 JavaScript 函数中调用 Hooks。
Hooks 的调用顺序必须保持一致，不得跳过、条件性地调用或在循环中调用 Hooks。

为什么 Hooks 只能在函数组件中使用呢？这是因为函数组件相较于类组件更轻量、更易于理解和测试。Hooks 的设计目标是为了让函数组件具备类组件的功能，同时避免类组件的繁琐和复杂性。通过使用 Hooks，开发者可以在函数组件中管理状态、处理副作用等。此外，函数组件还有更好的性能优势，因为函数组件不需要创建和维护类实例。因此，为了提供更好的开发体验和性能优势，Hooks 被限制在函数组件中使用。

附加问题1：在没有 Hooks 之前是如何抽象逻辑和功能的？为什么有时候使用 useEffect hooks中的函数拿不到 React 的最新的状态值，如何解决

在没有 Hooks 之前，React 主要依赖于类组件和高阶组件（Higher-Order Components，HOC）来抽象功能。通过创建继承自 React.Component 的类组件，开发者可以在生命周期方法中处理组件的状态和副作用。类组件使用 this.state 和 this.setState 来管理状态，并在 componentDidMount、componentDidUpdate 等生命周期方法中处理副作用。类组件的继承和生命周期方法使得抽象功能变得可行，但也增加了代码的复杂性和维护的难度

异步更新：React 中的状态更新是异步的。当状态发生变化时，React 会将状态更新放入队列中，然后在稍后的时间点进行合并和批量更新。这意味着在 useEffect 中的函数执行时，可能无法立即获取到最新的状态值，而是得到上一个状态的值。

依赖项的问题：useEffect 中的函数可能依赖于某个状态，但是在函数执行时，该状态的值可能已经发生了变化，导致函数中使用的状态值不是最新的。这种情况通常发生在依赖项数组中没有正确指定状态的情况下。

为了解决这个问题，可以采取以下措施：

在 useEffect 的依赖项数组中正确指定所依赖的状态：如果 useEffect 的函数内部依赖于某个状态的值，应该将该状态添加到依赖项数组中。这样，在状态发生变化时，函数会重新执行，并且可以获取到最新的状态值。

使用函数式更新形式的状态更新：如果状态更新的值依赖于先前的状态值，可以使用函数式更新的形式来更新状态。这样可以确保状态更新是基于最新的状态值进行的。

还可以使用 ref。ref 是 React 提供的用于引用 DOM 元素或组件实例的机制。通过使用 ref，可以在组件内部获取到最新的状态值。

在某些情况下，由于异步性质，直接访问状态可能无法获取到最新的值。在这种情况下，可以使用 useRef Hook 创建一个引用，并将其关联到组件中的元素或值。然后，可以使用引用来访问最新的状态值。

使用 ref 可以绕过状态更新的异步性质，确保获取到最新的状态值。但需要注意，过度依赖 ref 可能会破坏组件的数据流动和组织结构，因此应该谨慎使用。

原理