React Hooks 初探及实例详解-JavaScript中文网-JavaScript教程资源分享门户

React 是一种声明式的、高效的 JavaScript 库，广泛应用于构建现代单页面应用程序（SPA）。近年来，React Hooks 成为 React 生态系统中的一大亮点，它是一种新的 API，可以方便地重用有状态逻辑代码。本文将详细讲解 React Hooks 的使用方法，并带领读者实现一些有用的功能。

什么是 React Hooks

React Hooks 是 React v16.8.0 中推出的一项新功能，用于让开发者在函数组件中使用 React 的状态(state)及其他特性。在 React 之前，开发者一般使用 Class 组件来管理相应的状态及生命周期函数，类组件中的局部状态(state)是不可避免的。但类组件难以解决以下问题：

复用状态逻辑（避免 HOC（高阶组件）和 render props 嵌套地狱）
大型组件变得难以维护和理解（MVC、Redux 的大工厂）
类组件中某些生命周期函数的复杂性和执行顺序不可预测

React Hooks 的出现，通过函数组件方式，碾压了类组件，大大简化开发组件的方式，让开发者更专注于业务而非模板代码。

React Hooks的种类

React Hooks 中有两种常用的 Hooks，分别为 useState 和 useEffect。

useState

useState 是一个函数，它的作用是在函数式组件之间存储 state 数据。useState 返回一个数组，其中第一个变量是当前值，第二个变量使一个函数，用于更新这个值。

让我们来看个实例。

// javascriptcn.com 代码示例
import React, { useState } from 'react';

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

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

在上面的代码中，setCount 是修改 count 变量的函数，当 button 组件的 onClick 事件触发时，就会调用 setCount 函数来更新 count 变量的值。

useEffect

useEffect 是第二常用的 Hook，它在组件渲染后执行副作用操作。useEffect 第一个参数是一个函数，它会在组件挂载时执行，并在每次组件更新时重新执行。USeEffect 的第二个参数是组件被监听的变量的数组，如果监听到了某个变量的值发生变化，effect 函数就会重新执行。

// javascriptcn.com 代码示例
import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    // 副作用函数
    document.title = `You clicked ${count} times`;
  }, [count]);

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

在上面的代码中，我们监听 count 变量，每次 count 变量的值改变，useEffect 就会重新执行副作用函数，改变网页的标题。

如何编写自己的 Hook

自定义 Hook 可以帮助我们重用逻辑代码，通常一个自定义 Hook 函数会包含多个 React Hook 函数的组合。

// javascriptcn.com 代码示例
import React, { useState, useEffect } from 'react';

function useTitle(count) {
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);
}

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

  /* 
    我们自定义了一个 Hook 函数 useTitle，
    在这里直接使用即可。
  */
  useTitle(count);

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

在上述代码中，我们自定义了一个 useTitle 函数，在组件中使用。由于其中仅仅使用了 React Hooks 函数，我们也能将它放在 React Hook 模块中。

当然，我们自定义的 Hook 可以用在不同的组件上，让我们将组件中重复的逻辑提取到自定义 Hook 中。

总结

React Hooks 提供了一种新的 API，使得开发者可以更好的使用函数组件处理有状态逻辑。useState 和 useEffect 是 React Hooks 两个常用的 Hook。自定义 Hook 可以帮助开发者复用逻辑代码，提高开发效率。

在这里，我希望可以给初学者提供一份详细且有深度的 React Hooks 使用指南。当然，本文仅仅是一个入门级别的文章，想要更深入的理解还需要阅读 React 官方文档及相关网站教程。如果你想加入 React 技术社区，欢迎留言和评论区，和我们一起探讨 React 在前端领域的应用！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64fbea80f6b2d6eab31fa3ff