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

Question

假设我有一个 class 组件 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

你的例子都不正确。您不能修改组件接收到的 props 对象 (documentation)，因此：

this.props.brother = 'sister';

两处都不正确。从容器传递 brother 道具，或者使 brother 成为状态属性，而不是道具属性.

另外，在您的第二个示例中，this.state = ... 不正确。除了构造函数 (documentation).

之外的任何地方都不允许直接分配给 this.state

关于为什么你必须有 super(props)：这是因为那是设置 this.props 的原因，而 React 框架依赖于你的设置并且永远不会直接更改 props（无论是什么props 属性所指的对象，或该对象的状态）。

Answer 2

首先，

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

众所周知，我们在React组件中使用state的原因是每当组件的状态更新时，它会触发组件重新渲染，使其呈现反映组件的状态状态。为了利用组件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 一个值。这个答案的第二部分已经解释了原因。

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

If i can access and use the this.props & this.state directly then why i have to call them via the super(props) in constructor in react native?

javascript

ecma

ecmascript-6

reactjs

react-native

首先，

其次，

最后，