React Hooks

17 Mar 2025 | 5 分钟阅读

Hooks 是 React 16.8 版本中引入的新特性。它允许您使用 state 和其他 React 功能，而无需编写类。 Hooks 是从函数组件 "hook into" React 状态和生命周期功能的函数。它在类内部不起作用。

Hooks 是向后兼容的，这意味着它不包含任何破坏性更改。此外，它不会取代您对 React 概念的了解。

何时使用 Hooks

如果您编写一个函数组件，然后想要向其添加一些状态，以前您可以通过将其转换为类来实现。但是，现在您可以通过在现有函数组件中使用 Hook 来实现。

Hooks 的规则

Hooks 类似于 JavaScript 函数，但在使用它们时需要遵循以下两个规则。 Hooks 规则确保组件中的所有有状态逻辑都在其源代码中可见。这些规则是

1. 仅在顶层调用 Hooks

不要在循环、条件或嵌套函数中调用 Hooks。 Hooks 应该始终在 React 函数的顶层使用。此规则确保每次组件呈现时都以相同的顺序调用 Hooks。

2. 仅从 React 函数调用 Hooks

您不能从常规 JavaScript 函数调用 Hooks。相反，您可以从 React 函数组件调用 Hooks。也可以从自定义 Hooks 调用 Hooks。

React Hooks 的先决条件

Node 版本 6 或更高版本
NPM 版本 5.2 或更高版本
用于运行 React 应用程序的 Create-react-app 工具

React Hooks 安装

要使用 React Hooks，我们需要运行以下命令

$ npm install react@16.8.0-alpha.1 --save
$ npm install react-dom@16.8.0-alpha.1 --save

上面的命令将安装支持 React Hooks 的最新 React 和 React-DOM alpha 版本。确保 package.json 文件将 React 和 React-DOM 依赖项列出如下。

"react": "^16.8.0-alpha.1",
"react-dom": "^16.8.0-alpha.1",

Hooks 状态

Hook 状态是在 React 应用程序中声明状态的新方法。 Hook 使用 useState() 函数组件来设置和检索状态。让我们通过以下示例来了解 Hook 状态。

App.js

import React, { useState } from 'react';

function CountApp() {
  // 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>
  );
}
export default CountApp;

输出

在上面的示例中，useState 是需要在函数组件内部调用的 Hook，以便向其添加一些局部状态。 useState 返回一个对，其中第一个元素是当前状态值/初始值，第二个元素是允许我们更新它的函数。之后，我们将从事件处理程序或其他地方调用此函数。 useState 类似于类中的 this.setState。没有 Hooks 的等效代码如下所示。

App.js

import React, { useState } from 'react';

class CountApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  render() {
    return (
      <div>
        <p><b>You clicked {this.state.count} times</b></p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}
export default CountApp;

Hooks 效果

Effect Hook 允许我们在函数组件中执行副作用（一个动作）。它不使用类组件中可用的组件生命周期方法。换句话说，Effects Hooks 等同于 componentDidMount()、componentDidUpdate() 和 componentWillUnmount() 生命周期方法。

副作用具有大多数 Web 应用程序需要执行的常见特征，例如

更新 DOM，
从服务器 API 获取和使用数据，
设置订阅等。

让我们通过以下示例来了解 Hook Effect。

import React, { useState, useEffect } from 'react';

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

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

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

上面的代码基于之前的示例，添加了一个新功能，我们将文档标题设置为自定义消息，包括点击次数。

输出

在 React 组件中，有两种类型的副作用

没有清理的 Effects
带有清理的 Effects

没有清理的 Effects

它用于 useEffect 中，不会阻止浏览器更新屏幕。它使应用程序更具响应性。不需要清理的效果的最常见示例是手动 DOM 突变、网络请求、日志记录等。

带有清理的 Effects

某些效果需要在 DOM 更新后进行清理。例如，如果我们想要设置对某些外部数据源的订阅，那么清理内存以避免引入内存泄漏非常重要。 React 在组件卸载时执行内存清理。但是，正如我们所知，效果会为每个渲染方法运行，而不仅仅是一次。因此，React 也会在下次运行效果之前清理上一次渲染的效果。

自定义 Hooks

自定义 Hook 是一个 JavaScript 函数。自定义 Hook 的名称以 "use" 开头，可以调用其他 Hooks。自定义 Hook 就像一个常规函数，开头的 "use" 表示此函数遵循 Hooks 的规则。构建自定义 Hooks 允许您将组件逻辑提取到可重用的函数中。

让我们通过以下示例来了解自定义 Hooks 的工作原理。

import React, { useState, useEffect } from 'react';

const useDocumentTitle = title => {
  useEffect(() => {
    document.title = title;
  }, [title])
}

function CustomCounter() {
  const [count, setCount] = useState(0);
  const incrementCount = () => setCount(count + 1);
  useDocumentTitle(`You clicked ${count} times`);
  // useEffect(() => {
  //   document.title = `You clicked ${count} times`
  // });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={incrementCount}>Click me</button>
    </div>
  )
}
export default CustomCounter;

在上面的代码片段中，useDocumentTitle 是一个自定义 Hook，它接受一个参数，即标题的文本字符串。在这个 Hook 内部，我们调用 useEffect Hook 并在标题更改时设置标题。第二个参数将执行该检查，并且仅当其局部状态与我们传入的状态不同时才更新标题。

注意：自定义 Hook 是一种约定，它自然地遵循 Hooks 的设计，而不是 React 功能。

内置 Hooks

在这里，我们描述了 React 中内置 Hooks 的 API。内置 Hooks 可以分为两部分，如下所示。

基本 Hooks

useState
useEffect
useContext

其他 Hooks

useReducer
useCallback
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue

下一个主题React Flux 概念

React Hooks

何时使用 Hooks

Hooks 的规则

1. 仅在顶层调用 Hooks

2. 仅从 React 函数调用 Hooks

React Hooks 的先决条件

React Hooks 安装

Hooks 状态

Hooks 效果

没有清理的 Effects

带有清理的 Effects

自定义 Hooks

注意：自定义 Hook 是一种约定，它自然地遵循 Hooks 的设计，而不是 React 功能。

内置 Hooks

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

ReactJS 教程

杂项。

选择题

面试题

React Hooks

何时使用 Hooks

Hooks 的规则

1. 仅在顶层调用 Hooks

2. 仅从 React 函数调用 Hooks

React Hooks 的先决条件

React Hooks 安装

Hooks 状态

Hooks 效果

没有清理的 Effects

带有清理的 Effects

自定义 Hooks

注意：自定义 Hook 是一种约定，它自然地遵循 Hooks 的设计，而不是 React 功能。

内置 Hooks

相关帖子

React 片段

React 教程 | 学习 ReactJS，适合初学者

React Flux 概念

React 组件 API

条件渲染

React 简介

React Redux

React CSS

React Map

React 状态

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器