React Hooks 重新渲染答案

【问题标题】：React Hooks Re-rendersReact Hooks 重新渲染
【发布时间】：2019-10-24 15:07:26
【问题描述】：

我有一个具有两种状态的功能组件：

 let [data, setData] = useState([]);
 let [loading, setLoading] = useState(false);

我还有一个简单的 useEffect 钩子，它调用一个返回承诺的函数：

 useEffect(() => {
    someFunctionThatReturnsAPromise().then({
            console.log("Before setData");
            setData(dataFromFetch);
            console.log("After setData");
            console.log("Before setLoading");
            setLoading(true);
            console.log("After setLoading");
        }
        );
},[]);




return (
        <div>
            console.log("Hey i rendered");
        </div>
    );

看到我有一个空的依赖数组（ [] 在 useEffect ），这个 useEffect 只会运行一次。我的问题是：

看到 setData 会导致组件重新渲染，不应该在代码到达setData(dataFromFetch); 时立即停止执行吗？在我的控制台日志中，这是打印出来的：

Hey i rendered
Before setData
Hey i rendered
After setData
Before setLoading
Hey i rendered
After setLoading

我期待的是这样的：

Hey i rendered
Before setData
Hey i rendered

为什么即使在组件重新渲染后仍继续执行？我在哪里可以读到这样的东西？

【问题讨论】：

console.log()s 中的useEffect 独立于您在渲染方法中的console.log。无论渲染数量如何，它们都会运行。所以我不确定你为什么不期望那些运行......
@silencedogood 这个应用程序不是只有一个线程吗？当线程遇到 setData() 时，它不应该直接再次渲染组件（开始执行返回）吗？现在，我看到的是，主线程作为回报打印console.log()，然后在解决时进入then()，然后调用setData()，然后再次重新渲染组件，所以它调用console.log() 再次返回，然后它回到它停止的地方，在 setData 等之后继续。
你需要返回一个清理函数：reactjs.org/docs/hooks-effect.html#example-using-hooks-1
组件未卸载，因此仍会继续记录。
@Viet 我不明白清理功能有什么帮助。我只是对重新渲染时主线程如何浏览代码感兴趣。

标签： reactjs react-hooks

【解决方案1】：

setState 被添加到 javascript 事件堆栈中，并且本质上是异步的，并且 useEffect 完全通过 javascript 调用堆栈执行，而不管堆栈末尾添加的其他异步函数（例如 console.logs 和 setStates）

https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

这是一篇关于事件队列/javascript 生命周期的文章，可以更好地解释： https://flaviocopes.com/javascript-event-loop/

【讨论】：

但是 setState 在 useEffect 完成之前被调用。嘿，我渲染的日志就是证明。
我相信这也是 javascript 生命周期/事件循环的影响，因为控制台日志与 setState 是异步的。（我更新了正确的文章，因为我从笔记中复制了错误的链接）