在React / React Native中，使用构造函数和state = {}有什么区别？

Question

我曾看到过两种

export default class LoginScreen extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      loading: false,
      loggedIn: false,
    }
  }
}

并且

export default class LoginScreen extends React.Component {
  state = {
    loading: false,
    loggedIn: false,
  }
}

什么情况下使用两者？有什么优缺点吗？哪种更好的做法？

- David Schumann

Answer 1

当你想要将 props 数据保存到 state 中时，请使用构造函数。

export default class LoginScreen extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      loading: props.loading,
      loggedIn: props.loggedIn,
    }
  }
}

否则，您可以直接为硬编码数据设置state

export default class LoginScreen extends React.Component {
  state = {
    loading: false,
    loggedIn: false,
  }
}

- Piyush Dhamecha

---

将props复制到state中被官方文档视为反模式：https://reactjs.org/docs/react-component.html#constructor - Remi

@Remi，请阅读这段话：“只有在您有意忽略属性更新时才使用此模式。”，您可以将props存储到状态中作为默认值或初始值。 - Piyush Dhamecha

Answer 2

在这两种情况下，性能是相同的，所以只是个人偏好的问题。在类外定义状态比在构造函数内部定义状态要新一些，因此我建议您使用显式状态定义。

- Nagarjun Prasad