Question

我正在使用setinterval的组合，它位于我的ComponentDidMount函数中，它从API获取数据并将状态设置为我在react-native-maps上显示的获取数据。问题是将setInterval与setState一起使用成本太高，因为地图必须每5秒重新渲染一次。

    componentDidMount() {
      this.interval = setInterval(() => {
        api.getData().then((res) => {
            this.setState({
                data: res
            })
        });
    }, 5000);

我已经研究了这个，发现我应该使用ShouldComponentUpdate，但我无法让它工作，因为地图无法正确渲染，渲染时它不应该渲染，也不会渲染到它应该的时候。

    shouldComponentUpdate(nextProps, nextState) {
      for(var i = 0; i < this.state.data.length; i++) {
        if(this.state.data[i].value !== nextState.data[i].value) {
          return true;
        }
      }
      return false;
    }

我将我拥有的数据状态与下一个状态数据进行比较，即this.state.data！== nextState.data，如果是这样，我返回true。

我是否正确地解决了这个问题，这是一个问题，应该由ShouldComponentUpdate解决，我只是没有正确地编写该函数，或者我应该关注不同的解决方案？

谢谢！

Answer 1

shouldComponentUpdate中的飞行是：

当组件收到新的props
如果nextState的长度不同，则您的方法无法检查。在这种情况下，我们总是想重新渲染

＆＃13;

shouldComponentUpdate(nextProps, nextState) {
  // Just an example, you need compare actual parameter which inside props
  if (this.props !== nextProps) { 
    return true;
  }
  
  if (this.state.data.length !== nextState.data.length) {
    return true;
  }
  
  for (var i = 0; i < this.state.data.length; i++) {
    if (this.state.data[i].value !== nextState.data[i].value) {
      return true;
    }
  }
  return false;
}

＆＃13;

React Native：如何将ShouldComponentUpdate与setInterval和setState一起使用

1 个答案: