使用异步 componentDidMount() 好吗？

Question

在 React Native 中使用 componentDidMount() 作为异步函数的良好做法还是应该避免它？

当组件挂载时，我需要从AsyncStorage 获取一些信息，但我知道使这成为可能的唯一方法是使componentDidMount() 函数异步。

async componentDidMount() {
    let auth = await this.getAuth();
    if (auth) 
        this.checkAuth(auth);
}

这有什么问题吗？还有其他解决方案吗？

Answer 1

您的代码很好，对我来说非常易读。请参阅此Dale Jefferson's article，其中他展示了一个异步componentDidMount 示例，看起来也非常好。

但有些人会说，阅读代码的人可能会假设 React 对返回的 Promise 做了一些事情。

因此，对这段代码的解释以及它是否是一种好的做法是非常个人化的。

如果您需要其他解决方案，可以使用promises。例如：

componentDidMount() {
    fetch(this.getAuth())
      .then(auth => {
          if (auth) this.checkAuth(auth)
      })
}

Answer 2

让我们首先指出差异并确定它如何导致麻烦。

这里是async和“sync”componentDidMount()生命周期方法的代码：

// This is typescript code
componentDidMount(): void { /* do something */ }

async componentDidMount(): Promise<void> {
    /* do something */
    /* You can use "await" here */
}

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

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 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();
   }
   

现在，他们怎么会惹麻烦？

1. async 关键字绝对无害。

2. 我无法想象在任何情况下您都需要调用 componentDidMount() 方法，因此返回类型 Promise<void> 也是无害的。

   调用返回类型为Promise<void> 且不带await 关键字的方法与调用返回类型为void 的方法没有区别。

3. 由于componentDidMount() 延迟其执行后没有生命周期方法似乎很安全。但是有一个问题。

   假设上面的this.setState({users, questions}); 将在 10 秒后执行。在延迟时间的中间，另一个......

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

   ... 已成功执行并且 DOM 已更新。结果对用户可见。时钟继续滴答作响，10秒过去了。延迟的this.setState(...) 然后将执行，并且 DOM 将再次更新，那个时候老用户和老问题。结果也会对用户可见。

=> 将async 与componentDidMount() 方法一起使用是非常安全的（我不确定100%）。我是它的忠实粉丝，到目前为止我还没有遇到任何让我头疼的问题。

Answer 3

更新：

（我的构建：React 16、Webpack 4、Babel 7）：

当你使用 Babel 7 时，你会发现：

使用这种模式...

async componentDidMount() {
    try {
        const res = await fetch(config.discover.url);
        const data = await res.json();
        console.log(data);
    } catch(e) {
        console.error(e);
    }
}

你会遇到以下错误...

未捕获的 ReferenceError：未定义 regeneratorRuntime

在这种情况下，您需要安装 babel-plugin-transform-runtime

https://babeljs.io/docs/en/babel-plugin-transform-runtime.html

如果由于某种原因您不想安装上述软件包（babel-plugin-transform-runtime），那么您将要坚持 Promise 模式...

componentDidMount() {
    fetch(config.discover.url)
    .then(res => res.json())
    .then(data => {
        console.log(data);
    })
    .catch(err => console.error(err));
}

Answer 4

当您使用 componentDidMount 而不使用 async 关键字时，文档会这样说：

您可以立即在 componentDidMount() 中调用 setState()。它会触发额外的渲染，但会在浏览器更新屏幕之前发生。

如果你使用async componentDidMount，你会失去这个能力：在浏览器更新屏幕之后会发生另一个渲染。但是imo，如果你正在考虑使用async，比如取数据，你无法避免浏览器会更新两次屏幕。在另一个世界，不可能在浏览器更新屏幕之前暂停 componentDidMount

Answer 5

我认为只要你知道自己在做什么就可以了。但这可能会造成混淆，因为在 componentWillUnmount 运行并且组件已卸载之后，async componentDidMount() 仍然可以运行。

您可能还想在componentDidMount 中同时启动同步和异步任务。如果componentDidMount 是异步的，则必须将所有同步代码放在第一个await 之前。第一个 await 之前的代码同步运行对某些人来说可能并不明显。在这种情况下，我可能会保持 componentDidMount 同步，但让它调用同步和异步方法。

无论您选择async componentDidMount() 还是同步componentDidMount() 调用async 方法，您都必须确保清除组件卸载时可能仍在运行的所有侦听器或异步方法。

Answer 6

实际上，ComponentDidMount 中的异步加载是一种推荐的设计模式，因为 React 从遗留的生命周期方法（componentWillMount、componentWillReceiveProps、componentWillUpdate）转向异步渲染。

这篇博文非常有助于解释为什么这是安全的，并提供了在 ComponentDidMount 中异步加载的示例：

https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html

Answer 7

2020 年 4 月更新： 该问题似乎已在最新的 React 16.13.1 中得到修复，请参阅 this sandbox example。感谢@abernier 指出这一点。

---

我做了一些研究，发现了一个重要的区别： React 不会处理来自异步生命周期方法的错误。

所以，如果你这样写：

componentDidMount()
{
    throw new Error('I crashed!');
}

那么你的错误会被error boundry捕获，你可以处理它并显示一个优雅的消息。

如果我们这样修改代码：

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(()=>
    {
        //...
    });
}

如果我们仍然希望我们的错误达到错误边界，我可以考虑以下技巧：

1. 捕获错误，使错误处理程序改变组件状态
2. 如果状态指示错误，则从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>;
  }
}

Answer 8

我喜欢用这样的东西

componentDidMount(){
   const result = makeResquest()
}
async makeRequest(){
   const res = await fetch(url);
   const data = await res.json();
   return data
}