Публикации по теме 'higher-order-components'
Что такое компонент высшего порядка?
Подробное объяснение системы React для повторного использования логики компонентов.
Вы когда-нибудь работали с кодовой базой или просматривали учебное пособие в Интернете и сталкивались с чем-то похожим на это:
export default withResponsive(Home)
Что ж, тогда вы уже столкнулись с Компонентой более высокого порядка, осознали вы это или нет.
Компонент более высокого порядка (сокращенно HOC) - это способ React наделять несколько компонентов повторяющимися функциями или поведением без..
Более высокого порядка
Мне всегда было интересно писать о высокоуровневых функциях и высокоуровневых компонентах в JavaScript, но мне не хватало возможности создавать значимые функции в моих проектах. Функция высшего порядка принимает функцию в качестве аргумента или возвращает функцию как функцию. Компонент более высокого порядка - это функция, которая принимает компонент и возвращает новый компонент. В своем стремлении создавать приложения React Native я наткнулся на необходимость создания повторно..
Замените React HOC на хуки
Это необходимо?
React применяет парадигму декларативного программирования, что делает его таким мощным и замечательным. Применение этой парадигмы также делает React известным своей скоростью благодаря тому, как он взаимодействует с DOM (мы просто описываем JSX, а React отображает то, что мы хотим видеть).
Функции высшего порядка
HOF — важная концепция функционального программирования.
В JavaScript функции являются объектами первого класса, что означает, что они могут быть..
Создание согласованных форм реакции с использованием компонента более высокого порядка
Формы могут быть сложной частью приложения React. Хотя было бы неплохо иметь единый способ создания формы, формы также должны быть настраиваемыми. Формы могут иметь разные стили, использовать разные методы проверки и отправляться по-разному (например, в конечную точку API или обычную отправку формы). В нашем приложении мы испробовали несколько способов структурирования форм, и теперь каждая форма обрабатывает эти проблемы немного по-своему. Мы решили придумать решение, которое можно было..
Компоненты высшего порядка в React
Используйте аналогичную логику в своем компоненте React.
Введение
Компонент более высокого порядка дает нам возможность использовать аналогичную логику в разных компонентах React без необходимости повторять один и тот же код снова и снова. Чтобы разбить его, HOC - это просто функция, которая принимает компонент и возвращает другой компонент.
Как говорится в документации React,
Компонент более высокого порядка (HOC) - это прикладная техника в React для повторного..
Мой любимый шаблон проектирования React: сгруппированные слои компонентов
Я был немного одержим оптимизацией структуры папок и иерархии компонентов моих приложений React и, наконец, пришел к решению, которым я вполне доволен.
Компонент Ответственность
Всякий раз, когда я создаю или изменяю Компонент, я постоянно оцениваю и переоцениваю его ответственность. Вот некоторые из них:
Управлять внутренним состоянием Предоставление методов жизненного цикла компонентов Подключитесь к хранилищу Redux (или аналогичной библиотеке управления состоянием) Рендер..
Вопросы по теме 'higher-order-components'
Реакция: можно ли вызвать компонент более высокого порядка внутри компонента-контейнера?
В моей кодовой базе есть компонент высшего порядка (HOC), который я использую для добавления всех функций проверки ввода к данному компоненту. Он отлично работает при использовании на определенном компоненте, например...
let NameInput =...
804 просмотров
schedule
11.09.2023
Преобразование миксинов ES5 в компоненты более высокого порядка
В своем проекте я пытаюсь избавиться от всех примесей и заменить их HOC. Я застрял, используя ES5 в данный момент.
export default React.createClass({
mixins: [SomeAsyncMixin],
data: {
item1: {
params: ({params, query}) => {...
317 просмотров
schedule
01.04.2022
TypeScript `typeof React.Component` не расширяет интерфейс? Проблема с определением компонента более высокого порядка
Я создаю компонент более высокого порядка, чтобы обернуть компонент, расширяющий интерфейс:
interface ClickOutsideInterface {
onClickOutside: (e: Event) => void
}
Созданная мной фабрика ожидает React.ComponentClass реализации...
1929 просмотров
schedule
27.12.2023
Функции недействительны в качестве дочерних React. Это может произойти, если вы вернете компонент вместо отрисовки.
Я написал компонент более высокого порядка:
import React from 'react';
const NewHOC = (PassedComponent) => {
return class extends React.Component {
render(){
return (
<div>...
161368 просмотров
schedule
31.05.2024
Реакция: всегда ли дочерние элементы перерисовываются, когда родительский компонент перерисовывает?
Насколько мне известно, если родительский компонент выполняет повторный рендеринг, то все его дочерние элементы будут повторно выполнять рендеринг, ЕСЛИ они не реализуют shouldComponentUpdate() . Я привел пример , где это не похоже на правду.
У...
13298 просмотров
schedule
22.11.2022
Тестирование HOC с помощью Recompose
У меня возникли некоторые проблемы с проверкой того, что опора срабатывает на моем HOC.
import { connect } from 'react-redux';
import { compose, lifecycle } from 'recompose';
import { fetchCurrentUser } from '../../actions/users';
import {...
943 просмотров
schedule
17.03.2023
Компоненты, возвращаемые из компонентов более высокого порядка, называются замыканиями?
У меня есть компонент более высокого порядка FormBuilder , например:
const FormBuilder = (WrappedComponent) => {
const name = 'bob';
return class HOC extends React.Component {
render() {
return (
<div>...
499 просмотров
schedule
02.06.2023
Компонент React Higher Order ожидает введенную поддержку при использовании, вызывает ошибку TypeScript
Я сделал HOC, который предоставляет реквизиты для сетевых вызовов переданному компоненту, поэтому индикаторы загрузки сетевых вызовов, сообщения об ошибках и т. д. могут обрабатываться HOC.
Код работает как положено машинописи не устраивает.
В...
261 просмотров
schedule
08.08.2022
React Navigation + компонент более высокого порядка (HOC) для проверки аутентификации / защищенных маршрутов
У меня проблема, когда я использую компонент более высокого порядка для проверки подлинности пользователя (checkAuth). Моя проблема в том, что маршрут кажется защищенным, поскольку он не отображается на экране, но он загружает навигацию по нижней...
1011 просмотров
schedule
05.03.2023
требуются реквизиты из базового компонента, чтобы быть доступными в компоненте более высокого порядка
У меня есть компонент более высокого порядка, который я использую для обертывания базового компонента следующим образом:
function Map() {
return (
<GoogleMap
defaultZoom={10}
defaultCenter={{
lat: 45.421532,...
28 просмотров
schedule
03.10.2022
Как я могу избежать ненужного повторного рендеринга компонента HOC, когда компонент параметра отображается в ReactJS с реагирующим маршрутизатором
Я использую HOC (здесь компонент макета), чтобы обернуть свой пользовательский компонент. Компонент макета содержит заголовок и боковую панель. При нажатии на ссылку будет отображаться соответствующий компонент. Но моя проблема в том, что с каждым...
307 просмотров
schedule
16.07.2023
