componentDidMount() 中的 setState() 是否被视为反模式 [英] Is setState() inside componentDidMount() considered an anti-pattern

问题描述

我刚刚看过在本次讨论中 关于 componentDidMount() 中的 setState().

I've just had a look at this discussion about setState() inside componentDidMount().

可以看到在render()函数之后，componentDidMount()函数会被React调用.当您在 componentDidMount() 中放置 setState() 调用时，您将导致整个组件树不仅重新渲染当前组件 - 不要忘记，当前组件刚刚完成渲染.

You can see that after the render() function, the componentDidMount() function will be called by React. When you put a setState() call in componentDidMount() then you are causing the entire component tree be re-rendered not only the current component - not to forget, the current component did just finished with rendering.

有些人建议将 setState() 调用放在 componentWillMount() 中.在某些情况下，我想获取渲染元素的高度并将其存储为状态，而上述方法不起作用.我也看了React官网，建议在componentDidMount()里面做Ajax调用，又和上面的想法背道而驰.

And some people suggested to put setState() call inside componentWillMount(). In some cases, I want to get the height of a rendered element and store it as state, and the above method wouldn't work. I also had a look at the React official website, and it suggests to do Ajax call inside componentDidMount(), which again goes against the above idea.

那么，我将 setState() 放在 componentDidMount() 中是否错了?如果是，我应该申请什么作为替代方案?

So, am I wrong about putting setState() inside componentDidMount()? If yes, what should I apply as an alternative?

推荐答案

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

You may call setState() immediately in componentDidMount(). It will trigger an extra rendering, but it will happen before the browser updates the screen. This guarantees that even though the render() will be called twice in this case, the user won’t see the intermediate state. Use this pattern with caution because it often causes performance issues. In most cases, you should be able to assign the initial state in the constructor() instead. It can, however, be necessary for cases like modals and tooltips when you need to measure a DOM node before rendering something that depends on its size or position.

React 文档

使用 DidMount 可以清楚地表明数据不会在之后加载初始渲染.这提醒您正确设置初始状态，这样你就不会得到导致错误的未定义状态.

Using DidMount makes it clear that data won’t be loaded until after the initial render. This reminds you to set up initial state properly, so you don’t end up with undefined state that causes errors.

示例

TLDR:- 如果你在构造函数中有所有需要的数据 - 在那里分配 state

TLDR: - If you have all needed data in constructor - assign state there

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

• 调用异步操作，在componentDidMount()中触摸DOM
• Call async action, touch DOM in componentDidMount()

这篇关于componentDidMount() 中的 setState() 是否被视为反模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！