常用React Hooks 大合集

import React, { useState, useEffect, useContext } from 'react';
 
// 使用useState创建一个状态
const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </>
  );
};
 
// 使用useEffect处理副作用
const FriendStatus = ({ isOnline }) => {
  useEffect(() => {
    document.title = isOnline ? 'Online' : 'Offline';
  });
 
  return <h1>You are {isOnline ? 'online' : 'offline'}</h1>;};
 
// 使用自定义Hook获取数据
const useFriends = () => {
  const [friends, setFriends] = useState([]);
 
  useEffect(() => {
    const fetchFriends = async () => {
      const response = await fetch('https://example.com/friends');
      const friendsData = await response.json();
      setFriends(friendsData);
    };
    fetchFriends();
  }, []);
 
  return friends;
};
 
// 使用Context API
const ThemeContext = React.createContext('light');
 
const ThemeButton = () => {
  const theme = useContext(ThemeContext);
  return <button style={{ background: theme }}>Change Theme</button>;
};

这个代码示例展示了React Hooks的几个常见用法：

• useState：用于管理函数组件的状态。
• useEffect：用于处理副作用，如更改文档标题或数据获取。
• 自定义Hook：用于封装数据获取逻辑，以便在组件间复用。
• useContext：用于组件间共享数据，无需通过组件树的每一层传递props。