在 React Native 中使用componentDidMount()作为异步函数的好习惯还是我应该避免它?
componentDidMount()
我需要从AsyncStorage组件安装时获取一些信息,但我知道使这成为可能的唯一方法是使componentDidMount()函数异步。
AsyncStorage
async componentDidMount() { let auth = await this.getAuth(); if (auth) this.checkAuth(auth); }
这有什么问题吗?还有其他解决方案吗?
让我们首先指出差异并确定它如何导致麻烦。
这是异步和“同步”componentDidMount()生命周期方法的代码:
// This is typescript code componentDidMount(): void { /* do something */ } async componentDidMount(): Promise<void> { /* do something */ /* You can use "await" here */ }
通过查看代码,我可以指出以下差异:
async
Promise<void>
void
await
返回类型从更改void为Promise<void>
async someMethod(): Promise<void> { await componentDidMount(); }
您现在可以await在方法中使用关键字并暂时暂停其执行。像这样:
async componentDidMount(): Promise<void> { const users = await axios.get<string>("http://localhost:9001/users"); const questions = await axios.get<string>("http://localhost:9001/questions"); // Sleep for 10 seconds await new Promise(resolve => { setTimeout(resolve, 10000); }); // This line of code will be executed after 10+ seconds this.setState({users, questions}); return Promise.resolve();
}
现在,他们怎么可能惹麻烦?
调用返回类型为Promise<void>不带await关键字的方法与调用返回类型为 的方法没有区别void。
假设上述this.setState({users, questions});内容将在 10 秒后执行。在延迟时间的中间,另一个......
this.setState({users, questions});
this.setState({users: newerUsers, questions: newerQuestions});
… 已成功执行并且 DOM 已更新。结果对用户可见。时钟继续滴答作响,10秒过去了。然后延迟this.setState(...)执行,DOM 将再次更新,那个时候老用户和老问题。用户也可以看到结果。
this.setState(...)
async => 使用withcomponentDidMount()方法非常安全(我不确定 100%) 。我是它的忠实粉丝,到目前为止,我还没有遇到任何让我头疼的问题。