Question

我正在创建一个组件，它应该根据组件的实际高度设置一个类。例如：

高度＆gt; maxHeight： <div className='greater-than-max-height' />

高度＆lt; = maxHeight： <div className='less-than-max-height' />

组件的高度仅在componentDidMount中已知。建议不要在componentDidMount中执行setState，因为它会导致重新渲染。你是怎么解决的？

Answer 1

最简单的解决方案，是的，只需将setState放入componentDidMount即可。因为无论如何你需要重新渲染。对于一个简单的组件，重新渲染并不昂贵。

但是如果你的组件结构很复杂而且有些孩子需要计算，那么最好在子组件中实现shouldComponentUpdate（或简单地使用PureComponent）。

另一种解决方案是直接操纵真实的DOM。它看起来很脏但你获得了最佳性能（你可以保证没有不必要的组件渲染也没有DOM更新）

componentDidMount() {
  const height = getHeight()
  const div = document.getElementById('yourDivId')
  if (height > MAX_HEIGHT) {
    div.className = 'greater-than-max-height'
  } else {
    div.className = 'less-than-max-height'
  }
}

请注意，如果您的组件可能会更新并更改其高度，并且您想要更新className，那么您还需要在componentDidUpdate中执行此操作（两个解决方案都需要）

您可以为此提取函数：

updateDivClass() {
  const height = getHeight()
  const div = document.getElementById('yourDivId')
  if (height > MAX_HEIGHT) {
    div.className = 'greater-than-max-height'
  } else {
    div.className = 'less-than-max-height'
  }
}

componentDidMount() {
  this.updateDivClass()
}

componentDidUpdate() {
  this.updateDivClass()
}

根据组件的渲染高度来反应setState

1 个答案: