useEffect：组件与外部系统同步（简而言之，负责除了显示界面之外的其他事情）
**比如：**获取数据（调接口）、监听用户行为、监听窗口大小变化
[ 可以理解为：当某些事情发生时，去做另外一件事 ]
常用模式
第一种：只在组件第一次显示时执行
function UserProfile() {
const [user, setUser] = useState(null);
// 空数组 [] => 只执行一次，相当于"组件加载完毕后执行"
useEffect(() => {
// 获取用户信息
fetch('/api/user')
.then(res => res.json())
.then(userData => setUser(userData));
}, []); // 注意这个空数组！
return (
<div>
{user ? <h1>欢迎 {user.name}</h1> : <p>加载中...</p>}
</div>
);
}
第二种：当某个值变化时执行
function SearchBox() {
const [keyword, setKeyword] = useState('');
const [results, setResults] = useState([]);
// 当 keyword 变化时，重新搜索
useEffect(() => {
if (keyword) {
// 模拟搜索
console.log(`搜索: ${keyword}`);
// 这里可以调用搜索接口
}
}, [keyword]); // 只有 keyword 变化时才执行
return (
<div>
<input
value={keyword}
onChange={(e) => setKeyword(e.target.value)}
placeholder="输入搜索关键词"
/>
</div>
);
}
注意：依赖数组很重要！
// 空数组 - 只执行一次
useEffect(() => {
}, []);
// 有依赖 - 只有依赖变化才执行
useEffect(() => {
}, [keyword]);
个人觉得很像是vue中的onMounted和watch～
