使用componentDidMount()作为一个异步函数的良好做法作出react本地还是应该避免呢？
我需要从AsyncStorage组件安装时获取一些信息，但我知道的唯一方法是使componentDidMount()函数异步。
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关键字：在typescript，这仅仅是一个代码标记。它做两件事：
Promise<void>代替void. 如果您明确指定返回类型为 non-promise（例如：void），typescript 会向您吐出错误。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();
}
现在，他们怎么会惹事呢？
async关键字是绝对无害的。我无法想象您需要调用该componentDidMount()方法以便返回类型Promise<void>也无害的任何情况。
调用返回类型为Promise<void>withoutawait关键字的方法与调用返回类型为 的方法没有区别void。
由于componentDidMount()延迟执行后没有生命周期方法似乎很安全。但有一个问题。
比方说，上面的代码this.setState({users, questions});会在 10 秒后执行。在延迟的时间中间，另一个......
this.setState({users: newerUsers, questions: newerQuestions});
... 已成功执行并更新 DOM。结果对用户可见。时钟继续滴答作响，10 秒过去了。然后this.setState(...)将执行延迟并再次更新 DOM，那一次是老用户和老问题。结果也将对用户可见。
=>async与componentDidMount()方法一起使用非常安全（我不确定是否为 100%）。我是它的忠实粉丝，到目前为止我还没有遇到任何让我头疼的问题。
2020 年 4 月更新： 该问题似乎已在最新的 React 16.13.1 中得到解决，请参阅此沙箱示例。感谢@abernier 指出这一点。
我做了一些研究，我发现了一个重要的区别： React 不处理来自异步生命周期方法的错误。
所以，如果你写这样的东西：
componentDidMount()
{
throw new Error('I crashed!');
}
那么您的错误将被错误边界捕获，您可以对其进行处理并显示一条优雅的消息。
如果我们像这样更改代码：
async componentDidMount()
{
throw new Error('I crashed!');
}
这相当于：
componentDidMount()
{
return Promise.reject(new Error('I crashed!'));
}
那么你的错误将被默默地吞噬。为你感到羞耻，react...
那么，我们如何处理错误呢？唯一的方法似乎是这样的显式捕获：
async componentDidMount()
{
try
{
await myAsyncFunction();
}
catch(error)
{
//...
}
}
或者像这样：
componentDidMount()
{
myAsyncFunction()
.catch(()=>
{
//...
});
}
如果我们仍然希望我们的错误达到错误边界，我可以考虑以下技巧：
render方法中抛出例子：
class BuggyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { error: null };
}
buggyAsyncfunction(){ return Promise.reject(new Error('I crashed async!'));}
async componentDidMount() {
try
{
await this.buggyAsyncfunction();
}
catch(error)
{
this.setState({error: error});
}
}
render() {
if(this.state.error)
throw this.state.error;
return <h1>I am OK</h1>;
}
}
你的代码很好，对我来说可读性很强。请参阅Dale Jefferson 的这篇文章，他展示了一个异步componentDidMount示例并且看起来也非常好。
但有些人会说，阅读代码的人可能会认为 React 对返回的 promise 做了一些事情。
所以这段代码的解释以及它是否是一个好的做法是非常个人的。
如果你想要另一个解决方案，你可以使用promises。例如：
componentDidMount() {
fetch(this.getAuth())
.then(auth => {
if (auth) this.checkAuth(auth)
})
}
当您使用componentDidMountwithoutasync关键字时，文档会这样说：
您可以在 componentDidMount() 中立即调用 setState()。它会触发额外的渲染，但会在浏览器更新屏幕之前发生。
如果你使用async componentDidMount你会失去这个能力：在浏览器更新屏幕后会发生另一个渲染。但是imo，如果您正在考虑使用异步，例如获取数据，则无法避免浏览器将更新屏幕两次。在另一个世界，在浏览器更新屏幕之前暂停 componentDidMount 是不可能的
我认为只要你知道自己在做什么就可以了。但它可能会令人困惑，因为async componentDidMount()在componentWillUnmount已运行且组件已卸载后仍然可以运行。
您可能还想在componentDidMount. 如果componentDidMount是异步的，则必须将所有同步代码放在第一个await. 第一次await同步运行之前的代码对某些人来说可能并不明显。在这种情况下，我可能会保持componentDidMount同步但让它调用同步和异步方法。
无论您选择还是async componentDidMount()同步componentDidMount()调用async方法，您都必须确保清除组件卸载时可能仍在运行的所有侦听器或异步方法。