使用异步componentDidMount（）好吗？

让我们首先指出差异并确定差异可能如何引起麻烦。

这是异步和“同步”

componentDidMount()

// This is typescript precomponentDidMount(): void {  }async componentDidMount(): Promise<void> {        }

通过查看代码，我可以指出以下差异：

1. 该

   async

   关键字：在打字稿，这仅仅是一个代码标记。它做两件事：
   • 强制将返回类型

     Promise<void>

     改为

     void

     。如果您明确指定返回类型为非承诺（例如：void），则打字稿将向您吐一个错误。
   • 允许您

     await

     在方法内部使用关键字。

2. 返回类型从更改

   void

   为

   Promise<void>

   • 这意味着您现在可以执行以下操作：
     

     async someMethod(): Promise<void> { await componentDidMount(); }

     
     

3. 现在，您可以

   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 secondsawait new Promise(resolve => { setTimeout(resolve, 10000); });// This line of pre will be executed after 10+ secondsthis.setState({users, questions});return Promise.resolve();

   }

现在，它们怎么会引起麻烦？

1. 该

   async

   关键字是绝对无害的。
2. 我无法想象在任何情况下都需要调用该

   componentDidMount()

   方法，因此返回类型

   Promise<void>

   也是无害的。

调用到具有方法的返回类型的

Promise<void>

await

void

1. 由于没有生命周期方法，因此

   componentDidMount()

   延迟执行似乎很安全。但是有一个陷阱。

假设上述操作

this.setState({users, questions});

this.setState({users: newerUsers, questions: newerQuestions});

…已成功执行，并且DOM已更新。结果对用户可见。时钟继续滴答作响，经过了10秒钟。

this.setState(...)

= >

async

componentDidMount()