Компоненты на основе классов ReactJS

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

Компоненты на основе классов React - это хлеб с маслом большинства современных веб-приложений, созданных на ReactJS. Эти компоненты представляют собой простые классы (состоящие из нескольких функций, которые добавляют функциональность приложению). Все компоненты на основе классов являются дочерними классами для класса Component ReactJS.

Пример: программа для демонстрации создания компонентов на основе классов. Создайте приложение React и отредактируйте App.js как:

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

javascript

 import React from "react" ;
 
class App extends React.Component {
  render() {
    return <h1>GeeksForGeeks</h1>;
  }
 }
 
export App; default 

Выход:

После объявления компонента его можно использовать в других компонентах. Программа для демонстрации использования компонентов на основе классов в других компонентах.

Пример: откройте файл App.js и замените код приведенным ниже кодом.

javascript

 import React from "react" ;
 
class Sample extends React.Component {
  render() {
    return <h1>A Computer Science Portal For Geeks</h1>;
  }
 }
 
class App extends React.Component {
  render() {
    return <Sample />;
  }
 }
 
export App; default 

Выход:

Основная особенность компонентов на основе классов, которая отличает их от функциональных компонентов, заключается в том, что они имеют доступ к состоянию, которое определяет текущее поведение и внешний вид компонента. Это состояние можно изменить, вызвав функцию setState () . Одна или несколько переменных, массивов или объектов, определенных как часть состояния, могут быть изменены одновременно с помощью функции setState () .

Пример: программа для демонстрации использования состояния в компонентах на основе классов. Откройте файл App.js и замените код приведенным ниже кодом.

javascript

 import React from "react" ;
 
class App extends React.Component {
  constructor(props) {
    super (props);
    this .state = { change: true };
  }
  render() {
    return (
      <div>
        <button
          onClick={() => {
            this .setState({ change: ! this .state.change });
          }}
        >
          Click Here!
        </button>
        { this .state.change ? (
          <h1>Welcome to GeeksforGeeks</h1>
        ) : (
          <h1>A Computer Science Portal for Geeks</h1>
        )}
      </div>
    );
  }
 }
 
export App; default 

Выход:

Данные передаются другим компонентам с помощью props. Свойства работают одинаково для всех компонентов в ReactJS, независимо от того, основаны они на классах или функциональны. Свойства всегда передаются от родительского компонента к дочернему компоненту. ReactJS, как правило, не позволяет компоненту изменять свои собственные свойства. Единственный способ изменить реквизиты - это изменить реквизиты, передаваемые от родительского компонента дочернему компоненту. Обычно это делается путем передачи ссылки на функцию в родительском компоненте, которая изменяет свойства, передаваемые дочернему компоненту.

Пример: программа для демонстрации использования свойств в компонентах на основе классов. Откройте файл App.js и замените код приведенным ниже кодом.

javascript

 import React from "react" ;
 
class App extends React.Component {
  render() {
    return <h1>{ this .props.data}</h1>;
  }
 }
 
class propsExample extends React.Component {
  constructor(props) {
    super (props);
    this .state = { change: true };
  }
  render() {
    return (
      <div>
        <button
          onClick={() => {
            this .setState({ change: ! this .state.change });
          }}
        >
          Click Here!
        </button>
        { this .state.change ? (
          <Pass data= "Welcome to GeeksforGeeks" />
        ) : (
          <Pass data= "A Computer Science Portal for Geeks" />
        )}
      </div>
    );
  }
 }
 
export App; default 

Выход:

Компоненты на основе классов имеют доступ к функциям жизненного цикла, таким как componentWillMount () , componentDidMount () , componentWillReceiveProps () , componentWillUpdate () , shouldComponentUpdate () , render () и componentWillUnmount () ;. Эти функции жизненного цикла вызываются на разных этапах жизненного цикла и используются для различных целей, таких как изменение состояния или выполнение некоторой работы (например, выборка данных из внешнего API). Их также называют крючками жизненного цикла .

Пример: программа для демонстрации использования хуков жизненного цикла. Откройте файл App.js и замените код приведенным ниже кодом.

javascript

 import React from "react" ;
 
class App extends React.Component {
  constructor(props) {
    super (props);
    this .state = { text: "Welcome!" };
  }
 
  componentWillMount() {
    this .setState({
      text: "GeeksforGeeks" ,
    });
  }
 
  render() {
    return <h1>{ this .state.text}</h1>;
  }
 }
 
export App; default 

Выход:

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

JavaScript

Компоненты на основе классов ReactJS

javascript

javascript

javascript

javascript

javascript

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