ReactHook基础：深入理解useState和useEffect

在 React 中，Hook 提供了一种更简洁的方式来管理组件的状态和生命周期。其中，useState 和 useEffect 是最常用的两个 Hook。

useState

useState 用于声明和更新组件的状态。它返回一个状态变量和一个更新该状态的方法。例如：

const [cards, setCards] = useState('current cards'); // 使用 ES6 解构语法
const [profile, setProfile] = useState({name: 'liaoxinyu', status: 'writing'});

1. cards 是组件的状态，初始值为 'current cards'。
2. setCards 是更新 cards 状态的方法，如调用 setCards('new cards') 后，cards 将更新为 'new cards'。
3. 可以通过多次调用 useState 来声明多个状态。

useEffect

useEffect 用于在函数组件中执行副作用操作，比如网络请求、订阅或手动修改 DOM 等。它接收一个函数作为参数，并可以选择性地提供依赖项数组。例如：

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

const Example = () => {
    const [count, setCount] = useState(0);
    const [title, setTitle] = useState('original title');
    const [profile, setProfile] = useState({name: 'liaoxinyu', status: 'writing'});

    useEffect(() => {
        setTitle('new title...' + count);
        // 组件创建时执行某些代码
        // 修改标题

        return () => {
            setTitle('original title');
        };
        // 当组件销毁时执行此函数，用于清理副作用
    }, [count]);
    // 依赖项数组 [count] 表示当 count 变更后，会自动触发 effect 函数
    // 如果设置为空数组 []，则 effect 只会在组件首次渲染时执行一次

    return (
        

            
{title}

            
current count: {count}

            
author: {profile.name}

             setCount(count + 1)}>modify count
        

    );
};

上述代码展示了如何结合 useState 和 useEffect 来动态更新组件的 UI。点击按钮会调用 setCount 方法，使 count 加 1，并触发 useEffect 更新 title。