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。