Question

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

 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

为什么在重新渲染组件后仍继续执行？我在哪里可以阅读此类内容？

Answer 1

git push -u origin HEAD已添加到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/

React Hooks重新渲染

1 个答案: