
Мои лучшие 5 лучших практик для ReactJs
14 марта 2022 г.Привет народ!
В этой статье мы обсудим 5 лучших практик ReactJ, которые помогут вам упростить создание отличных и высокопроизводительных приложений.
Использовать фрагмент
Мы знаем, что React позволяет вам возвращать только один элемент JSX за раз. Чтобы обернуть несколько элементов, мы используем div, который добавляется в Dom, что потребует некоторых вычислений, поэтому попробуйте использовать Fragment вместо ненужного div.
```javascript
const без фрагмента = () => {
вернуть (
<дел>
Без фрагмента
Использование div в качестве внешнего элемента
константа с фрагментом = () => {
вернуть (
С фрагментом
Использование React Fragment в качестве внешнего элемента
Разбивайте большие компоненты на мелкие компоненты или повторно используемые компоненты
Если компонент слишком велик, разбейте этот компонент и соберите небольшие компоненты в один компонент и повторно используйте их в соответствии с требованиями.
```javascript
// Компонент (до)
const ProfileCard = (реквизит) => {
вернуть (
{props.icon}
{props.name}
{props.followers}
Подписчики
{props.blogs}
Статьи
{props.revenue}
МПП
// Маленькие компоненты с композицией
const Avatar = ({ icon, name }) => {
вернуть (
{icon}
{имя
const Stats = ({ подписчики, блоги, доход }) => {
вернуть (
{подписчики}
Подписчики
{блоги
Статьи
{доход
МРС
// Компонент с упрощенным JSX (после)
const ProfileCard = (реквизит) => {
вернуть (
<Значок аватара={props.icon} name={props.name} />
<Статистика
последователи = {props.followers}
блоги={реквизиты.блоги}
доход = {props.revenue}
Использовать проверку типов
Используйте propTypes или TypeScript для проверки типов в вашем приложении, чтобы своевременно обнаруживать ошибки и предотвращать их.
```javascript
импортировать PropTypes из 'prop-types';
const TypeChecking = ({имя}) => {
вернуть
Здравствуйте, {name}
;TypeChecking.propTypes = {
имя: PropTypes.string.isRequired
Используйте функциональные компоненты
React представил хуки, которые отлично подходят для создания функционального компонента в ReactJs и позволяют вам управлять состоянием без каких-либо сложностей.
```javascript
константный счетчик = () => {
const [количество, setCount] = React.useState (0);
const handleClick = () => {
setCount((prevCount) => prevCount + 1);
React.useEffect(() => {
// Это будет зарегистрировано при изменении значения счетчика
console.log('Количество:', количество);
}, [считать]);
вернуть (
{количество
Использовать мемоизацию
Попробуйте использовать заметки React, чтобы избежать ненужного повторного рендеринга и повысить производительность вашего приложения.
```javascript
const Child = React.memo(({ имя }) => {
console.log('Дочерний рендеринг');
вернуть
{имя
;константный родитель = () => {
const [количество, setCount] = React.useState (0);
const handleClick = () => {
setCount((prevCount) => prevCount + 1);
console.log('Родительский рендеринг');
вернуть (
{количество
Если вы выполните код, вы увидите, что дочерний компонент отображается только один раз. При нажатии кнопки «Увеличить» счетчик будет увеличиваться, и только родительский компонент получит повторный рендеринг.
И это все для этой темы. Спасибо за чтение.
Свяжитесь со мной
LinkedIn | [Твиттер] (https://twitter.com/sachindotcom)
- Впервые опубликовано [здесь] (https://blog.sachinchaurasiya.dev/5-best-practices-for-reactjs)*
Оригинал
Recent Post
-
Разработчики пропускают смену с низким кодом
18 июля 2025 г. -
Создание простых мониторинга Spotify Trends с библиотеками React & Data Viz
18 июля 2025 г. -
Один только ИИ не заменит инженеров, но инженеры, управляемые ИИ, будут
17 июля 2025 г. -
Как избежать хромового помещения ваших уведомлений о ваших веб -точках (и почему большинство людей ошибаются)
16 июля 2025 г. -
Эндрю Н.Г.: Соотношения команды продуктов, развивающиеся только к одному разработчику программного обеспечения для каждых двух менеджеров по продуктам
16 июля 2025 г.
Categories
- Python
- blockchain
- web
- hackernoon
- вычисления
- вычислительные компоненты
- цифровой дом
- игры
- аудио
- домашний кинотеатр
- Интернет
- Мобильные вычисления
- сеть
- фотосъемка видео
- портативные устройства
- программного обеспечения
- телефон и связь
- телевидение
- видео
- мир технологий
- умные гиды
- облако
- искусственный интеллект
- се
- Samsung
- умные города
- digitaltrends
- отели
- Startups
- Venture
- Crypto
- Apps
- безопасность
- техника и работа
- cxo
- мобильность
- разработчик
- 5г
- майкрософт
- инновации
- Права и свободы
- Законодательство и право
- Политика и общество
- Космическая промышленность
- Информационные технологии
- Технологии
- Образование
- Научные исследования
- Автомобильная промышленность
- Программная инженерия
- IT и технологии
- Веб-разработка
- Программирование
- Автоматизация
- Карьерный рост
- Программирование и анализ данных
- Трудоустройство
- Политика
- Искусственный интеллект
- ИТ-технологии
- Программное обеспечение
- Экологическая политика
- Образование и рынок труда
- Политика и право
- Microsoft Teams и SharePoint
- Информационная безопасность
- Кибербезопасность
- Налоги
- Образование и карьера
- Интернет и технологии
- Технологии, Государственные услуги
- Политика и технологии
- Разработка программного обеспечения
- Разработка ПО
- Машинное обучение
- Налогообложение, технологии, открытый исходный код
- Финансы и налоги
- Технологии, Интернет, Экология
- Интернет, безопасность
- Технологии и политика
- Операционные системы
- Профессиональная разработка
- Технологии, Безопасность
- Интернет и общество
- Финансовая индустрия
- Налоговый учёт
- Общественное здравоохранение
- Технологическая отрасль
- Юриспруденция
- Технологии и государство
- Здоровье и фитнес
- IT-инфраструктура
- Технологии и ИИ
- Здравоохранение
- IT
- Технологии, Экономика
- Музыка и технологии
- Здоровье и питание
- IT и безопасность
- Бизнес и предпринимательство
- Технологии, Программное обеспечение
- Технологии и инновации
- Технологии, данные, этика
- Технологии и Интернет
- Технологии и SaaS
- Медицина и здравоохранение
- Онлайн-видеосервисы
- Финансы и технологии
- Чтение и саморазвитие
- Экономика и бизнес
- Безопасность данных
- Удаленная работа
- Авиация и технологии
- Технологии, Игры
- Энергетика
- Социальные сети, безопасность, технологии
- Саморазвитие
- Безопасность информации
- Бизнес и карьера
- Технологии и отношения
- Игровая индустрия
- Компьютерная индустрия
- Математика, Искусственный интеллект
- Наука и технологии
- Технологии и безопасность
- Технологии, Удаленная работа, Бизнес
- Видеоигры
- Технологии, Искусственный интеллект, Этика
- Технологии, социальные сети, 6G
- Технологии, Программирование, AI, Разработка ПО
- Программирование, Разработка ПО, Технологии
- Животные
- Технологии, Искусственный интеллект
- Программирование, карьера, технологии, обучение
- Бизнес и технологии
- Технологии, Безопасность данных
- Астрономия и физика
- Продуктивность, личное развитие
- Медиа и Технологии
- Программирование и Искусственный Интеллект
- Социальные сети
- Политика и экономика
- Технологии, Медицина, Искусственный интеллект
- Технологии и управление
- Космос и астрономия
- Общество и политика
- Космические исследования
- Веб-дизайн
- Искусственный интеллект и безопасность данных
- Технологии, Безопасность, Конфиденциальность
- Экологическая проблема
- Технологии, Погода
- Авиация
- Транспортная сфера
- Технологии и бизнес
- Игровая промышленность
- Телевидение и реклама
- Аналитика данных
- Технологии и кибербезопасность
- Маркетинг
- Технологии и гаджеты
- Технологии, Авиация, Инновации
- Финансы и инвестиции
- Технологии и общество
- Рыночный анализ
- Космология
- Данные и бизнес
- IT и программирование
- Технологии и право
- Программирование и разработка
- Медицинские технологии
- Авиационная промышленность
- Технологии и искусственный интеллект
- Генетическая инженерия
- Бизнес и инвестиции
- Компьютерная промышленность
- Психология и социология
- Образование и технологии
- Рынок труда
- Технологии, Стартапы
- Технологии, Приватность, Чтение
- Маркетинг и продажи
- Виртуальная реальность
- Технологии, Смартфоны, Маркетинг
- Технологии, Бизнес, Личностный рост
- Экологические проблемы
- Экономика и технологии
- IT и карьера
- Интернет и безопасность
- Разработка и технологии
- Биотехнологии
- Интернет-магазины, кибербезопасность
- Финансы
- Безопасность и технологии
- Экономика
- Защита данных
- Data Science
- Карьера и работа
- Финансовый успех, мошенничество, маркетинг
- Безопасность
- Экология
- Космическая индустрия
- Программирование, Python, Обучение
- Технологии искусственного интеллекта
- Технологии, Дизайн, iOS
- Программирование, DevOps, Kubernetes
- Социальные сети и пропаганда
- Корпоративная этика
- Управление IT-инфраструктурой
- Здоровье и медицина
- Медицина
- Медицинская промышленность
- Разработка и дизайн
- Искусственный интеллект, Диагностика систем
- Образование и психология
- Технологии, Автомобильная промышленность
- Автомобили и путешествия
- Астрономия и космология
- Программирование и технологии
- IT, работа в офисе, эмоциональный интеллект
- Компьютерная техника
- Здоровье и благополучие
- Управление персоналом
- Политика и управление
- Бизнес и экономика
- Социальные сети, Пропаганда, Информационная безопасность
- Технологии и автоматизация
- Геймдизайн
- Экология и технологии
- CRM-системы, IT-инфраструктура
- Права человека
- Цифровая цензура, свобода слова, технологии
- Технологии, Искусственный интеллект, Работа
- Наука о данных
- Астрономия, Наука
- Интернет и цифровые технологии
- Технологии, управление
- Интернет и связь
- Технологии и конфиденциальность
- Интернет и свобода слова
- Психология и социальные науки
- Книги и литература
- Работа и карьера
- Финансовые технологии
- Психология и саморазвитие
- IT, программирование, сети
- Технологии, Видеоигры
- Экология и энергетика
- Космонавтика
- Медицина и технологии
- Игры и развлечения
- Музыкальная индустрия
- Логистика и складирование
- Бизнес и финансы
- Экология и окружающая среда
- Правозащита
- Социальные сети и дезинформация
- Технологии и рынок труда
- Технологии, Искусственный интеллект, Рынок труда
- Технологии и будущее
- Медицина и здоровье
- Социальные медиа
- Экология, политика, общество
- Экономика и Финансы
- Разработка игр
- Пропаганда и дезинформация
- Медицинские исследования
- Онлайн-знакомства
- Политика и СМИ
- Энергетика и электромобили
- Климатические изменения
- Технологии, Рынок труда
- IT и управление данными
- Безопасность и кибербезопасность
- Интернет-технологии
- Психология и личностное развитие
- Технологии, Мессенджеры
- Цифровые технологии
- Здоровье и самосовершенствование
- Технологии и AI
- Технологии и спорт
- IT, Разработка программного обеспечения
- Экология и климат
- Космос и технологии
- Юридическая сфера
- Безопасность в интернете
- Программирование, Искусственный Интеллект, Качество ПО
- Технологии и мессенджеры
- Социальная справедливость
- Технологическая индустрия
- Личностное развитие, Time-менеджмент, Психология
- Бизнес и менеджмент
- Технологии, Микросхемы, Автономные системы
- Фриланс и предпринимательство
- Социальные сети и искусственный интеллект
- Криминальные дела
- Социальные сети, Маркетинг
- Энергетика и экология
- Технологии, Искусственный Интеллект, Полиция
- Программирование, Искусственный интеллект, Рынок труда
- Социальные сети, дезинформация, анализ данных
- Потребительские права
- Образование и наука
- Технологии и правосудие
- Технологии, Безопасность, Автомобили
- Энергетика и окружающая среда
- Личностное развитие
- Технологии и экономика
- Медиа и коммуникации
- Миграция и иммиграция
- Личностный рост
- Налоговая система
- Медиа и телевидение
- Интернет и телекоммуникации
- Технологии, Кибербезопасность
- Здоровье
- Социальные сети и карьера
- Политика и инфраструктура
- Предпринимательство
- Промышленность программного обеспечения
- СМИ и коммуникации
- Медиа и Общество
- Медицина и генетика
- Веб-разработка и дизайн
- Технологии, процессоры
- IT-индустрия