Компонент высшего порядка (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