Компонент высшего порядка (HOC) — это продвинутая техника в React.js. Я пытаюсь объяснить это очень простыми словами с примерами.
Теперь мы должны знать, что такое HOC и какие проблемы можно решить в реальной жизни с помощью HOC?
Компонент высшего порядка — это функция, которая получила компонент и возвращает новый компонент. Сейчас это может сбить с толку, но на примере будет ясно. HOC помогает разработчикам повторно использовать логику компонента. Это также помогает избежать проблемы сверления опор.
Теперь мы попытаемся предположить реальную проблему, а также попытаться решить ее с помощью HOC.
У ученика и учителя разные обязанности в школе. Но они должны приходить в школу каждый день. Мы хотим подсчитать, сколько дней в месяц приходят учитель и ученик.
Чтобы решить эту проблему, мы можем создать две отдельные кнопки счетчика, когда они приходят в школу, нажмите кнопку.
Для этого мы будем использовать HOC в коде. Пошагово объясню для начинающих.
Создайте новый проект реакции npx create-react-app hoc. Затем создайте два файла в папке src: student.js и Teacher.js. Создайте новую папку в папке src с именем HOC и создайте файл с именем activity.js в папке HOC. Теперь наша среда готова. (Вы можете изменить имя файлов и папок. Я создаю эту среду в соответствии с нашей реальной проблемой)
Заходим в файл student.js и создаем функциональный компонент. Напишите код для кнопки, которая показывает, присутствует ли учащийся или нет. Если студент присутствует, мы нажимаем на эту кнопку, и счетчик считает это.
//student.js
import React from 'react';
const Student = () => {
return (
<div>
//counter
<h3>Student present count:</h3>
//button
<button>Student present</button>
</div>
);
};
export default Student;
Пишем такой же код в файле Teacher.js
//teacher.js
import React from 'react';
const Teacher = () => {
return (
<div>
<h3>Teacher present count:</h3>
<button>Teacher present</button>
</div>
);
};
export default Teacher;
Не забудьте импортировать файлы student.js и Teacher.js в app.js.
//app.js
import Student from './pages/Student';
import Teacher from './pages/Teacher';
function App() {
return (
<div>
<Student/>
<Teacher/>
</div>
);
}
export default App;
Теперь запустите проект. Напишите npm start на своем терминале.
Кнопки не работают. Итак, нам нужно написать код для кнопок.
Мы создаем состояние для сохранения значения счетчика и пишем функцию для функциональности кнопки.
Объявить состояние с именем настоящее. Это состояние сохраняет значение счетчика. presentHadler — это обработчик событий, содержащий функциональные возможности кнопки.
Теперь, если ученик приходит в школу каждый день, то через месяц общее количество будет 30. Очень простая логика, правда?
//student.js
import React, { useState } from "react";
const Student = () => {
// declare a state to save value
const [present, setPresent] = useState(0);
//button functionality
const presentHandler = () => {
setPresent(present + 1);
};
return (
<div>
<h3>Student present count:{present}</h3>
<button onClick={presentHandler}>Student present</button>
</div>
);
};
export default Student;
Та же логика применима и к учителю.
//teacher.js
import React, { useState }from 'react';
const Teacher = () => {
// declare a state to save value
const [present, setPresent] = useState(0);
//button functionality
const presentHandler = () => {
setPresent(present + 1);
};
return (
<div>
<h3>Teacher present count:{present}</h3>
<button onClick={presentHandler}>Teacher present</button>
</div>
);
};
export default Teacher;
Изначально наша задача решена. Но подумайте, если мы хотим знать посещаемость каждого сотрудника в школе, тогда мы должны написать обработчик событий состояния и кнопки в каждом файле. Это очень сложная и скучная задача для разработчиков.
HOC предлагает решение этой проблемы.
Как я упоминал ранее, HOC — это функция. Итак, мы пишем функцию с именем activity в файле activity.js, а также пишем функциональный компонент с именем Staff в функции активности. Затем мы пишем общие коды в компонентах Staff. Я объясню коды построчно. Не о чем беспокоиться.
//activity.js
import React, { useState } from "react";
const activity = (Member) => {
const Staff = () => {
const [present, setPresent] = useState(0);
const presentHandler = () => {
setPresent(present + 1);
};
return (
<Member present={present} presentHandler={presentHandler}/>
);
};
return Staff;
};
export default activity;
Напишите функцию с именем Activity. Член является параметром этой функции. Участник представляет компоненты, подключенные к функции HOC. В этом случае Member представляет компоненты ученика и учителя. (Как компоненты студента и преподавателя связаны с функцией HOC, я объясню в следующем разделе этого блога). Затем создайте функциональный компонент в функции активности и напишите функцию состояния и presentHandler (части вашего кода, которые можно использовать повторно). Отправьте значение состояния и обработчик событий в качестве реквизита члену. Теперь компоненты ученика и учителя могут получить доступ к этим данным. Верните функциональный компонент в основную функцию.
Пришло время соединить компонент ученика и учителя с функцией HOC.
Просто импортируйте файл HOC в студенческий компонент и добавьте этот файл в строку экспорта по умолчанию.
//student.js
import React from "react";
import activity from '../Hoc/activity';
const Student = (props) => {
return (
<div>
<h3>Student present count:{props.present}</h3>
<button onClick={props.presentHandler}>Student present</button>
</div>
);
};
export default activity(Student);
Файл Teacher.js подключается к функции HOC.
//teacher.js
import React from 'react';
import activity from '../Hoc/activity'
const Teacher = (props) => {
return (
<div>
<h3>Teacher present count:{props.present}</h3>
<button onClick={props.presentHandler}>Teacher present</button>
</div>
);
};
export default activity(Teacher);
Это сделано. Мы пишем состояние и обработчик событий в файле активности. Но компоненты ученика и учителя могут получить доступ к этой логике.
Это компонент высшего порядка. Если какие-либо другие компоненты отправляют реквизиты компоненту ученика и учителя, они не могут получить это напрямую. Эти данные (реквизиты) поступают в функцию активности, функция активности отправляет эти данные в качестве реквизита компонентам. Давайте перейдем к коду, чтобы изучить это.
Из app.js мы отправляем некоторые реквизиты компонентам ученика и учителя.
//app.js
import Student from './pages/Student';
import Teacher from './pages/Teacher';
function App() {
return (
<div>
<Student fee="fee"/>
<Teacher salary="salary"/>
</div>
);
}
export default App;
Теперь функция активности получает эти реквизиты.
//activity.js
import React, { useState } from "react";
const activity = (Member) => {
const Staff = (props) => {
const [present, setPresent] = useState(0);
const presentHandler = () => {
setPresent(present + 1);
console.log(present);
};
return (
<Member present={present} presentHandler={presentHandler} {...props}/>
);
};
return Staff;
};
export default activity;
Штатный функциональный компонент получает реквизит, деструктурирует реквизит и отправляет дочерним компонентам. Теперь компоненты ученика и учителя могут получить доступ к своим собственным данным реквизита.
// student.js
import React from "react";
import activity from '../Hoc/activity';
const Student = (props) => {
return (
<div>
<h3>Student present count:{props.present}</h3>
<h6>Student responsibility:{props.fee}</h6>
<button onClick={props.presentHandler}>Student present</button>
</div>
);
};
export default activity(Student);
учитель.js
//teacher.js
import React from 'react';
import activity from '../Hoc/activity'
const Teacher = (props) => {
return (
<div>
<h3>Teacher present count:{props.present}</h3>
<h6>Teacher responsibility:{props.salary}</h6>
<button onClick={props.presentHandler}>Teacher present</button>
</div>
);
};
export default activity(Teacher);
Я очень надеюсь, что вы поняли тему. Пожалуйста, попробуйте написать этот код в вашем редакторе. Это будет более полезно для вас.
Git-репозиторий: https://github.com/alaminsahed/react-advance/tree/main/hoc
