Серия «Выбор»: в процессе разработки технологий мы будем сталкиваться с различными вариантами выбора.Как мы должны выбирать подходящую технологию в различных ситуациях, это проблема, которую мы хотим решить в этой серии статей.
В процессе разработки React мы часто сталкиваемся с некоторыми вариантами выбора, ниже я выберу некоторые из них, которые я лично считаю важными для анализа один за другим. Но, пожалуйста, помните, что нижеследующее является только предложениями, и могут быть некоторые аспекты, которые не были учтены.Вам все равно нужно выбрать наиболее подходящий в соответствии с реальной ситуацией, а не следовать тренду.
Вариант 1. Создайте среду разработки
Прежде чем приступить к разработке React, вы или ваша команда должны сначала подумать, какую среду разработки выбрать, и с радостью представить карту выбора толпы.
Рекомендуется использовать общие сценарииcreate-react-app, который удовлетворит большинство ваших потребностей в разработке. Если конфигурация по умолчанию не соответствует вашим потребностям, запуститеnpm run ejectИзмените свою конфигурацию по мере необходимости (теплое напоминание: этот процесс нельзя отменить).
другие альтернативы
- GatsbyПодходит для разработки статических веб-сайтов
- Next.jsПрименимо к внешним и внутренним схемам изоморфизма
Если ничего из вышеперечисленного не может удовлетворить ваши потребности, дорогой, сделай это сам и имей достаточно еды и одежды.
Выбор 2: Тип
JavaScript — язык со слабой типизацией, вы можете игнорировать проверку типов или вам может потребоваться ввести проверку типов. На картинке ниже изображена карта выбора масс, как вы выберете?
Если лень кидать, тоprop-typesУдовлетворяет проверке вашего типа и позволяет избежать большинства проблем с типами.
Если вам нравится бросать и стремиться к совершенству, есть два варианта:
-
TypeScriptРасширенный набор JavaScript, который в конечном итоге компилируется в чистый и лаконичный собственный код JavaScript.
-
FlowДобавьте статическую проверку типов в Javascript, чтобы повысить производительность разработчиков и качество кода.
Вариант 3: ES5 (createClass) VS ES6 (класс)
Если ваша среда разработки использует синтаксис ES5, у вас нет другого выбора, кроме как использовать createCalss.Рекомендуется официальная статья.Как использовать React в среде, отличной от ES6》
Если ваша среда разработки использует синтаксис ES6, настоятельно рекомендуется использовать класс, который проще в использовании. Facebook также рекомендует использовать класс. Пример кода выглядит следующим образом:
class SayHello extends React.Component {
constructor(props) {
super(props);
this.state = {message: 'Hello!'};
}
render() {
return (
<p>
Say: {this.state.message}
</p>
);
}
}
Вариант 4: классы против чистых функций
Если вам не нужно использовать жизненные циклы, максимально используйте функциональные компоненты без сохранения состояния (функциональные компоненты без сохранения состояния: новые функции, добавленные в react-v0.14).
Простой пример чистой функции без сохранения состояния:
// 无状态纯函数组件，使用 ES5
var Aquarium = function(props) {
var fish = getFish(props.species);
return <Tank>{fish}</Tank>;
};
// 无状态纯函数组件，使用 ES2015 (ES6) 箭头函数:
var Aquarium = (props) => {
var fish = getFish(props.species);
return <Tank>{fish}</Tank>;
};
// 或者再使用对象解构与默认的返回，简单：
var Aquarium = ({species}) => (
<Tank>
{getFish(species)}
</Tank>
);
// 然后使用: <Aquarium species="rainbowfish" />
В соответствии с принципом единой ответственности ваши компоненты должны нести только одну ответственность, а внутренняя логика должна быть максимально плоской. Если логика сложная, то вам нужно спросить себя, нужно ли еще декомпозировать компонент.Использование чистых функций заставит вас постоянно думать о том, разумен ли дизайн компонента.
Одним словом, чистые функции могут помочь вам лучше проектировать компоненты. Базовые атомарные компоненты должны максимально использовать чистые функции. Для многоразовой или более сложной логики вы можете рассмотреть возможность извлечения дорогостоящих логических компонентов.
Дело не в том, что чистые функции следует использовать везде, если вашим компонентам действительно нужны операции, связанные с состоянием и жизненным циклом, используйте классы.
Сопровождение двух статей одного автора с разными взглядами (на английском языке):
- 9 причин использовать функциональные компоненты без сохранения состоянияReact Stateless Functional Components: Nine Wins You Might Have Overlooked
- 7 причин не использовать чистые функциональные компоненты без сохранения состояния7 причин запретить функциональные компоненты React
Вариант 5: состояние
Следующее, что вам нужно рассмотреть, - это то, как управлять данными о статусе. В отрасли уже много решений. Выбор масс
Если это простое веб-приложение, React может предоставить setState(), которое может удовлетворить ваши потребности, но достаточно, чтобы не присоединяться принудительно к другой структуре управления состоянием.
Если это большое веб-приложение, рекомендуется использоватьRedux. Redux — это контейнер управления предсказуемым состоянием для приложений JavaScript. Он помогает писать приложения, которые ведут себя стабильно, работают в разных средах (веб-клиенты, серверы, мобильные приложения и т. д.) и легко тестируются.
Кстати, фреймворк, который Redux заимствует из одной из своих основных идейFlux, вы можете изучить его, если вам интересно.
Bobx, простая, расширяемая библиотека управления состоянием. Сам не пользовался, поэтому не буду вдаваться в подробности.
Вариант 6: привязка
Картинку можно сделать, так что много объяснять не буду.
Пример кода, использующего привязку функции стрелки, выглядит следующим образом:
class SayHello extends React.Component {
constructor(props) {
super(props);
this.state = {message: 'Hello!'};
}
// 使用箭头函数banding
handleClick = () => {
alert(this.state.message);
}
render() {
return (
<button onClick={this.handleClick}>
Say hello
</button>
);
}
}
Пример кода, использующего привязку в конструкторе, выглядит следующим образом:
class SayHello extends React.Component {
constructor(props) {
super(props);
this.state = {message: 'Hello!'};
// 在用构造函数banding
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
alert(this.state.message);
}
render() {
return (
<button onClick={this.handleClick}>
Say hello
</button>
);
}
}
Выбор 7: стиль
Слишком много стилей на выбор, мы не будем перечислять их все, мы выбрали несколько вариантов, обычно используемых разработчиками React, выбор массы на картинке ниже.
По выбору масс кажется (из-за неизвестного количества людей на картинке выше выборка маловата, можно только сказать, что) CSS-in-JS съедает долю CSS-модулей.
Кори Хаус решил писать код с использованием SASS, названного достаточно с использованием BEM, его также беспокоитstyled-components.
Я склоняюсь к разделению логики, структуры и стиля, на данном этапе я все еще использую SASS и использую БЭМ для нейминга. Недавно я обсуждал более подходящую организацию стилей CSS и метод именования. В будущем будет специальная статья ("Серия решений по архитектуре CSS"). Эта статья не будет проводить глубокое исследование.
Вот краткий список решений, как лучше организовать стили:OOCSS, SMACSS, BEM, ITCSS, ECSS, SUIT CSS, Atomic Design, Atomic. Добро пожаловать, чтобы добавить!
Вариант 8: логика мультиплексирования
Следующее, с чем вам придется столкнуться, это как повторно использовать вашу логику, известную поговорку в мире программирования «не повторяйтесь». Молча наблюдая за картой выбора толпы
Изначально использовался ReactMixins, но использование примесей вызовет некоторые ошибки сМиксины считаются вредными.
Компоненты высшего порядка, если вы не понимаете, вы можете прочитать следующие статьи:
- Официальная документация Facebook на английском языкеHigher-Order Components
- китайское чтениеГлубокое понимание компонентов высшего порядка React
Самое популярное решение для продвинутых компонентов, но все же нужно знатьrender props, который легче читать и создавать, чем высокоуровневые компоненты. На самом деле я глубоко не разбирался и не практиковал рендер пропс, поэтому советов дать не могу, решать вам.
Сейчас я использую продвинутые компоненты, и не исключаю использования рендер-пропсов в будущем.Постоянная тема софтверной индустрии - "изменения".Может быть, будет более разумное решение?
Вариант 9: Структура каталогов
Нравится ли вам, чтобы все компоненты совместно использовали папку, как показано ниже
src/
|- App.js
|- RewarmView.js
|- RewarmSearchInput.js
|- RewarmImage.js
|- RewarmLoading.js
|- RewarmError.js
|- giphyLoadData.js
Или у каждого компонента есть своя папка, основная структура следующая
src/
|- App.js
|- RewarmSearch/
|- index.js
|- View.js
|- SearchInput.js
|- Image.js
|- Loading.js
|- Error.js
|- loadData.js
Уберите папку, она выглядит аккуратно?
src/
|- App.js
|- RewarmSearch/
Каждый компонент находится в своей папке, подробнее можно прочитать
- Writing Scalable React Apps with the Component Folder Pattern
- 100% правильный способ структурировать React-приложение (или почему такого нет
Личная рекомендация состоит в том, что у каждого компонента есть своя папка, а у вас?
сказать в конце
Несмотря на то, что у меня 6-летний опыт фронтенд-разработки, в статье неизбежно будут пропуски, и она может противоречить вашей идее.Вы можете вносить предложения или высказывать свое мнение.
использованная литература
《8 ключевых решений React Component》(Эта ссылка должна быть через стену)