在构造函数中访问道具的正确方法是什么？

Question

在构造函数中访问 props 的正确方法是什么？是的，我知道在 React 文档中是这样说的

在实现 React.Component 子类的构造函数时，你 应该在任何其他语句之前调用 super(props)。否则， this.props 将在构造函数中未定义，这可能会导致错误

更清楚地说，如果我们可以在构造函数中使用道具，为什么我们需要this.props

class MyComponent extends React.Component {    
    constructor(props) {
        super(props)

        console.log(props)
        // -> { something: 'something', … }
        // absolutely same
        console.log(this.props)
        // -> { something: 'something', … }
    }
}

在某些情况下使用props 而不是this.props ？

Answer 1

正确的方法是 - 不要在你的构造函数中使用 props - 只是发送到一个父级。

但两种方式都可以。

因此，在构造函数中读取 props 有一种特殊情况，它是从 props 设置的默认状态。

在调用 super(props) 之后的构造函数中 this.props 和 props 等于。 this.props = props.

它只是关于你喜欢什么，我更喜欢总是打电话给this.props。

例子：

   constructor(props) {
        super(props)
        this.state = {
           isRed: this.props.color === 'red',
        }
   }

请确保您在构造函数的第一行调用super(props)。

Answer 2

此建议的存在是为了防止您通过从构造函数调用对象上的其他方法来引入错误，这些方法依赖于this.props。您不想明确地将道具传递给这些。

例如以下将是一个错误，因为您在super 之前调用了doStuff

class MyComponent extends React.Component {    
    constructor(props) {
        this.doStuff()
        super(props)
    }

    doStuff() {
      console.log("something is: " + this.props.something)
    }
}

Answer 3

this.props 和props 在构造函数中可以互换，因为this.props === props，只要将props 传递给super。使用this.props 可以立即检测到错误：

constructor() {
  super();
  this.state = { foo: this.props.foo }; // this.props is undefined
}

一致使用this.props 可以更轻松地重构构造函数主体：

constructor(props) {
  super(props);
  this.state = { foo: this.props.foo };
}

到

state = { foo: this.props.foo };

只有this. 需要删除。

还有typing problems with props in TypeScript，这使得this.props更适合类型化组件。