如果我在函数中间更新状态，那么函数其余部分的执行顺序是什么

Question

我使用的是带有钩子的Context API和React功能组件。我有一个功能组件ProfileForm.js

在这个文件的顶部，我调用useContext，这样我就可以访问当前状态(配置文件对象的数组(。

const {state: {userProfiles}, addProfile, removeProfile, editProfile} = useContext(UserProfilesContext);

在这个例子中，我将重点讨论函数addProfile。当用户单击提交按钮时，我想将新的配置文件添加到全局状态/上下文，并将更新后的列表保存到AsyncStorage。

这是我的管理员：

const saveProfileHandler = async(profiles) = >
{
const {
firstName, lastName, userPhone, userEmail, userMonth, userDay, userYear,
userStreet, userCity, userState, userZip,
}
= formState.inputValues;
Keyboard.dismiss();
if (validateForm()) {
let month = userMonth;
let day = userDay;
if (month.length == = 1) {
month = `0 $ { userMonth }
`;
}
if (day.length == = 1) {
day = `0 $ { userDay }
`;
}
const profile = new UserProfile(
firstName.trim(),
lastName.trim(),
userPhone.trim(),
userEmail.trim(),
month.trim(),
day.trim(),
userYear.trim(),
userStreet.trim(),
userCity.trim(),
userState.trim(),
userZip.trim(), );
// add profile to Context object
addProfile(profile);
await saveUserProfilesToStorage([... profiles, profile ]);
navigation.pop();
}
};

当我调用addProfile时，我会更新全局状态/上下文，这样我就知道React会重新渲染我的组件。所以，我真的有两个问题：

1. 依赖我刚刚保存的全局状态值是否不安全。我的意思是，我可以使用更新的上下文状态并将其保存到AsyncStorage吗？还是它还没有更新，因此不可靠
2. 在我调用addProfile之后，函数的其余部分是在从状态更新重新渲染之前继续运行，还是addProfile会导致组件在函数的剩余部分完成之前重新渲染？如果它在函数调用的中间重新应答，那么函数的其余部分什么时候执行

提前感谢。

Answer 1

这就是我所能学到的。我会把它放在这里给其他偶然发现它的人。

重要的是要知道，在React中，setState((是一个异步函数。JavaScript引擎由内存堆和调用堆栈组成。调用堆栈将运行所有同步函数。除了JavaScript引擎之外，还有Web API(由浏览器提供(和事件循环(回调队列(。

当一个函数被执行时，它被放置在调用堆栈上，并同步开始执行。如果从当前运行的函数内部调用另一个函数，则新函数将获得自己的执行上下文。当前函数将暂停执行，新函数将执行到完成(假设上下文中没有新函数调用(，并将控制权返回给将继续执行的第一个函数。

异步事件

异步代码在浏览器的Web API环境中运行。这样可以防止代码阻塞JavaScript线程/调用堆栈。异步代码的回调函数在WebAPI环境中注册。当回调准备好执行时，它会被放入回调队列中。所有回调，除了那些通过promise返回的回调，都在这里排队。

在调用堆栈为空之前，不会执行回调然后它们将按FIFO(先进先出(顺序执行。

同样重要的是要知道来自promise(然后，catch(的回调不会被放入回调队列。它们进入微任务队列。此队列的优先级高于回调队列。这意味着来自微任务队列的所有回调都将在回调队列的任务之前调用。

---

在我的情况下，上下文更新将在navigation.pop();之后发生，但由于上下文是全局的，并且我在组件卸载后不会更新UI，所以应该可以。

如果我做错了什么，我欢迎改正。