React Hooks 全解: 常用 Hooks 及使用场景详解

import React, { useState, useEffect, useContext } from 'react';
 
// 使用状态钩子管理组件状态
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}
 
// 使用效果钩子处理副作用
function FriendStatus(props) {
  useEffect(() => {
    console.log(`Friend ${props.name} is ${props.isOnline ? 'online' : 'offline'}`);
  });
  return null;
}
 
// 自定义钩子以复用状态逻辑
function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);
 
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  }, [friendID]); // 依赖项变化时重新订阅
 
  return isOnline;
}
 
// 使用上下文钩子访问上下文
function UserInfo(props) {
  const user = useContext(UserContext);
  return (
    <div>
      <h1>Welcome back, {user.name}!</h1>
      <h2>You last logged in on {user.lastLogin}</h2>
    </div>
  );
}

这个代码示例展示了如何在React组件中使用Hooks来管理状态、执行副作用和访问上下文数据。每个函数组件都使用一个或多个Hook来提供其功能，展示了React Hooks的各种用法。