[JavaScript, Программирование, ReactJS] 7 лучших библиотек для создания молниеносно быстрых приложений ReactJS (перевод)
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
Некоторые необходимые инструменты для rock-star разработчика
Привет, Хабр. В рамках набора на курс "React.js Developer" подготовили перевод материала.
Всех желающих приглашаем на открытый демо-урок "Webpack и babel". На занятии рассмотрим современные и мощные фишки JavaScript — Webpack и Babel. Пошагово покажем, как с нуля создать проект на React, используя Webpack. Присоединяйтесь!
ReactJS по умолчанию обладает высокой производительностью. Но время от времени у вас появляется шанс сделать его еще лучше. И замечательное сообщество React придумало для этого несколько фантастических библиотек.Сегодня мы поговорим о семи таких библиотеках, которые могут улучшить качество вашего кода и при этом повысить производительность.Давайте начнем. . . .1. React QueryИзвестно, что React Query, библиотека управления состоянием для React, отсутствует.В документации к ней говорится: «Получайте, кэшируйте и обновляйте данные в ваших приложениях React, не затрагивая никакого "глобального состояния"».Да. Это именно то, что она делает. Она помогает нам управлять состоянием сервера без лишних хлопот. Это может уменьшить необходимость использования библиотеки управления состоянием, такой как Redux.Преимущества
- Автоматическое кэширование
- Автоматическое обновление данных в фоновом режиме
- Значительно сокращает объем кода
До использования React QueryВот пример для получения данных с помощью нашего пользовательского хука. Он даже не поддерживает кэширование.
const useFetch = (url) => {
const [data, setData] = useState();
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(false);
useEffect(() => {
const fetchData = async () => {
setIsError(false);
setIsLoading(true);
try {
const result = await fetch(url);
setData(result.data);
} catch (error) {
setError(error);
}
setIsLoading(false);
};
fetchData();
}, [url]);
return {data , isLoading , isError}
}
После (использования) React QueryВот код, если мы хотим использовать React Query. Посмотрите, какой он маленький.
import { useQuery } from 'react-query'
const { isLoading, error, data } = useQuery('repoData', () =>
fetch(url).then(res =>res.json()
)
)
Посмотрите, насколько сильно сократился наш код.. . .2. React Hook FormReact Hook Form - это современная библиотека обработки форм, которая может поднять эффективность работы вашей формы на совершенно новый уровень.Преимущества
- Уменьшает объем кода
- Сокращает ненужный ре-рендеринг.
- Легко интегрируется с современными библиотеками пользовательского интерфейса (UI)
Ниже приведен пример, демонстрирующий, как React Hook Form может улучшить качество кода.Без React Hook FormВот пример создания формы авторизации вручную.
function LoginForm() {
const [email, setEmail] = React.useState("");
const [password, setPassword] = React.useState("");
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
console.log({email, password});
}
return (
<form onSubmit={handleSubmit}>
<input
type="email"
id="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<input
type="password"
id="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</form>
);
}
С помощью React FormВот тот же пример с React Hook Form.
function LoginForm() {
const { register, handleSubmit } = useForm();
const onSubmit = data => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register("email")} />
<input {...register("password")} />
<input type="submit" />
</form>
);
}
Выглядит аккуратно и в то же время эффективно. Попробуйте.. . .3. React WindowReact Window используется для рендеринга длинных списков. Представьте, что у вас есть список из 1 000 элементов. На экране отображаются только десять, но ваш код пытается визуализировать 1000 элементов одновременно.Это может привести к серьезным задержкам в вашем приложении. Данная библиотека очень популярна и является обязательным инструментом в вашем арсенале.Ручной рендеринг 1 000 элементов
import React, {useEffect, useState} from 'react';
const names = [] // 1000 names
export const LongList = () => {
return <div>
{names.map(name => <div> Name is: {name} </div>)}
<div/>
}
Но этот код рендерит 1000 элементов одновременно, хотя на экране можно увидеть не более 10-20 элементов.Использование React WindowТеперь давайте используем React Window.
import { FixedSizeList as List } from 'react-window';
const Row = ({ index, style }) => <div style={style}> Name is {names[index]}</div>
const LongList = () => (
<List
height={150}
itemCount={1000}
itemSize={35}
width={300}
>
{Row}
</List>
);
Данный код рендерит только то, что вы видите на экране. Поначалу это может быть непонятно, но необходимо, если вам нужно отобразить длинный список.. . .4. React LazyLoadЛенивая загрузка - это техника, используемая для загрузки только того, что вам нужно. Таким образом, она повышает производительность, не расходуя без необходимости вычислительные мощности.React LazyLoad - это библиотека, специально созданная для этой цели. Вы просто оборачиваете свой компонент, а эта библиотека позаботится обо всем остальном.Преимущества
- Повышенная производительность
- Поддерживает рендеринг на стороне сервера
Без LazyLoadВот пример, в котором мы загружаем пять изображений вручную.
import React from 'react';
const ImageList = () => {
return <div>
<img src ='image1.png' />
<img src ='image2.png' />
<img src ='image3.png' />
<img src ='image4.png' />
<img src ='image5.png' />
</div>
}
С LazyLoadВот тот же пример с компонентом LazyLoad.
import React from 'react';
import LazyLoad from 'react-lazyload';
const ImageList = () => {
return <div>
<LazyLoad> <img src ='image1.png' /> <LazyLoad>
<LazyLoad> <img src ='image2.png' /> <LazyLoad>
<LazyLoad> <img src ='image3.png' /> <LazyLoad>
<LazyLoad> <img src ='image4.png' /> <LazyLoad>
<LazyLoad> <img src ='image5.png' /> <LazyLoad>
</div>
}
. . .5. Почему вы выполняете рендеринг (Why Did You Render)Ненужный рендеринг может навредить производительности ваших React-приложений. Но иногда мы делаем это, даже не подозревая.Этот замечательный пакет, Why Did You Render, помогает нам найти проблемы с производительностью и решить их. Вы просто включаете его в любом компоненте, и он сообщает вам, почему именно происходит рендеринг.Ниже представлен компонент с возникающими проблемами рендеринга.
import React, {useState} from 'react'
const WhyDidYouRenderDemo = () => {
console.log('render')
const [user , setUser] = useState({})
const updateUser = () => setUser({name: 'faisal'})
return <>
<div > User is : {user.name}</div>
<button onClick={updateUser}> Update </button>
</>
}
export default WhyDidYouRenderDemo
После включения эта библиотека будет записывать в консоль следующий результат.
Из этого журнала видно, что мы обновляем объект с одним и тем же значением, что плохо для производительности.. . .6. ReselectЕсли вы используете Redux, то эта функция станет для вас спасительной. Мы знаем, что редьюсеры Redux могут хранить большое количество данных, и если вы передадите всё хранилище в какой-либо компонент, это приведет к тому, что он будет заново рендериться каждый раз, когда что-либо в этом хранилище будет обновляться.Reselect решает эту проблему, меморизуя значения и передавая только то, что необходимо.Преимущества (из документации)
- Селекторы могут вычислять производные данные, что позволяет Redux хранить минимально возможное состояние.
- Селекторы эффективны. Селектор не пересчитывается, если один из его аргументов не изменился.
- Селекторы являются составными. Они могут быть использованы в качестве входных данных для других селекторов.
ПримерНиже приведен пример получения значений из хранилища и их изменения в селекторе.
import { createSelector } from 'reselect'
const shopItemsSelector = state => state.shop.items
const subtotalSelector = createSelector(
shopItemsSelector,
items => items.reduce((subtotal, item) => subtotal + item.value, 0)
)
const exampleState = {
shop: {
items: [
{ name: 'apple', value: 1.20 },
{ name: 'orange', value: 0.95 },
]
}
}
. . .7. Deep EqualDeep Equal - это известная библиотека, которую можно использовать для сравнения. Это очень удобно. Ведь в JavaScript, несмотря на то, что два объекта могут иметь одинаковые значения, они считаются разными, поскольку указывают на разные области памяти.Вот почему мы видим следующий результат.
const user1 = {
name:'faisal'
}
const user2 ={
name:'faisal'
}
const normalEqual = user1 === user2 // false
Но если нужно проверить равенство (для мемоизации), то это становится затратной (и сложной) операцией.Если мы используем Deep Equal, то это повышает производительность в 46 раз. Ниже приведен пример того, как мы можем это сделать.
var equal = require('deep-equal');
const user1 = {
name:'faisal'
}
const user2 ={
name:'faisal'
}
const deepEqual = equal(user1 , user2); // true -> exactly what we wanted!
. . .Вот как это выглядит. Таковы некоторые из самых важных библиотек, которые вы можете использовать для обеспечения максимальной производительности вашего приложения React.Оставляйте комментарии, если у вас на примете есть другие. Хорошего дня!Ресурсы
- Веб-сайт React Query
- Веб-сайт React Hook Form
- Примеры React Window
- Пакет Why Did You Render
- Пакет React Lazy Load
- Reselect Репозиторий
- Пакет Deep Equal
Узнать подробнее о курсе "React.js Developer"Смотреть открытый онлайн-урок "Webpack и babel"
===========
Источник:
habr.com
===========
===========
Автор оригинала: Mohammad Faisal
===========Похожие новости:
- [JavaScript, Google API] Google документы станут полновесными с 1 июня. Пишем скрипт для обхода этого ограничения
- [Машинное обучение] Полезные приемы и лучшие практики от Kaggle (перевод)
- [Программирование, Разработка игр, Unity, Игры и игровые приставки, Интервью] Подкаст «Хочу в геймдев» #25 — текстовая версия
- [Big Data, Data Engineering] Задачка для дата сайентистов по Data Warehouse
- [Open source, Программирование, Отладка, Реверс-инжиниринг] Обратная отладка в большом масштабе (перевод)
- [Программирование микроконтроллеров, Производство и разработка электроники] HK32F030C8T6 全功能克隆(полный функциональный клон) STM32F030C8T6
- [Информационная безопасность, Программирование, C++] Грехи C++ (перевод)
- [Программирование, Работа с 3D-графикой, Алгоритмы, Визуализация данных] Майнкрафт для геологов: 3D-рендеринг миллиарда ячеек на встроенной видеокарте (часть 2)
- [Разработка веб-сайтов, JavaScript, API] Наиболее полное руководство по практическому использованию Web Speech API
- [Программирование, Машинное обучение] SberCloud + Intel oneAPI = бесплатное облако для ML-разработчиков
Теги для поиска: #_javascript, #_programmirovanie (Программирование), #_reactjs, #_react.js, #_programmirovanie (программирование), #_javascript, #_frontend, #_web_developement, #_webpack, #_babel, #_react, #_blog_kompanii_otus (
Блог компании OTUS
), #_javascript, #_programmirovanie (
Программирование
), #_reactjs
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 12:33
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
|
Некоторые необходимые инструменты для rock-star разработчика Привет, Хабр. В рамках набора на курс "React.js Developer" подготовили перевод материала.
Всех желающих приглашаем на открытый демо-урок "Webpack и babel". На занятии рассмотрим современные и мощные фишки JavaScript — Webpack и Babel. Пошагово покажем, как с нуля создать проект на React, используя Webpack. Присоединяйтесь!
const useFetch = (url) => {
const [data, setData] = useState(); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(false); useEffect(() => { const fetchData = async () => { setIsError(false); setIsLoading(true); try { const result = await fetch(url); setData(result.data); } catch (error) { setError(error); } setIsLoading(false); }; fetchData(); }, [url]); return {data , isLoading , isError} } import { useQuery } from 'react-query'
const { isLoading, error, data } = useQuery('repoData', () => fetch(url).then(res =>res.json() ) )
function LoginForm() {
const [email, setEmail] = React.useState(""); const [password, setPassword] = React.useState(""); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); console.log({email, password}); } return ( <form onSubmit={handleSubmit}> <input type="email" id="email" value={email} onChange={(e) => setEmail(e.target.value)} /> <input type="password" id="password" value={password} onChange={(e) => setPassword(e.target.value)} /> </form> ); } function LoginForm() {
const { register, handleSubmit } = useForm(); const onSubmit = data => console.log(data); return ( <form onSubmit={handleSubmit(onSubmit)}> <input {...register("email")} /> <input {...register("password")} /> <input type="submit" /> </form> ); } import React, {useEffect, useState} from 'react';
const names = [] // 1000 names export const LongList = () => { return <div> {names.map(name => <div> Name is: {name} </div>)} <div/> } import { FixedSizeList as List } from 'react-window';
const Row = ({ index, style }) => <div style={style}> Name is {names[index]}</div> const LongList = () => ( <List height={150} itemCount={1000} itemSize={35} width={300} > {Row} </List> );
import React from 'react';
const ImageList = () => { return <div> <img src ='image1.png' /> <img src ='image2.png' /> <img src ='image3.png' /> <img src ='image4.png' /> <img src ='image5.png' /> </div> } import React from 'react';
import LazyLoad from 'react-lazyload'; const ImageList = () => { return <div> <LazyLoad> <img src ='image1.png' /> <LazyLoad> <LazyLoad> <img src ='image2.png' /> <LazyLoad> <LazyLoad> <img src ='image3.png' /> <LazyLoad> <LazyLoad> <img src ='image4.png' /> <LazyLoad> <LazyLoad> <img src ='image5.png' /> <LazyLoad> </div> } import React, {useState} from 'react'
const WhyDidYouRenderDemo = () => { console.log('render') const [user , setUser] = useState({}) const updateUser = () => setUser({name: 'faisal'}) return <> <div > User is : {user.name}</div> <button onClick={updateUser}> Update </button> </> } export default WhyDidYouRenderDemo  Из этого журнала видно, что мы обновляем объект с одним и тем же значением, что плохо для производительности.. . .6. ReselectЕсли вы используете Redux, то эта функция станет для вас спасительной. Мы знаем, что редьюсеры Redux могут хранить большое количество данных, и если вы передадите всё хранилище в какой-либо компонент, это приведет к тому, что он будет заново рендериться каждый раз, когда что-либо в этом хранилище будет обновляться.Reselect решает эту проблему, меморизуя значения и передавая только то, что необходимо.Преимущества (из документации)
import { createSelector } from 'reselect'
const shopItemsSelector = state => state.shop.items const subtotalSelector = createSelector( shopItemsSelector, items => items.reduce((subtotal, item) => subtotal + item.value, 0) ) const exampleState = { shop: { items: [ { name: 'apple', value: 1.20 }, { name: 'orange', value: 0.95 }, ] } } const user1 = {
name:'faisal' } const user2 ={ name:'faisal' } const normalEqual = user1 === user2 // false var equal = require('deep-equal');
const user1 = { name:'faisal' } const user2 ={ name:'faisal' } const deepEqual = equal(user1 , user2); // true -> exactly what we wanted!
Узнать подробнее о курсе "React.js Developer"Смотреть открытый онлайн-урок "Webpack и babel"
=========== Источник: habr.com =========== =========== Автор оригинала: Mohammad Faisal ===========Похожие новости:
Блог компании OTUS ), #_javascript, #_programmirovanie ( Программирование ), #_reactjs |
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 12:33
Часовой пояс: UTC + 5