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,
  }
}

两者的用例是什么？有优点/缺点吗？这是一个更好的做法吗？

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,
  }
}

Answer 2

两种情况下的表现相同，所以这只是个人偏好的问题。在类之外定义状态恰好是一个比在构造函数中定义它更新的实现，所以我建议你使用显式状态定义。

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

2 个答案: