В чем разница между использованием конструктора и getInitialState в React?

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

Конструктор и getInitialState в React используются для инициализации состояния, но их нельзя использовать взаимозаменяемо. Разница между ними в том, что мы должны инициализировать состояние в конструкторе, когда мы используем классы ES6, и определять метод getInitialState, когда мы используем React.createClass (синтаксис ES5). Таким образом, разница между конструктором и getInitialState - это разница между самим ES6 и ES5.

Мы используем getInitialState с React.createClass, а конструктор - с React.Component.

Синтаксис:

 class App extends React.Component {
конструктор (реквизит) {
  супер (реквизит);
  this.state = {/ * начальное состояние * /};
}
}

Синтаксис:

 var App = React.createClass ({
getInitialState () {
  return {/ * исходное состояние * /};
},
});

Оба приведенных выше синтаксиса для инициализации состояния эквивалентны.

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

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

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

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

 cd имя папки

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

Инициализация состояния с помощью конструктора:

Javascript

 import {React ,Component} from 'react'
 class App extends Component{
    
  constructor(props) {
    super (props);
    this .state = {
      username: "kapilchhipa4" ,
      password: "12345678"
    }
  }
   
  render() {
    return (
      <div>
      <h3>Username: { this .state.username}</h3>
      <h3>Password: { this .state.password}</h3>
      </div>
      )
  }
 }
   
   
export App default 

Инициализировать состояние с помощью метода getInitialState:

Примечание: нам нужно установить библиотеку для использования метода createReactClass, используя следующую команду:

 npm install create-react-class --save

Javascript

 import { React } from 'react'
 
var App = React.createClass({
 
  getInitialState() {
    return {
      username: 'kapilchhipa4' ,
      password: '12345678'
    };
  },
 
  render() {
    return (
      <div>
        <h3>Username: { this .state.username} </h3>
      </div>
    )
  }
 });
 
   
   
export App default 

Выход:

JavaScript Picked

В чем разница между использованием конструктора и getInitialState в React?

Javascript

Javascript

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