javascript - 如果我可以直接访问和使用 this.props 和 this.state 那么为什么我必须在 React Native 中通过构造函数中的 super(props) 调用它们？

Question

假设我有一个类组件 myPapa，其中没有使用任何构造函数 或 >super():

class myPapap extends React.Component{
    render(){
        this.state          = {mom: 'dad'};
        this.props.brother  = 'sister';
        alert(this.state + ' ' + this.props);
        return(
            <View>
                Something ...
            </View>
        );
    }
}

哪个工作完美并发出警报:

[object Object][object Object]

这意味着我们可以调用 this.props 和 this.state 并且它正在工作。所以，如果这件事有效，那么为什么我必须这样做:

class myPapap extends React.Component{
    constructor(props){
        super(props);
        this.state          = {mom: 'dad'};
        this.props.brother  = 'sister';
    }
}

谁能用例子简单解释一下？

Answer 1

首先，

The only place where you can assign this.state is the constructor.

众所周知，我们在 React 组件中使用 state 的原因是每当组件的状态更新时，它会触发组件重新渲染，使其呈现反射(reflect)组件的状态。为了利用组件的 state 提供的这一优势，我们必须遵守该机制。

此外，只有当我们使用 setState() 方法以适当的方式更新组件的状态时，才会发生重新渲染的过程。

有关更多信息，您可以在这里找到它:Do Not Modify State Directly

其次，

您的代码 this.props.brother = 'sister'; 肯定无法正常工作。

这是演示:https://codesandbox.io/s/j354ypk645

你会得到错误:

Cannot add property brother, object is not extensible

原因是，根据 React 文档 Props Are Read Only ，他们说:

Props are Read-Only

Whether you declare a component as a function or a class, it must never modify its own props.

...

All React components must act like pure functions with respect to their props.

最后，

根据 React 文档，第 Constructor() 节, 说:

If you don’t initialize state and you don’t bind methods, you don’t need to implement a constructor for your React component.

和

The constructor for a React component is called before it is mounted. When implementing the constructor for a React.Component subclass, you should call super(props) before any other statement. Otherwise, this.props will be undefined in the constructor, which can lead to bugs.

那么，您可以使用 this.props.brother 来检索从父组件传递的此属性的值。但是，这仅适用于 get，您不应该为它set 一个值。原因已在本答案的第二部分中进行了解释。