В чем разница между super () и super (props) в React?

Опубликовано: 7 Августа, 2021

Прежде чем углубляться в основное различие, давайте разберемся, что такое Super () и Props, как показано ниже:

Super (): используется для вызова конструктора родительского класса. Это требуется, когда нам нужно получить доступ к некоторым переменным его родительского класса.
Props: это специальное ключевое слово, которое используется в реакциях для обозначения свойств. Используется для передачи данных от одного компонента к другому. Данные реквизита доступны только для чтения, что означает, что данные, поступающие от родителя, не должны изменяться дочерними компонентами.

Ключевое слово this: ключевое слово this в JavaScript относится к объекту, которому оно принадлежит.

Создание приложения React:

Шаг 1. Создайте приложение React, используя следующую команду:

 npx создать-реагировать-приложение имя папки

Шаг 2: После создания папки проекта, т.е. имени папки , перейдите в нее с помощью следующей команды:

cd имя папки

Структура проекта: это будет выглядеть следующим образом.

Структура проекта

Пример Super (): простой компонент, демонстрирующий использование функции Super () .

Имя файла-App.js:

Javascript

 import React from 'react'
 
class MyComponent extends React.Component {
  constructor(props) {
    super ()
    console.log( this .props) // Undefined
    console.log(props) // Defined Props Will Be Logged
  }
  
render() {
    return <div>Hello { this .props.message}</div>; // Defined
  }
 }
 
export default MyComponent; 

Шаг для запуска приложения: запустите приложение, используя следующую команду из корневого каталога проекта:

 npm start

Вывод: Теперь откройте браузер и перейдите по адресу http: // localhost: 3000 / , вы увидите следующий вывод:

Объяснение: Здесь, когда мы не используем props в super (), тогда при выполнении c onsole.log (this.props) в консоли мы получим неопределенное сообщение, потому что мы используем this.props внутри конструктора. Но если мы просто console.log (props), это даст нам правильное сообщение в консоли на веб-странице.

Пример Super (props): простой компонент, демонстрирующий использование функции Super (props) .

Имя файла-App.js:

Javascript

 import React from 'react'
 
class MyComponent extends React.Component {
  constructor(props) {
    super (props)
    console.log( this .props) // {name:'Bob' , .....} Props Will Be Logged
  }
 
  render() {
    return <div>Hello { this .props.message}</div>; // defined
  }
 }
 
export default MyComponent; 

 npm start

Вывод: Теперь откройте браузер и перейдите по адресу http: // localhost: 3000 / , вы увидите следующий вывод:

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

 Примечание. Внешний конструктор () Оба будут отображать одинаковое значение для 'this.props'

JavaScript Picked

В чем разница между super () и super (props) в React?

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ