31 Hooks的使用之useState与useEffect的介绍

在上一篇中，我们讨论了React Router，学习了如何使用Link和NavLink进行页面导航。这为我们构建多页面应用奠定了基础。现在，让我们进入React的核心概念之一：Hooks，特别是useState和useEffect的使用。

什么是Hooks？

Hooks是React 16.8引入的一种新特性，让我们能够在不编写类组件的情况下使用state和其他React特性。useState和useEffect是最常用的两个Hooks，它们分别用于处理组件的状态和副作用。

useState

useState是一个用于声明组件状态的Hook。它返回一个包含当前状态和更新状态的函数的数组。

示例代码

import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0); // useState用于声明状态

    return (
        <div>
            <p>你点击了 {count} 次</p>
            <button onClick={() => setCount(count + 1)}>
                点击我
            </button>
        </div>
    );
}

export default Counter;

在上面的示例中，我们使用useState(0)声明了一个名为count的状态变量，并将其初始化为0。setCount是一个函数，用于更新count的值。当我们点击按钮时，count的值会增加1。

useEffect

useEffect是一个用于处理副作用的Hook。副作用可以是数据获取、订阅或手动更改DOM等。我们可以将其视为componentDidMount、componentDidUpdate和componentWillUnmount的组合。

示例代码

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

function Timer() {
    const [seconds, setSeconds] = useState(0);

    useEffect(() => {
        const intervalId = setInterval(() => {
            setSeconds(prevSeconds => prevSeconds + 1);
        }, 1000);

        return () => clearInterval(intervalId); // 清理副作用
    }, []); // 空依赖数组，表示只在组件挂载和卸载时执行

    return (
        <div>
            <p>已计时 {seconds} 秒</p>
        </div>
    );
}

export default Timer;

在这个示例中，我们使用useEffect来设置一个定时器，更新seconds的状态。定时器每秒增加一次seconds的值。此外，我们在useEffect内部返回了一个清理函数，以确保组件卸载时定时器被清除。

结合案例

现在，让我们将useState和useEffect结合起来，创建一个简单的计数器和定时器应用，让用户可以开始、停止和重置计时。

完整代码示例

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

function TimerApp() {
    const [seconds, setSeconds] = useState(0);
    const [isActive, setIsActive] = useState(false);

    useEffect(() => {
        let intervalId;

        if (isActive) {
            intervalId = setInterval(() => {
                setSeconds(prevSeconds => prevSeconds + 1);
            }, 1000);
        } else {
            clearInterval(intervalId);
        }

        return () => clearInterval(intervalId); // 清理副作用
    }, [isActive]); // 依赖于isActive状态

    const startTimer = () => setIsActive(true);
    const stopTimer = () => setIsActive(false);
    const resetTimer = () => {
        setIsActive(false);
        setSeconds(0);
    };

    return (
        <div>
            <h1>计时器</h1>
            <p>已计时 {seconds} 秒</p>
            <button onClick={startTimer}>开始</button>
            <button onClick={stopTimer}>停止</button>
            <button onClick={resetTimer}>重置</button>
        </div>
    );
}

export default TimerApp;

总结

在这一章中，我们学习了useState和useEffect的基本用法。useState让我们能够在函数组件中管理状态，而useEffect则处理副作用。通过示例，我们构建了一个简单的计时器应用，展示了如何将这两个Hooks结合使用。

在下一章中，我们将进一步探讨自定义Hooks，学习如何封装和重用逻辑，使我们的代码更加模块化和可维护。随着我们对Hooks的深入理解，它们将为我们的React开发提供更大的灵活性与可能性。