19 使用 Hooks 之 Hooks 介绍

在前面的章节中，我们探讨了路由管理及其参数与导航的实现。随着我们应用的复杂性增加，React 提供了一种更为优雅的状态管理和副作用处理的方式，那就是 Hooks。在本篇文章中，我们将介绍 Hooks 的基本概念及其在组件中的使用方法，为后续的 useState 和 useEffect 钩子奠定基础。

什么是 Hooks？

Hooks 是 React 16.8 引入的一个全新特性，允许你在不编写类的情况下使用状态和其他 React 特性。Hooks 可以让你在函数组件中更方便地管理状态和副作用，使得代码更加模块化和清晰。

常用的 Hooks 包括：

• useState: 管理函数组件的状态
• useEffect: 处理副作用
• useContext: 访问上下文
• useRef: 访问组件实例或 DOM
• 还有其他许多内置和自定义的 Hooks

为什么使用 Hooks？

1. 简化组件：通过 Hooks，我们可以让状态和生命周期逻辑更容易重用，避免冗长的类组件代码。
2. 逻辑复用：Hooks 可以让你将状态逻辑提取到可重用的函数中，而不需要为此调整组件的层级结构。
3. 更好的组织代码：多种状态和副作用可以轻松组合在一起，避免了复杂的组件优化和重构。

基本使用

首先，让我们创建一个简单的函数组件，以演示如何使用 Hooks。假设我们要实现一个简单的计数器功能。

import React, { useState } from 'react';

const Counter: React.FC = () => {
    const [count, setCount] = useState(0); // 使用 useState 创建状态

    return (
        <div>
            <p>当前计数: {count}</p>
            <button onClick={() => setCount(count + 1)}>增加</button>
            <button onClick={() => setCount(count - 1)}>减少</button>
        </div>
    );
};

export default Counter;

在上面的代码中，我们使用 useState 在函数组件中创建了一个 count 状态。这使得我们可以通过点击按钮来增加和减少计数。

关于状态更新

需要注意的是，setCount 是异步的。当我们调用 setCount(count + 1) 时，状态并不会立即更新，而是将新的状态排入等待队列。为了确保基于前一个状态更新，可以使用函数的方式来更新状态：

setCount(prevCount => prevCount + 1);

总结

在本篇文章中，我们介绍了 Hooks 的基本概念以及如何在函数组件中使用它们。通过 useState 的示例，我们展示了如何管理状态，为下一篇文章关于 useState 和 useEffect 的详细讲解奠定了基础。

接下来的章节中，我们将深入探讨 useState 和 useEffect 的用法，学习如何在实战中运用这些强大的函数。请继续关注！