新手问题请教 useEffect

[yagamil]

代码是 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 次的？

[yena]

useeffect 默认执行两次

[whj768702]

是严格模式，看看入口文件中是不是有<StrictMode>标签包裹，在开发环境，严格模式下会执行两次。可以参考下文档。https://react.dev/reference/react/StrictMode

[daleqq]

Development 模式下默认执行两次 mount 提醒你有没有合理的 cleanup.

"To help you spot them quickly, in development React remounts every component once immediately after its initial mount."

[potatowish]

初学 React 时也遇到过，开发环境下默认是 StrictMode

[realJamespond]

```
export const useMount = (fn: React.EffectCallback) => {
const isMounted = useRef(false)
useEffect(() => {
if (!isMounted.current) {
fn()
isMounted.current = true
}
}, [])
}
```
这样就能只执行一次了

[nodejsexpress]

好的，看来还是我太菜了。谢谢楼上的各位大佬！