一、useState(状态管理)

1.用途
在函数组件中声明状态变量，并能更新状态触发组件重新渲染。

2.示例

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // 初始值 0

  const increment = () => setCount(count + 1);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+1</button>
    </div>
  );
}

二、useEffect

1.用途
用来在函数组件中处理副作用（side effects）。副作用可以是数据获取、订阅事件、手动操作 DOM、定时器、日志等。它相当于类组件里的 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。
2.示例

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

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

  useEffect(() => {
    // 这里是副作用逻辑
    console.log("组件渲染或 count 更新了:", count);

    // 可选的清理函数
    return () => {
      console.log("清理上一次的副作用");
    };
  }, [count]); // 依赖数组
  

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

3.依赖项说明
3.1 不传
每次渲染都会执行
3.1 [] 空数组
仅在组件挂载和卸载时执行一次
3.3[a, b]
仅在 a 或 b 改变时执行

三、useCallback

1.用途
用来记住函数的引用，避免在每次组件渲染时都创建新的函数对象。

2.示例

const memoizedCallback = useCallback(() => {
  // 这里写要执行的逻辑
}, [依赖项]);

四、useContext

1.用途
获取全局的上下文。
2.示例

import React, { createContext, useContext } from "react";

const ThemeContext = createContext("light");

function Button() {
  const theme = useContext(ThemeContext); // 获取 context 值
  return <button style={{ background: theme === "dark" ? "#333" : "#eee" }}>Click</button>;
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Button />
    </ThemeContext.Provider>
  );
}

五、useRef

1.用途
1.1 获取 DOM 节点引用
1.2 保存可变值（不会触发重新渲染）

2.示例

function Timer() {
  const countRef = useRef(0);

  const increment = () => {
    countRef.current += 1;
    console.log(countRef.current);
  };

  return <button onClick={increment}>Click</button>;
}