2

假设我有一个类组件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';
    }
}

请任何人都可以通过示例简单解释一下吗？

4

2 回答 2

1

首先，

唯一可以分配 this.state 的地方是构造函数。

众所周知，我们之所以使用statein React 组件，是因为每当组件的状态发生更新时，都会触发组件重新渲染，以便其呈现反映组件的状态。为了利用组件提供的这种优势state，我们必须遵守该机制。

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

在此处输入图像描述

有关更多信息，您可以在此处找到它：不要直接修改状态

第二，

您的代码this.props.brother = 'sister';肯定不会工作。

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

你会得到错误：

无法添加属性兄弟，对象不可扩展

原因是，根据 React Document Props Are Read Only，他们说：

道具是只读的

无论您将组件声明为函数还是类，它都不能修改自己的 props。

...

所有 React 组件就其 props 而言必须像纯函数一样工作。

最后，

根据 React Document 的Constructor()部分，说：

如果您不初始化状态并且不绑定方法，则不需要为您的 React 组件实现构造函数。

和

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

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

于 2018-10-01T11:33:22.350 回答
0

你的两个例子都不正确。您不允许修改props组件接收的对象（文档），因此：

this.props.brother = 'sister';

两个地方都不正确。brother要么从容器中传递props，要么创建brother一个 state 属性，而不是 props 属性。

另外，在您的第二个示例中，this.state = ...不正确。this.state除了构造函数（文档）之外，您不能直接分配给任何地方。

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

于 2018-10-01T11:20:06.233 回答