react js 使用 useEffect 钩子
起因， 目的:
useEffect() ， 已经遇见好几次了。 我的理解是，
- 页面加载完成之后，会执行这个函数。
- ？？？
写个例子， 请求 api
import React, { useState, useEffect } from "react";
import "./MyJoke.css";
function MyJoke() {
const [joke, setJoke] = useState(""); // 用来存储笑话内容
// 定义一个异步函数来获取笑话
const generateJoke = async () => {
const config = {
headers: {
Accept: "application/json",
},
};
const res = await fetch("https://icanhazdadjoke.com", config);
const data = await res.json();
setJoke(data.joke); // 将 API 获取的笑话内容设置为组件的状态
};
// 使用 useEffect 让组件首次加载时自动调用 generateJoke
useEffect(() => {
generateJoke(); // 在组件加载时获取笑话
}, []); // 空依赖数组，确保只在组件挂载时执行
return (
<div className="container">
<h3>Hear me out!</h3>
<div id="joke" className="joke">
{joke}
</div>
<button id="jokeBtn" className="btn" onClick={generateJoke}>
New Joke
</button>
</div>
);
}
export default MyJoke;
结论 + todo
其实， 这部分，我还是不熟悉。 还需要再看看。
老哥，支持一下啊。
