Публикации по теме 'higher-order-components'
JavaScript ES6 для React: функция, возвращающая другую функцию
От каррирования в JavaScript до компонента высшего порядка React.
Я начал изучать React в эпоху после ES6, и, читая различные базы кода React, меня больше всего смущают две вещи:
Цепочка стрелочных функций ES6. Например: const chainedAddition = a => b => console.log(a+b) (*) Пары скобок рядом друг с другом, часто встречающиеся в сигнатуре компонентов React более высокого порядка: const Batman = connect(money, moreMoney)(BruceWayne)
Это примеры функций, возвращающих..
Как создать компонент аккордеона в React с использованием компонентов высшего порядка (HOC)
Если вы наткнулись на этот пост, вы, вероятно, уже знаете, что такое аккордеон, и хотите реализовать эту функцию в коде. Это элемент, который складывается и расширяется, как аккордеон, верно?
Существует множество статей и руководств, которые научат вас, как реализовать простой компонент аккордеона, например, этот из freeCodeCamp: https://www.freecodecamp.org/news/build-accordion-menu-in-react -без-внешних-библиотек/»
Вы копируете и вставляете чужой код. Он отлично работает, и вы..
Упрощенное тестирование компонентов React с помощью HOC с внедрением зависимостей
В Koan есть большой React SPA , который интенсивно использует селекторы Redux . Это упрощает получение данных из нашего хранилища Redux в точном производном формате, который нам нужен, но для их работы требуется заполненное хранилище. Это нормально для производственной среды, но при написании модульных тестов компонентов обычно не требуется столько преамбулы только для проверки функциональности нашего компонента.
Чтобы решить эту проблему, мы используем шаблон в нашем коде,..
Сложенные компоненты более высокого порядка (HOC) сделаны правильно
Если вы являетесь разработчиком реакции и не знакомы с компонентами более высокого порядка (HOC), то вас ждет угощение. Если вы знакомы, вы могли столкнуться с трудностями при наложении HOC, особенно когда некоторые функции требуют ссылки на исходный компонент.
Позвольте мне показать вам код (с дополнительными комментариями), которым я действительно горжусь, надеюсь, он иллюстрирует мощь HOC. Это для нативной реакции. Я горжусь этим, потому что он позволяет мне легко переключать..
Превратить HOC в крючок очень просто!
Сначала позвольте мне начать с того, что я пришел из Angular. Когда я впервые начал заниматься реакцией на постоянной основе пару месяцев назад, я подумал, что компоненты высшего порядка (HOC) и перекомпоновка , возможно, были самыми запутанными вещами, которые я когда-либо читал (к счастью, я очень быстро к этому привык). Я действительно думаю, что я пришел, чтобы отреагировать в нужное время, потому что крючки буквально высвободились, когда я начал свое путешествие по реакции. Также *..
Шутки с компонентами высшего порядка React
В нашем проекте мы начали использовать компоненты более высокого порядка, чтобы извлечь часть бизнес-логики ™ ®, которую разделяют некоторые компоненты. Пока мы все еще работаем с чистым Flux (redux еще не был полностью разработан, когда мы начинали), поэтому мне было трудно понять, как написать спецификации jest для таких компонентов оболочки, как этот:
// TutorialWrapperHoc.js
// @flow
import React from 'react';
import UserStore from '../../core/stores/userstore';
export default..
Основы JavaScript в дикой природе
Основы JavaScript помогут вам в изучении любого нового фреймворка. Чрезвычайно важно, чтобы любой разработчик хорошо разбирался в них. Независимо от языка, основы сохраняют свою силу. Это стало более очевидным для меня, когда я начал другой проект React-Redux.
При написании этой строки кода 'экспортировать по умолчанию Rainbow(About);' , когда я работал над учебником от Net Ninja ; Я понял, что делаю замыкание. Взгляните на компонент…
import React from ‘react’;
const Rainbow..
