Question

我尝试使用自定义选取框，但每次状态更新时，我的组件应用都会重新渲染，这导致选取框中的动画出现一些滞后。我尝试shouldComponentUpdate()生命周期，但这无济于事，因为这可能会使重新渲染过程变慢，特别是如果我每3到5秒有太多状态更新，并且我尝试只寻找一种状态进行更改，但这也无济于事，因为如果其他状态发生了更改，这会阻止组件重新呈现。这些是我尝试做的方法

1。使用shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState) {
  if(this.state.count !== nextState.count){
    return false
  }
  return true;
}

由于每5秒钟有很多状态更改，因此此操作无效

2。。使用了一些自定义CSS

以防止它滞后使用

will-change: transform

以上所有方法均无效，因此我来到这里提出问题，以便有人可以帮助我解决动画方面的滞后问题

注意我在子组件而不是父组件（App.js）中使用的字幕库，并且当我注释了更新父组件状态的HTTP请求时，滞后停止了。

所以这就是为什么我得出结论的原因：组件重新渲染时出现了滞后。我要查找的问题不在代码中，这就是为什么我没有将所有代码都放在这里并要求修复的原因，所以我提出了这个问题，以便有人可以帮助我理解问题动画滞后于重新渲染

NOTE2 关于状态有很多更新，我的意思是，我有

this.state = {
  count: 0,
  data: [],
  comments: [],
  posts: [],
  notifications: [],
}

这些状态会使用HTTP请求每5秒不断更新在父组件中

NOTE3 我在componentDidMount()上使用HTTP请求，而在this.interval上，此代码发生在App.js（父级）中

componentDidMount(){
  this._isMounted = true
  this.interval = setInterval(() => {
   fetch('http://localhost:3000/getnotifications')
  .then(response => response.json())
  .then(response => {
    this.setState({
      notifications: response
    })
  })
  .catch(err => console.error(err))

   // here also HTTP request for the rest of state

  }, 5000)
}

componentWillUnmount(){
 this._isMounted = false
 clearInterval(this.interval);
}

我已经更新了我的问题，可以在下面回答一些评论

如何阻止重新渲染滞后的反应？

0 个答案: