От автора: после релиза 29 мая 2013 года React.js захватил Интернет. Не секрет, что я и многие другие разработчики обязаны своим успехом этой потрясающей платформе.
Учитывая то, что в сети столько руководств по React для начинающих и профессионалов, мне бы хотелось, чтобы кто-то дал мне следующие советы в то время, как я сам начинал его изучать.
При использовании функции стрелки .bind(this) не нужен
Обычно у вас будет что-то вроде этого, когда используется контролируемый компонент:
class Foo extends React.Component{ constructor( props ){ super( props ); this.handleClick = this.handleClick.bind(this); } handleClick(event){ // логика обработки события } render(){ return ( <button type="button" onClick={this.handleClick}> Click Me </button> ); }
}Вы пишете .bind(this) для каждого существующего метода, потому что большинство руководств говорят это делать. Если у вас есть несколько контролируемых компонентов, вы получите полный набор кодов в constructor(){}. Вместо этого вы можете:
class Foo extends React.Component{ handleClick = (event) => { // логика обработки события } render(){ return ( <button type="button" onClick={this.handleClick}> Click Me </button> ); }
}Как? Функция стрелок ES6 использует Лексический диапазон, что позволяет методу получить доступ к this, где он запущен.
Когда service workers работают против вас
Service workers отлично подходят для прогрессивного веб-приложения, которое обеспечивает автономный доступ и оптимизирует работу для пользователей с плохим интернет-соединением.
Но когда вы не знаете, что service worker кэширует статические файлы, вы неоднократно развертываете свои исправления. Только чтобы ваш сайт не обновлялся. Не паникуйте, проверьте src/index.js:
// Убедитесь, что задано unregister serviceWorker.unregister();
Начиная с версии 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:
"devDependencies": { "eslint-config-airbnb": "^17.1.0", "eslint-config-prettier": "^3.1.0", "eslint-plugin-import": "^2.14.0", "eslint-plugin-jsx-a11y": "^6.1.1", "eslint-plugin-prettier": "^3.0.0", "eslint-plugin-react": "^7.11.0"
}2. Установите расширение ESLint
3. Включите автоисправление при сохранении
Вам не нужен Redux, стилизованные компоненты и т. д. Каждый инструмент имеет свое назначение. При этом полезно знать о различных инструментах.
Если у вас есть только молоток, все будет выглядеть для вас, как гвоздь — Абрахам Маслоу.
Вам нужно подумать о времени установки некоторых используемых вами библиотек и оценить:
В чем проблема, которую я пытаюсь решить?
Будет ли этот проект жить достаточно долго, чтобы извлечь выгоду из этой библиотеки?
React уже предлагает что-то прямо из коробки?
С Контекстом и Хуками, доступными для React сейчас, вам все еще нужен Redux? Я очень рекомендую Redux Offline, когда ваши пользователи находятся в плохой интернет-среде.
Повторно используйте обработчик событий
Если вам не хочется вводить одно и то же снова и снова, можно использовать повторно обработчик событий:
class App extends Component { constructor(props) { super(props); this.state = { foo: "", bar: "", }; } // повторное использование для всех элементов ввода onChange = e => { const { target: { value, name }, } = e; // имя будет именем состояния will this.setState({ [name]: value }); }; render() { return ( <div> <input name="foo" onChange={this.onChange} /> <input name="bar" onChange={this.onChange} /> </div> ); }
}setState является асинхронным
По наивности я написал бы что-то вроде:
constructor(props) { super(props); this.state = { isFiltered: false }; } toggleFilter = () => { this.setState({ isFiltered: !this.state.isFiltered }); this.filterData(); }; filterData = () => { // this.state.isFiltered should be true, but it's not if (this.state.isFiltered) { // Выполняем некоторую фильтрацию } };Вариант 1: передача состояния вниз
toggleFilter = () => { const currentFilterState = !this.state.isFiltered; this.setState({ isFiltered: currentFilterState }); this.filterData(currentFilterState);
};
filterData = (currentFilterState) => { if (currentFilterState) { // Выполняем некоторую фильтрацию }
};Вариант 2: вторичная функция для обратного вызова setState
toggleFilter = () => { this.setState((prevState) => ({ isFiltered: !prevState.isFiltered }), () => { this.filterData(); });
};
filterData = () => { if (this.state.isFiltered) { // Выполняем некоторую фильтрацию }
};Заключение
Эти советы сэкономили мне много времени, и я уверен, что есть и другие. Пожалуйста, не стесняйтесь поделиться ими в комментариях.
Автор: David Yu
Источник: https://medium.freecodecamp.org
Редакция: Команда webformyself.