您需要了解的有关 React Hooks 的所有信息。

什么是 React Hooks？

React hooks 不过是 JavaScript 函数，可让您从函数组件中挂钩到 React 状态和生命周期功能。

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

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

使用 React hooks 的好处。

使用 React Hooks 有三个主要优点：可重用性、可读性和可测试性。

Hooks 使 React 生命周期更加简单

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

钩子的规则。

• 我们只能在函数组件内部使用 React Hooks。

• 仅在顶层调用钩子。您不能在循环、条件或嵌套函数中调用钩子，它们应始终在函数组件的顶层调用。

• 您不能从常规 JavaScript 函数调用钩子。

内置和自定义挂钩。

React 有一些内置的 hooks，例如 useEffect 和 useState。你也可以在 React 中创建自己的自定义 hooks。

一些常见的内置钩子

• useState

useState 钩子允许你在函数组件中添加状态变量。在 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

要理解 useEffect hook，首先需要了解组件的生命周期。组件的生命周期包含三个主要部分，即挂载、更新和卸载。

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

例子：

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 hooks

附加内置 Hooks

• 使用上下文
• useReducer
• 使用回调
• 使用备忘录
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue

结论

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

如果你喜欢这篇文章，那么你可以给我买我的第一杯咖啡，谢谢

在 Twitter 上关注我。

编码愉快！