反应js构造函数调用了两次

Question

我有一个帖子列表，我试图在构造函数或componentDidMount中为每个帖子调用一个操作。但不知何故，当我发送一个新消息时，构造函数和componentDidMount函数会被调用两次。

 constructor(props) {
    super(props);

    if (condition1) {
       this.props.actions.action1();
    } else if (condition2) {
       this.props.actions.action2();
    }    
}

当从列表中读取帖子时，这些函数仅被调用一次。但是当我发送一条新消息时，他们会被呼叫两次。

我怎样才能避免这种情况。我试着像这样使用ComponendDupDate函数：

componentDidUpdate(prevProps, prevState) {     
      if (prevProps.post.id !== this.props.post.id) {
         if (condition1) {
            this.props.actions.action1();
         } else if (condition2) {
            this.props.actions.action2();
         }
      }   
}

Answer 1

如果您没有运行StrictMode（如果您运行了，请参阅Papacool的回答：这是设计的），当构造函数中的代码运行两次时，您可以确保组件被重新创建两次。这可能有各种原因，最简单的原因可能是组件被用于多个地方：

<MyComponent />
<MyComponent />

另一个原因可能是您有条件渲染，这意味着您可能正在基于布尔值进行渲染，这会发生变化：

{ myBoolean && <MyComponent /> }

如果切换myBoolean两次，则构造函数将执行两次。

Answer 2

好的，当构造函数和componentDidMount函数都触发两次时，您可以确保所讨论的组件在某个地方被构造了两次。

Answer 3

React构造函数在严格模式下被调用两次。https://stackoverflow.com/a/61443443/6014725

这不是一个bug，而是有目的的行为，以确保构造函数是纯的。https://github.com/facebook/react/issues/12856#issuecomment-613145789

了解更多与https://reactjs.org/docs/strict-mode.html