React Hooks 详解及使用方法-JavaScript中文网-JavaScript教程资源分享门户

React Hooks 详解及使用方法

React Hooks 是 React 16.8 新增的特性。它让我们可以在函数组件中使用 state 和其他 React 特性，而无需编写类。

本文将为您详细介绍 React Hooks，并展示如何在应用程序中使用它们。

应用

React Hooks 主要用于管理组件状态，包括组件状态、事件处理程序等。我们在以下应用场景中可以考虑使用 React Hooks：

组件状态：Hooks 可以替代 React 类组件中的 setState 方法，用于更新组件状态。
生命周期管理：Hooks 提供了代替 componentDidMount、componentDidUpdate 等生命周期方法的方法，如 useEffect 。
操作 DOM：在函数组件中更新 DOM 很棘手。使用 Hooks，可以使用 useRef 来操作 DOM 相关操作。

useState Hook

useState Hook 用于将 state 添加到函数组件中。使用此 Hook，您可以在函数组件中保持本地状态。

下面是一个简单的示例，我们将演示使用 useState Hook 来管理组件状态。

------ ------ - -------- - ---- --------

-------- --------- -
  ----- ------- --------- - ------------

  ------ -
    -----
      ------ ------- ------- ----------
      ------- ----------- -- -------------- - --------- -----------
    ------
  --
-

在上面的代码中，useState 的参数是状态的初始值。它返回一个数组，其中包含变量 count 和一个函数 setState，可以更新 count 的值。

我们将 count 的初始值设置为 0，并在用户单击按钮时更新它。setCount 函数将 count 的值增加 1。

useEffect Hook

作为替代 componentDidMount 和 componentDidUpdate 的函数，useEffect Hook 用于处理副作用。例如，我们可能想要在组件挂载时向服务器发送请求，或者在组件更新时订阅某些事件。

------ ------ - --------- --------- - ---- --------

-------- ------------- -
  ----- ------ -------- - ---------------
  ------------ -- -
    ----- -------- ----------- -
      ----- -------- - ----- -----------
      ----- ---- - ----- ----------------
      --------------
    -
    ------------
  -- -------
  ------ -----
-

-------- ------------- -
  ----- ---- - --------------------------------------

  -- ------- -
    ------ ----------------------
  -

  ------ -
    -----
      --------------------- ---------------------
      ---- ------------------------- --------------------- --
      -------------------
      ------------------------ -------------------------
    ------
  --
-

在上面的代码中，我们创建了一个名为 useFetch 的自定义 Hook 函数，该函数通过 URL 使用 Fetch API 从服务器提取 JSON 数据。然后我们在 DisplayUser 组件中使用 useFetch Hook，以获取一个随机用户。

useEffect Hook 接受一个函数，这个函数可以在组件挂载和更新时进行调用。 useEffect 还可以接受数组作为第二个参数，以指定在何时运行该 Hook 函数。在上面的示例中，我们将 URL 作为参数传递给 useFetch Hook，并将该 URL 添加到 useEffect 执行的依赖数组中。因此，当 URL 改变时，该 Hook 就会运行。

useContext Hook

useContext Hook 用于在 React 组件之间共享数据。要使用 useContext，您需要首先创建一个 context，并在给定范围内将该 context 提供给提供程序。

当某些组件需要使用该数据时，它们可以使用 useContext Hook 来访问上下文。

------ ------ - ---------- - ---- --------
----- --------- - ----------------------

-------- ----- -
  ----- -------- - ------ ----- --- --------
  ------ -
    ------------------- -----------------
      ---------------- --
    ---------------------
  --
-

-------- ----------------- -
  ----- -------- - ----------------------
  ------ -
    -----
      -------------------
    ------
  --
-

在上面的代码中，我们首先创建了一个上下文 MyContext。在应用程序的根组件中，我们将 greeting 变量添加到上下文中。

在 DisplayGreeting 组件中，我们使用 useContext 来访问该上下文。该组件从上下文中提取了 greeting 变量，并将其显示为 h1 元素。这是一个简单的示例，但它演示了如何使用 useContext Hook 传递数据。

useRef Hook

useRef Hook 允许您在 React 中直接操作 DOM 元素。如上所述，使用 Hooks，可以将任何值存储为当前状态。这包括引用 DOM 元素的对象。

------ ------ - ------ - ---- --------
-------- ------------ -
  ----- ------- - -------------
  -------- --------------- -
    ------------------------
  -
  ------ -
    -----
      ------ ------------- ----------- --
      ------- ----------------------------- --------------
    ------
  --
-

在上面的代码中，我们创建了一个名为 inputEl 的 useRef。在我们的 onButtonPress 函数中，我们使用 inputEl.current.focus() 将焦点集中在输入框中。

关于 useRef 的另一个用法是缓存函数对象。如果将事件处理程序传递给子组件，可以使用 useRef 在每次渲染时缓存它。这样做可以避免在每次渲染时重新创建函数对象。

结论

React Hooks 是 React 16 的新变化，并且在 React 组件中增加了一些强大的新功能。无需编写类即可管理状态，使用 Hooks 编写代码可以使您的应用程序更加简单，易于阅读和维护。

本文介绍了最常用的 React Hooks，例如 useState、useEffect 和 useContext。使用本文中的示例代码和指南，您可以立即开始使用当中的任何 Hook。

如果您在使用 React Hooks 时遇到任何问题，请在下面的评论中与我们分享。我们将竭力为您解决。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/66f223baa44b36ee5763f359