dir.by  
  Поиск  
Программирование, разработка, тестирование
React
Почему не используют class Component, а надо использовать обычную функцию в React приложении?
  Посмотрели 613 раз(а)    
 Почему не используют class Component, а надо использовать обычную функцию в React приложении? 
последнее обновление: 19 февраля 2025
Приложение на React состоит из компонентов.

Раньше использовали class Component.
В class Component был метод render для отрисовки приложения.

Сейчас новые React приложения рекомендуется создавать используя обычные функции (это функциональная компонента).
Пример
Когда мы нажмем на кнопку Login будет вызван мой метод onSubmit.
Мой метод onSubmit показывает на экране окно с введенной информацией.
 
Использовать Component это плохое правило.
Использовать function это хорошее правило.
Файл main.js
  JavaScript  
var React = require("react");
var ReactDOM = require("react-dom");
import { Component } from "react";

class MyApp extends Component {

     onSubmit(e) {

          alert("Hello! " + e.target.myName.value + e.target.myAge.value);
     }

     render() {
          return (
               <div>
                    <h2> Welcome </h2>
                    <form onSubmit={ this.onSubmit }>
                         <div>
                              <input type="text" name="myName" />
                         </div>
                         <div>
                              <input type="text" name="myAge" />
                         </div>
                         <div>
                              <button>Login</button>
                         </div>
                    </form>
               </div>
          );
     }
}

ReactDOM.render(
     <MyApp ></MyApp>,
     document.getElementById('my_container'));
Файл main.js
  JavaScript  
var React = require("react");
var ReactDOM = require("react-dom");

 
function MyApp() {

     const onSubmit = (e) => {

          alert("Hello! " + e.target.myName.value + e.target.myAge.value);
     }

 
     return (
          <div>
               <h2> Welcome </h2>
               <form onSubmit={ onSubmit }>
                    <div>
                         <input type="text" name="myName" />
                    </div>
                    <div>
                         <input type="text" name="myAge" />
                    </div>
                    <div>
                         <button>Login</button>
                    </div>
               </form>
          </div>
     );
 
}

ReactDOM.render(
     <MyApp ></MyApp>,
     document.getElementById('my_container'));
 
← Предыдущая тема
Создание нового веб-приложения с React с помощью Visual Studio Code. Использую: Node.js + Webpack (собираем все js файлы, библиотеки в один js файл) + Babel (расширенная js функциональность с jsx и классами) + React (пишем нашу компоненту)
 
Следующая тема →
Создаем веб-приложение "Login форма и отправка post запроса" с React | Visual Studio Code
 
Ваши Отзывы ... комментарии ...
   
Вашe имя
Ваш комментарий (www ссылки может добавлять только залогиненный пользователь)

  Объявления  
  Объявления  
 
Новое приложение React
Вариант 1
Создаем новое web приложение с React в текстовом редакторе. Библиотеку React не скачиваем, библиотеку React берем из CDN (ссылаемся на библиотеку React)
Вариант 2 (для меня лучший)
Создание нового веб-приложения с React с помощью Visual Studio Code. Использую: Node.js + Webpack (собираем все js файлы, библиотеки в один js файл) + Babel (расширенная js функциональность с jsx и классами) + React (пишем нашу компоненту)
Описание React
Почему не используют class Component, а надо использовать обычную функцию в React приложении?
Примеры
Создаем веб-приложение "Login форма и отправка post запроса" с React | Visual Studio Code
WWW сайты для изучения React
Сайты для изучения React

  Ваши вопросы присылайте по почте: info@dir.by  
Яндекс.Метрика