Question

我刚刚对null中的setState()进行了at this discussion的浏览。

您可以看到，在componentDidMount()函数之后，render()函数将被React调用。当您在componentDidMount()中进行setState()调用时，不仅导致整个组件树都被重新渲染，不仅是当前组件-勿忘，当前组件确实完成了渲染。

有些人建议将componentDidMount()呼叫放在setState()内。在某些情况下，我想获取渲染元素的高度并将其存储为状态，而上述方法将不起作用。我还查看了React的官方网站，它建议在componentWillMount()内进行Ajax调用，这再次与上述想法背道而驰。

因此，我将componentDidMount()放在setState()内错了吗？如果是，我应该怎么替代？

Answer 1

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

React docs

使用DidMount可以清楚地说明，直到初始渲染。这提醒您正确设置初始状态，这样您就不会以导致错误的不确定状态结束。

Example

TLDR： -如果构造函数中有所有需要的数据，请在其中分配state

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

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

Answer 2

通常，您不想在componentDidMount内进行同步状态设置，只需将其放在构造函数中即可。但是元素高度有点独特，因为在将元素安装并渲染到DOM中之前，您实际上无法获得它的高度。

因此通常不行，但是在元素高度的情况下，可以在componentDidMount中进行。

Answer 3

您不知道渲染元素的高度的情况可能是在setState内使用componentDidMount的有效借口。但是，在这种情况下，我肯定会添加另一种生命周期方法shouldComponentUpdate，以控制重新呈现问题。

Answer 4

您可以进行异步调用，并且必须在componentDidMount（）生命周期挂钩内进行。但这将再次调用render方法。

如果您不希望重新渲染再次发生，请使用shouldComponentUpdate（）方法来防止重新渲染DOM。示例如下：

shouldComponentUpdate (nextProps, nextState) {
    // check the condition here
    if (nextState.something !== 'value') {
         // stop re-rendering
         return false;
    }
    // continue rendering
    return true;
}

在componentDidMount（）中的setState（）是否被视为反模式

4 个答案: