React Hooks 核心：useState 与 useEffect

useState 基本用法

import React, { useState } from 'react';



function Counter() {

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

    return (

        <div>

            <p>点击了 {count} 次</p>

            <button onClick={() => setCount(count + 1)}>+1</button>

        </div>

    );

}

useEffect 副作用

import { useEffect } from 'react';



function UserProfile({ userId }) {

    const [user, setUser] = useState(null);



    useEffect(() => {

        // 组件挂载或 userId 变化时执行

        fetch(`/api/users/${userId}`)

            .then(res => res.json())

            .then(data => setUser(data));



        return () => {

            // 清理函数（组件卸载或下次 effect 前执行）

            console.log('清理上一次请求');

        };

    }, [userId]); // 依赖数组



    return <div>{user?.name}</div>;

}

自定义 Hook

function useLocalStorage(key, initial) {

    const [value, setValue] = useState(() => {

        const stored = localStorage.getItem(key);

        return stored ? JSON.parse(stored) : initial;

    });

    useEffect(() => {

        localStorage.setItem(key, JSON.stringify(value));

    }, [key, value]);

    return [value, setValue];

}

Hooks 让函数组件拥有类组件的全部能力，代码更简洁。