Question

componentWillMount将从React Native的未来版本中删除。我的应用需要在呈现之前从服务器获取异步API数据，然后该怎么做？构造函数不能异步。还是我必须在构造函数中使用promise().then？

Answer 1

我将使用componentDidMount。

由于JavaScript中异步事件的性质，当您启动API调用时，浏览器会同时恢复其他工作。当React渲染一个组件时，它不会等待componentWillMount完成它开始的一切。

因此，与componentDidMount相比，componentWillMount可能并没有给您带来任何优势。

Answer 2

我认为您应该改用ComponentDidMount。最好通过在您的状态下使用loading标志来处理无需数据即可呈现组件的事实。

Answer 3

我认为我们应该使用加载，因为这意味着我们必须在屏幕可见之前处理数据。

example.js

...
this.state={
     loading: false
}
....

async ComponentDidMount() {
     ....
     await your code
     ....
    this.setState({
      loading: true
    });
}

...

render{
   if(this.state.loading === false){
     <View style={[styles.container, styles.horizontal]}>
        <ActivityIndicator size="large" color="#0000ff" />
      </View>
   return(...);
  }
...


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center'
  },
  horizontal: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    padding: 10
  }
})

不赞成使用componentWillMount后如何获取异步数据？

3 个答案: