О чем я хотел бы знать, когда был начинающим разработчиком React.js

О чем я хотел бы знать, когда был начинающим разработчиком React.js

От автора: после релиза 29 мая 2013 года React.js захватил Интернет. Не секрет, что я и многие другие разработчики обязаны своим успехом этой потрясающей платформе.

Учитывая то, что в сети столько руководств по React для начинающих и профессионалов, мне бы хотелось, чтобы кто-то дал мне следующие советы в то время, как я сам начинал его изучать.

При использовании функции стрелки .bind(this) не нужен

Обычно у вас будет что-то вроде этого, когда используется контролируемый компонент:

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

Вы пишете .bind(this) для каждого существующего метода, потому что большинство руководств говорят это делать. Если у вас есть несколько контролируемых компонентов, вы получите полный набор кодов в constructor(){}. Вместо этого вы можете:

Как? Функция стрелок ES6 использует Лексический диапазон, что позволяет методу получить доступ к this, где он запущен.

Когда service workers работают против вас

Service workers отлично подходят для прогрессивного веб-приложения, которое обеспечивает автономный доступ и оптимизирует работу для пользователей с плохим интернет-соединением.

Но когда вы не знаете, что service worker кэширует статические файлы, вы неоднократно развертываете свои исправления. Только чтобы ваш сайт не обновлялся. Не паникуйте, проверьте src/index.js:

Начиная с версии 16.8, эта строка по умолчанию должна быть указана, как serverWorker.unregister(). Но если они решат изменить это снова, вы будете знать, где искать.

В 99% случаев вам не нужно выполнять извлечение

Create React App предлагает для вашего проекта опцию yarn eject, чтобы настроить процесс сборки. Я помню, как пытался настроить процесс сборки так, чтобы SVG-изображения автоматически вставлялись в код. Я потратил часы, пытаясь понять процесс сборки. В итоге у нас появился файл импорта, который внедряет теги SVG, и мы увеличили скорость загрузки сайта на 0,0001 миллисекунды.

Извлекать проект React — это все равно, что открыть капот работающего автомобиля и заменять двигатель на ходу, чтобы он работал на 1% быстрее. Конечно, если вы уже являетесь мастером Webpack, стоит настроить процесс сборки в соответствии с потребностями проекта. Когда вы пытаетесь доставлять быстрее, сосредоточьтесь на других вещах.

Автоисправление ESlint при сохранении экономит очень много времени

Возможно, вы скопировали какой-то код откуда-то, он имеет необычное форматирование. Поскольку вы не можете понять что к чему, так как это выглядит ужасно, вы тратите время на добавление пробелов вручную.

С помощью ESLint и Visual Studio Code Plugin вы можете исправить это при сохранении.

Как?

1. В package.json, добавьте dev зависимости и выполните npm i или yarn:

2. Установите расширение ESLint

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

3. Включите автоисправление при сохранении

Вам не нужен Redux, стилизованные компоненты и т. д. Каждый инструмент имеет свое назначение. При этом полезно знать о различных инструментах.

Если у вас есть только молоток, все будет выглядеть для вас, как гвоздь — Абрахам Маслоу.

Вам нужно подумать о времени установки некоторых используемых вами библиотек и оценить:

В чем проблема, которую я пытаюсь решить?

Будет ли этот проект жить достаточно долго, чтобы извлечь выгоду из этой библиотеки?

React уже предлагает что-то прямо из коробки?

С Контекстом и Хуками, доступными для React сейчас, вам все еще нужен Redux? Я очень рекомендую Redux Offline, когда ваши пользователи находятся в плохой интернет-среде.

Повторно используйте обработчик событий

Если вам не хочется вводить одно и то же снова и снова, можно использовать повторно обработчик событий:

setState является асинхронным

По наивности я написал бы что-то вроде:

Вариант 1: передача состояния вниз

Вариант 2: вторичная функция для обратного вызова setState

Заключение

Эти советы сэкономили мне много времени, и я уверен, что есть и другие. Пожалуйста, не стесняйтесь поделиться ими в комментариях.

Автор: David Yu

Источник: https://medium.freecodecamp.org

Редакция: Команда webformyself.

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

ReactJS: основы

Изучите основы ReactJS и создайте ваше первое приложение на ReactJS

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий