0 added
0 removed
Original
2026-01-01
Modified
2026-03-10
1
<p>Теги: react, компоненты высшего порядка</p>
1
<p>Теги: react, компоненты высшего порядка</p>
2
<p>Приходилось ли вам использовать компоненты высшего порядка (КВП)? К примеру, та же функция Redux connection() возвращает компонент высшего порядка. Но что же из себя представляют эти компоненты?</p>
2
<p>Приходилось ли вам использовать компоненты высшего порядка (КВП)? К примеру, та же функция Redux connection() возвращает компонент высшего порядка. Но что же из себя представляют эти компоненты?</p>
3
<p>Если взять документацию React, мы прочитаем, что компонент высшего порядка представляет собой функцию, принимающую компонент и возвращающий новый компонент.</p>
3
<p>Если взять документацию React, мы прочитаем, что компонент высшего порядка представляет собой функцию, принимающую компонент и возвращающий новый компонент.</p>
4
<p>Давайте вернемся к функции connect() и посмотрим на фрагмент кода:</p>
4
<p>Давайте вернемся к функции connect() и посмотрим на фрагмент кода:</p>
5
<p>В процессе вызова connect() мы получаем компонент высшего порядка, который можно применить для того, чтобы обернуть компонент. Далее мы передаем наш компонент в КВП, а потом начинаем использовать уже возвращаемый им компонент. Таким образом, КВП предоставляет разработчику возможность<strong>абстрагировать общую для компонентов логику в единый главный компонент</strong>.</p>
5
<p>В процессе вызова connect() мы получаем компонент высшего порядка, который можно применить для того, чтобы обернуть компонент. Далее мы передаем наш компонент в КВП, а потом начинаем использовать уже возвращаемый им компонент. Таким образом, КВП предоставляет разработчику возможность<strong>абстрагировать общую для компонентов логику в единый главный компонент</strong>.</p>
6
<p>Компоненты высшего порядка можно использовать и при авторизации. Возьмем простую ситуацию: мы пишем код для аутентификации в каждом компоненте, которому эта аутентификация нужна. Такой код, разумеется, очень быстро раздуется до весьма неприглядных размеров.</p>
6
<p>Компоненты высшего порядка можно использовать и при авторизации. Возьмем простую ситуацию: мы пишем код для аутентификации в каждом компоненте, которому эта аутентификация нужна. Такой код, разумеется, очень быстро раздуется до весьма неприглядных размеров.</p>
7
<p>На примере<a>этого образца кода</a>можно увидеть, как<strong>запутанная логика и масса повторяющегося кода преобразуются с применением компонентов высшего порядка</strong>. Причем сами компоненты могут оставаться весьма простыми даже в том случае, если с их помощью будет осуществляться аутентификация.</p>
7
<p>На примере<a>этого образца кода</a>можно увидеть, как<strong>запутанная логика и масса повторяющегося кода преобразуются с применением компонентов высшего порядка</strong>. Причем сами компоненты могут оставаться весьма простыми даже в том случае, если с их помощью будет осуществляться аутентификация.</p>
8
<p>В нашем примере компонент под названием<strong>AuthWrapper</strong>включает в себя всю логику аутентификации. И все, что он выполняет, - так это смотрит на свойство<strong>isLoggedIn</strong>, возвращая<strong>WrappedComponent</strong>либо тег</p>
8
<p>В нашем примере компонент под названием<strong>AuthWrapper</strong>включает в себя всю логику аутентификации. И все, что он выполняет, - так это смотрит на свойство<strong>isLoggedIn</strong>, возвращая<strong>WrappedComponent</strong>либо тег</p>
9
<p>в зависимости от значения, присвоенного свойству.</p>
9
<p>в зависимости от значения, присвоенного свойству.</p>
10
<p>Таким образом, компоненты высшего порядка довольно полезны, ведь они позволяют<strong>повторно использовать код</strong>.</p>
10
<p>Таким образом, компоненты высшего порядка довольно полезны, ведь они позволяют<strong>повторно использовать код</strong>.</p>
11
<p><em>По материалам https://www.freecodecamp.org/news/these-are-the-concepts-you-should-know-in-react-js-after-you-learn-the-basics-ee1d2f4b8030/.</em></p>
11
<p><em>По материалам https://www.freecodecamp.org/news/these-are-the-concepts-you-should-know-in-react-js-after-you-learn-the-basics-ee1d2f4b8030/.</em></p>
12
12