什么是 React Hook？

React hooks 只不过是 JavaScript 函数，它可以让你从函数组件中挂钩 React 状态和生命周期特性。

（注意：Hook 只能在函数组件内部使用。）

挂钩允许您添加状态以向功能组件添加状态并在组件之间共享逻辑。

使用 React 钩子的好处。

使用 React Hooks 有三个关键优势：可重用性、可读性和可测试性。

Hooks 使 React 生命周期更容易

在类组件中使用生命周期时，componentDidMount()、componentDidUpdate()、componentWillUnmount() 方法是单独处理的，但是在使用 React 钩子时，您可以通过 useEffect 钩子完成所有操作。

钩子规则。

• 我们只能在函数组件中使用 React Hook。
• 只在顶层调用钩子。您不能在循环、条件或嵌套函数内调用钩子，它们应始终在函数组件的顶部调用。
• 您不能从常规 JavaScript 函数调用钩子。

内置和自定义挂钩。

React 很少有像 useEffect、useState 这样的内置钩子。您还可以在 React 中创建自己的自定义钩子。

一些常见的内置钩子

• 使用状态

useState hook 允许您在功能组件中添加状态变量。在 useState 中，您将初始状态传递给函数，它返回一个带有值的变量和一个用于更新值的函数。

让我们看看下面的例子

import { useState } from 'react';

function Example() {
    // Declare a new state variable, which we'll call "count"
    const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

上面的例子增加了处理函数参数本身的计数器。
这里，计数器的初始值为 0，然后使用 setCount 函数更新计数器的值。

• 使用效果

要了解 useEffect 钩子，您首先需要了解组件的生命周期。组件的生命周期包含三个主要部分，即安装、更新和卸载。

挂载：页面加载时
更新：状态更新时
卸载：用户离开页面时

例子：

import { useState, useEffect } from "react";
import ReactDOM from "react-dom";

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  }, []);

  return <h1>I've rendered {count} times!</h1>;
}

在此处阅读更多信息：useEffect 钩子

额外的内置钩子

• 使用上下文
• 使用减速机
• 使用回调
• 使用备忘录
• 使用引用
• 使用命令句柄
• 使用布局效果
• 使用调试值

结论

感谢您的阅读，如果您喜欢这篇文章，请点赞并评论您的想法。