ReactJS - Hooks 简介
在 React 16.8 之前，函数组件只是无状态组件。要向组件添加状态，我们需要将函数组件转换为基于类的组件。此外，函数组件没有操纵组件生命周期事件的选项。为了在函数组件中启用状态和生命周期事件，React 引入了一个名为 Hooks 的新概念。
Hooks 是普通的 JavaScript 函数，可以访问使用/应用它的组件的状态和生命周期事件。一般来说， Hooks 以 use 关键字开头。React 带有一些内置 Hooks ，也允许创建自定义 Hooks 。
内置 Hooks
让我们知道 React 中可用的 Hooks 列表及其基本用法。
useState −用于操作组件的状态。
useReducer − useState 的高级版本，带有 Reducer 概念。
useEffect − 用于挂接到组件的生命周期。
useLayoutEffect − 与 useEffect 类似，但在所有 DOM 变异之后或 DOM 即将在屏幕上绘制之前同步触发。
useContext − 提供对组件内部上下文提供程序的访问。
useMemo − 用于返回变量/函数的记忆版本，该版本仅根据提供的预定义依赖项集进行更改。这将减少昂贵计算的重新计算次数并提高应用程序的性能。
useCallback − 返回回调函数的记忆版本，该版本仅根据提供的预定义依赖项集进行更改。
useRef − 基于 React ref 对象提供对原始 DOM 节点的访问。
useImperativeHandle − 用于将子组件中基于 ref 的值公开给父组件。
useDeferredValue − 用于推迟类似于防抖或节流的值以推迟更新。
useDebug −用于在 React DevTools 中显示自定义 Hooks 的标签。
useTransition − 用于标识转换的待处理状态。
useId −用于为应用程序中的元素创建唯一 ID。
应用 Hooks
让我们通过创建应用程序来学习如何在函数组件中使用 Hooks 。
使用 create-react-app 创建 React 应用程序并使用以下命令启动该应用程序
create-react-app myapp cd myapp npm start
接下来，让我们创建一个新的函数组件 HelloWorld (src/components/HelloWorld.js)，它呈现一个输入元素并根据用户输入到输入元素中的数据呈现问候消息。
import { useState } from 'react';
export default function HelloWorld() {
const [name, setName] = useState("World")
return (
<div style={{ textAlign: "center", padding: "5px" }}>
<input id="name" name="name"
value={name}
onChange={(e) => setName(e.target.value)} />
<div>Hello {name}</div>
</div>
)
}
此处，
useState 是一个 Hooks ，它接收一个初始值并返回一个状态和一个用于更新状态的函数。它接收 World 作为初始值并返回一个包含两个项目的数组，a) 状态的初始值 (name) 和 b) 用于更新状态的函数 (setName)。使用的语法是数组破坏语法，用于获取数组值并将其设置为 name 和 setName 变量。
input 是一个带有 onChange 事件的反应输入元素。 onchange 事件通过 event.target.value 获取用户的更新值，并使用 setName 函数将其设置为当前状态。
每当用户更新输入时，onchange 事件就会触发并更新状态，进而触发组件的渲染函数。
接下来，让我们在我们的应用程序 (App.js) 中应用我们的组件，如下所示 −
import './App.css';
import HelloWorld from './components/HelloWorld';
function App() {
return (
<HelloWorld />
);
}
export default App;
最后，打开浏览器并通过更改输入值来检查结果。只要输入发生变化，消息就会更新，如下所示 −
Hooks 的优势
与 Hooks 一起使用时，函数组件比基于类的组件具有许多优势。它们如下 −
Hooks 易于理解，并且可以快速开始编码。
在大型应用程序中，应用程序的复杂性可以保持在最低水平。在基于类的组件中，复杂性(状态管理和处理生命周期事件)会随着项目的增长而增长。
this 对于 JavaScript 编程初学者来说很难理解类(组件)中的 this。由于函数组件和 Hooks 不依赖于此，开发人员可以快速开始使用 React 进行编码，而无需陡峭的学习曲线。
状态逻辑可以在组件之间轻松重用。
函数组件可以与基于类的组件一起使用，这使得它很容易在任何规模的现有项目中采用。
与基于类的组件相比，函数组件只需几行代码即可编写。
Hooks 的缺点
Hooks 是创建组件的替代方法，它也有自己的缺点。它们如下 −
Hooks 应该只在顶层调用，并且应该避免在条件、循环或嵌套函数中使用。
Hooks 是专门的功能，它们可能不是最适合某些情况，我们可能必须恢复到基于类的组件。
React 处理 hooks 的内部结构，而不暴露核心进行优化，这使得它不太灵活，不适合某些场景。
摘要
Hooks 是一种相对较新的创建组件的方式。大量项目仍在使用基于类的组件。将这些项目中的组件从基于类转换为基于函数在实践中是不可能的，我们必须接受它。相反，我们可以分阶段转换应用程序。
