Если я могу получить доступ и использовать this.props & this.state напрямую, то почему я должен вызывать их через конструктор 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

Во-первых,

Единственное место, где вы можете назначить this.state - это конструктор.

Как мы все знаем, причина, по которой мы используем state в компоненте React каждый раз, когда состояние компонента обновляется, он запускает повторную визуализацию компонента, чтобы его представление отражало состояние компонента.Чтобы использовать это преимущество, предоставляемое компонентом state, мы должны подчиниться механизму.

Более того, процесс повторной визуализации происходит только тогда, когда мы обновляем состояние компонента соответствующим образом, который используетsetState() method.

Дополнительную информацию вы можете найти здесь: Не изменять состояние напрямую

Во-вторых,

Ваш код this.props.brother = 'sister'; точно не будет работать.

Это демо: https://codesandbox.io/s/j354ypk645

Вы получите ошибку:

Невозможно добавить свойство брат, объект не является расширяемым

Причина в том, что согласно документу React объекты доступны только для чтения , они сказали:

Реквизиты доступны только для чтения

Независимо от того, объявляете ли вы компонент как функцию или класс, он никогда не должен изменять свои реквизиты.

...

Все компоненты React должны действовать как чистые функции по отношению к своим реквизитам.

Наконец,

Согласно документу React, раздел Constructor () говорит:

Если вы не инициализируете состояние и не связываете методы, вы неНе нужно реализовывать конструктор для вашего компонента React.

И

Конструктор для компонента React вызывается перед его монтированием.При реализации конструктора для подкласса React.Component вы должны вызывать super (props) перед любым другим оператором.В противном случае this.props будет неопределенным в конструкторе, что может привести к ошибкам.

Что ж, тогда вы можете использовать this.props.brother, чтобы получить значение этого свойства, которое передается изродительский компонент.Тем не менее, это только для get, вы не должны set значение для него.Причина была объяснена во второй части этого ответа.

Answer 2

Ни один из ваших примеров не верен.Вам не разрешено изменять объект props, который получает ваш компонент ( документация ), поэтому:

this.props.brother = 'sister';

неверно в обоих местах.Либо передайте brother реквизит из контейнера, либо сделайте brother свойством состояния, а не свойством реквизита.

Отдельно во втором примере this.state = ... неверно.Вам не разрешено напрямую назначать this.state где-либо, кроме конструктора ( документация ).

Относительно того, почему вы должны иметь super(props): это потому, что именно это настраивает this.props, а платформа React полагается на то, что вы делаете это и никогда не меняете props напрямую (ни к какому объекту относится свойство props, ни к состоянию этого объекта).