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

Question

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

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

我对此进行了研究，发现我应该使用houldComponentUpdate，但我无法让它工作，因为地图无法正确渲染，在不应该渲染的时候渲染，而不是在应该渲染的时候渲染。

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

我正在将我拥有的数据状态与下一个状态的数据i.e this.state.data !== nextState.data 进行比较，如果是，则返回 true。

我是否正确地解决了这个问题，所以这是 ShouldComponentUpdate 应该解决的问题，我只是没有正确编写该函数，还是应该专注于不同的解决方案？

Answer 1

飞入shouldComponentUpdate的是：

• 当组件收到新的props 时，您也会停止重新渲染
• 如果nextState 的长度不同，您的方法不会检查它。在这种情况下，我们总是希望重新渲染

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