Как лидер, работающий с несколькими разработчиками Bootcamp, вступающих в свои второе или третьего года в качестве профессиональных разработчиков JavaScript, у нас есть определенная ответственность за их руководство и ввести понятия компьютерной науки, что они, возможно, пропустили в своем сжатом образовании.
Существует естественный интерес для уточнения своего ремесла, погрузив в функциональное программирование. После прошедшего года или двух программирования JavaScript они освоили бы достаточно основ, чтобы быть открытыми, чтобы узнать больше.
Они могут включаться в FP после прочтения поста или через коллеги. Первые шаги в обучении FP будут читать книгу и впитаться в несколько видео о основных принципах. Как только у вас есть концепции, то вы можете начать экспериментировать с ними.
К усилению преимуществ FP вам не нужна библиотека сразу. Многие практики FP, как писать более оставленные, Чистые функции То, что при выполнении ввода всегда возвращайте тот же выход, можно применять в вашем ежедневном кодировании без импорта другой библиотеки.
Добавление библиотеки, как React-Cook-Compose или Рамда даст вам дополнительную функциональность, когда вы готовы к нему. Они требуют дополнительной мозговой мощности, поэтому я бы не рекомендовал приблизиться к ним до тех пор, пока вы не поглотите, по крайней мере, основы FP.
Что такое состав?
Вы когда-либо осознали, что после написания в том же файле React файл ваш код опустился до сотен линий и его становится громоздким для управления? Это становится еще более выраженным, когда вы пытаетесь поделиться этим кодом с соучественным разработчиком, который образуется по размеру вашего фиксации с соответствующими эмоджи.
Мы хотим реформировать большие файлы на меньшее меньшее, чтобы им было легче рассмотреть и тестировать.
Равна
Я вложил несколько лет в изучении библиотеки Immutablejs и чувствую, что знаю этого достаточно хорошо, чтобы я хотел поэкспериментировать с новой библиотекой FP. На мой взгляд, Immutablejs и Ramda являются сопоставимыми библиотеками. Существует некоторая драма о ImmutableJs, не являющихся недовольством, но у меня никогда не было проблем с ним, а иногда библиотека может достичь определенной зрелости, не требуя большего количества работ.
Мое первое впечатление о Рамде в том, что документация уже чувствует себя больше похоже на Clojure, которую я изучал в прошлом. Это упоминает термины, как или няны или няны или Ариность которые, вероятно, являются новым языком для разработчиков JavaScript, если вы уже не узнали другие фокусы FP, такие как HASKELL, CLOJURE или ELM. Как и Clojure, Ramda предлагает JavaScript новый мир функциональности, предоставляя больше инструментов для безопасного трансформации данных, не беспокоясь о мутации.
Библиотека Ramda предоставляет Составьте функцию Что позволяет вам принять меньшие файлы и приносить их вместе через инкрементные шаги.
const Poster = ({ id, coverUrl, title }) => {
return (
);
};
const makePosters = map(Poster);
const getPoster = pick(["id", "coverUrl", "title"]);
const getPosters = map(getPoster);
const TitleList = compose(makePosters, getPosters);
const Posters = ({ tvSeriesDataset }) => (
TV Series
{TitleList(tvSeriesDataset)}
);
Я подготовил Ramda CodeSandbox Изучительно, как составить Несколько функций реагирования. Например, мы можем написать компонент списка в одном файле и компонент элемента списка в другом файле. Как автор, это может стать субъективным, когда файл слишком маленький? В моем случае я решил написать их как отдельные функции, которые будут экспортированы и повторно использованы другими компонентами, но я оставил их в одном файле, потому что число строки было уже до 100.
Наряду с составляющими, эта кодовая обработка также имеет различные способы преобразования данных на каждом этапе композиции. Я начал этот эксперимент, просто Googling «CodeSandbox Ramda» и использовал какой-то код от других авторов, предоставляя им кредит в течение README.
reac-hooks-compose
Эта библиотека почти явно объяснила. Это делает то, что вы ожидаете, что это делать. Подобно сочинению в redux, вы можете взять презентационный компонент и нанести ему несколько крючков.
Что такое мотивация использовать составить? Благодаря сочинению мы можем писать крючки внешние в нашу презентацию и повторно использовать их в других компонентах. В этом эксперименте я беру 3 крючка: stuestate, usequery и strumution и объединяю их со компонентом презентации. Каждая часть – это отдельный файл.
С Composehooks Можно добавить крючки на наш презентационный компонент после этой картины:
const ViewComponentWithHooks = composeHooks(({ myQuery, myMutation}) => ({
useCaptureInput: () => useCaptureInput(),
useQuery: () => useQuery(myQuery),
useMutation: () => useMutation(myMutation)
}))(ViewComponent);
Мне повеселилось, создав это React – Cooks-Compose CodeSandbox Что отображает некоторые из моих любимых недавних сериалов. Большинство из этих серий были рекомендованы друзьями.
Вывод
За последний год я наблюдал, как команда из основных разработчиков BootCamp растет до точки, где я чувствую, что они стали сверстниками и могут исчезнуть критиковать сухость моего собственного программирования. Мы находимся в процессе внедрения ФП на Loblaws Digital Начиная с основы и, через эти эксперименты, я пытаюсь убедить их (и себя), которые должны ввести обычаю в нашу кодовую базу.
Мне недостаточно упомянуть ImmutableJs или Ramda на встрече, я хочу, чтобы моя команда следила за моим примером и экспериментом с ними. Я надеюсь, что они увидят этот пост в качестве мотивации для создания собственного кодового документа, чтобы я в свою очередь мог извлечь у них.
Оригинал: “https://dev.to/headwinds/composing-react-hooks-47b1”