componentDidMount()中的setState()被认为是反模式

Question

我刚刚看了一下关于里面的讨论.setState()componentDidMount()

你可以看到在render()函数之后,componentDidMount()函数将由React调用.当您setState()调用时,componentDidMount()您将导致整个组件树不仅重新呈现当前组件 - 不要忘记,当前组件刚刚完成渲染.

有人建议把setState()电话放在里面componentWillMount().在某些情况下,我希望得到一个渲染元素的高度,并将其存储为状态,上面的方法是行不通的.我也看了一下React官方网站,它建议在内部进行Ajax调用componentDidMount(),这再次违背了上述想法.

因此,我错误地放入setState()内部componentDidMount()？如果是,我应该作为替代方案应用什么？

Answer 1

您可以setState()立即致电componentDidMount()。它会触发额外的渲染，但是会在浏览器更新屏幕之前发生。这样可以保证，即使render()在这种情况下将两次调用，用户也不会看到中间状态。请谨慎使用此模式，因为它经常会导致性能问题。在大多数情况下，您应该能够在中分配初始状态constructor()。但是，对于模态和工具提示之类的情况，当您需要在渲染取决于其大小或位置的对象之前测量DOM节点时，可能是必需的。

反应文档

使用DidMount可以清楚地表明，只有在初始渲染之后才会加载数据。这提醒您正确设置初始状态，因此您不会因未定义状态而导致错误。

例

TLDR： -如果在构造函数中具有所有需要的数据-在state此处分配

constructor(props) {
  super(props);
  // Don't call this.setState() here!
  this.state = { counter: 0 };
}

• 调用异步操作，触摸DOM componentDidMount()