代码是 React 学习手册里面的
```javascript
import { useState, useEffect } from "react";
export default function GitHubUser({ login }) {
return (
<Fetch
uri={`
https://api.github.com/users/${login}`}
renderSucess={UserDetails}
/>
);
}
function UserDetails({ data }) {
return (
<div className="githubuser">
<img src={data.avatar_url} alt={data.login} style={{ width: 200 }} />
<div>
<h1>{data.login}</h1>
<p>
{
data.name} - {data.location}
</p>
</div>
</div>
);
}
function Fetch({
uri,
renderSucess,
loadingFallback = <p>loading....</p>,
renderError = (error) => <pre>{JSON.stringify(error)}</pre>,
}) {
const { loading, data, err } = useFetch(uri);
if (loading) return loadingFallback;
if (err) return renderError(err);
if (data) return renderSucess({ data });
}
//let uri = `
https://api.github.com/users/${login}`
function useFetch(uri) {
const [data, setData] = useState();
const [error, setError] = useState();
const [loading, setLoading] = useState(true);
useEffect(() => {
console.log(`enter into efffect ${uri} ==== `);
if (!uri) return;
fetch(uri)
.then((res) => res.json())
.then(setData)
.then(() => setLoading(false))
.catch((err) => setError(err));
}, []);
return { loading, data, error };
}
```
在浏览器的控制台里面,useEffect 执行了 2 次,
也就是打印了 2 次
enter into efffect HELLO ====
enter into efffect HELLO ====
无论 useEffect 里监控的值[] 是哪个,都会执行 2 次。
```
useEffect(() => {
console.log(`enter into efffect ${uri} ==== `);
if (!uri) return;
fetch(uri)
.then((res) => res.json())
.then(setData)
.then(() => setLoading(false))
.catch((err) => setError(err));
}, []);
```
书本数如果数组中括号里面没有变量,那么只会低第一次渲染的时候执行。 不知道为什么现在会被执行 2 次的?
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
https://www.v2ex.com/t/998520
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.