В React с ES6 конструктор (prop) не вызывает ошибку. Зачем?

Question

Правильный код, который я нашел повсюду, был следующим:

class App extends Component{
   constructor(props){
      super(props)
      //more code...
   }
}

, но я набрал props как prop.Тем не менее код работал нормально и ошибок не возникало.Хотя я не мог понять, почему это так.

Answer 1

Конструктор - это функция JavaScript. Аргументы, которые он принимает, являются позиционными аргументами. Это означает, что значения определяются их положением в списке аргументов, а не их именем. Javascript не имеет именованных параметров.

Первый параметр constructor из React.Component содержит реквизиты, которые были переданы ему при создании (второй - контекст). Неважно, какое имя вы используете для параметра внутри вашей реализации.

Answer 2

Параметр и имя аргумента не обязательно должны совпадать.Поэтому, несмотря на то, что вы передаете реквизиты, вы можете назвать это «myPassedVariables», «prop» или что-то еще, что вы считаете подходящим.Однако я бы использовал Typescript, который сокращает весь путь от:

class Person {
    private firstName: string;
    private lastName: string;

    constructor(firstName: string, lastName: string) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
}

До:

class Person {
    constructor(private firstName: string, private lastName: string) {
    }
}

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

Answer 3

constructor - это функция в JavaScript.Передача props в конструктор аналогична передаче переменной в функцию.Это похоже на то, как вы пишете функцию

let foo = ( bar ) => bar*bar 

, и вы можете вызывать функцию как

foo(someOtherVariable) 

, и вам не нужно делать foo(bar) самой

Answer 4

Конструктор является функцией, а:

constructor(props) {
    super(props)
}

является объявлением function.Таким образом, имя переменной, переданной constructor() в качестве параметра, просто имеет значение внутри него.Вы можете передать любую информацию как parameter, и она с ней справится.

Вы можете определить constructor() как:

constructor(foo) {
    super(foo)
}

И он будет работать так же, как стандартное определение.

Оба вызова constructor() ниже работают наточно так же, не имеет значения, что вы передаете как parameter.

constructor('Foo')
constructor({ bar: 'Bar', foo: 'Foo'})

Answer 5

Имя переменной локально для области действия constructor(), поэтому не имеет значения, как вы ее называете.