React Hooks 钩子的具体使用

const [count, setCount] = useState(0); // 初始值为0
// 更新状态（直接赋值或函数式更新）
setCount(prev => prev + 1); 

// 组件挂载和更新时执行（依赖项变化才触发）
useEffect(() => {
  const timer = setInterval(() => setCount(c => c + 1), 1000);
  // 清理函数（组件卸载或依赖变化前执行）
  return () => clearInterval(timer); 
}, []); // 空依赖：只在挂载和卸载时执行

// 先创建 Context
const ThemeContext = createContext('light');
// 在组件中获取 Context 值
const theme = useContext(ThemeContext); 

// 定义 reducer 函数（状态更新规则）
function todoReducer(state, action) {
  switch(action.type) {
    case 'ADD': return [...state, action.payload];
    default: return state;
  }
}
// 在组件中使用
const [todos, dispatch] = useReducer(todoReducer, []);
// 触发更新
dispatch({ type: 'ADD', payload: '学习 Hooks' });

// 缓存 handleClick 函数，依赖项不变则函数引用不变
const handleClick = useCallback(() => {
  console.log('点击了', count);
}, [count]); // 依赖 count，count 变则函数重新创建

// 缓存计算结果，依赖项不变则直接返回缓存值
const total = useMemo(() => {
  return list.reduce((sum, item) => sum + item.price, 0);
}, [list]); // 依赖 list，list 变则重新计算

// 访问 DOM 元素
const inputRef = useRef(null);
useEffect(() => inputRef.current.focus(), []);

// 存储跨渲染的数据（修改不会触发重渲染）
const timerRef = useRef(null);
timerRef.current = setInterval(...);

function ChildComponent(props, ref) {
  const inputRef = useRef(null);
  // 只暴露 focus 方法给父组件
  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus()
  }));
  return <input ref={inputRef} />;
}
// 父组件通过 ref 调用子组件暴露的方法
const childRef = useRef(null);
childRef.current.focus(); 

useLayoutEffect(() => {
  // 读取 DOM 布局并立即修改（避免页面闪烁）
  const { height } = elementRef.current.getBoundingClientRect();
  elementRef.current.style.marginTop = `${100 - height}px`;
}, []);

function useFriendStatus(friendId) {
  const [isOnline, setIsOnline] = useState(null);
  // 在 DevTools 中显示 "FriendStatus: 在线/离线"
  useDebugValue(isOnline ? '在线' : '离线');
  return isOnline;
}

const [isPending, startTransition] = useTransition();
// 紧急更新：立即响应输入
setInput(e.target.value);
// 非紧急更新：标记为过渡任务
startTransition(() => {
  setFilteredList(filterData(e.target.value)); // 耗时操作
});

const [input, setInput] = useState('');
// 延迟版本：input 更新后，deferredInput 会“滞后”更新
const deferredInput = useDeferredValue(input);
// 基于延迟值渲染（避免输入时卡顿）
return <List data={filter(deferredInput)} />;

const id = useId(); // 生成如 "r1:2" 的唯一ID
return (
  <div>
    <label htmlFor={`${id}-name`}>姓名</label>
    <input id={`${id}-name`} />
  </div>
);

// 从外部 store 读取状态
const state = useSyncExternalStore(
  store.subscribe, // 订阅状态变化
  store.getState,  // 获取当前状态
  store.getServerState // 服务器初始状态（SSR用）
);