在ScrollView / FlatList / SectionList中React Native async（firebase）图像提取

Question

我有一个SectionList，其中包含从firebase存储中提取的大量图像。向下滚动时，它会迅速产生很多警告。

WebImage组件如下所示：

import React, { Component } from 'react'
import { View, Image } from 'react-native'
import firebase from 'firebase'

class WebImage extends Component {
  state = {
    imgsrc: '',
    mounted: false,
  }

  componentDidMount() {
    this.setState({ mounted: true })

    firebase
      .storage()
      .ref()
      .child(this.props.source)
      .getDownloadURL()
      .then(url => {
        if (this.state.mounted) {
          this.setState({ imgsrc: url })
        }
      })
  }

  componentWillUnmount() {
    this.setState({ mounted: false })
  }

  render() {
    ...
  }
}

export default WebImage

正如你所看到的，我试图让它意识到安装状态，但它没有像预期的那样工作..

Answer 1

以下似乎有效：

  state = {
    imgsrc: '',
  }

  componentDidMount() {
    this.ref = firebase
      .storage()
      .ref()
      .child(this.props.source)
      .getDownloadURL()
      .then(url => {
        this.setState({ imgsrc: url })
      })
  }

  componentWillUnmount() {
    this.ref.cancel()
  }

阅读latest on Async React并将我的回答从componentWillMount更改为componentDidMount。

  

有一种常见的误解，即在componentWillMount中提取可以避免第一个空渲染状态。在实践中，这永远不会成立，因为React总是在componentWillMount之后立即执行渲染。如果componentWillMount触发时数据不可用，则无论您在何处启动提取，第一个渲染仍将显示加载状态。这就是为什么在绝大多数情况下将fetch移动到componentDidMount都没有明显的效果。