Автор оригинала: FreeCodeCamp Community Member.
Донавоном Уэстом
Это самоуверенное статья объяснит некоторые красные флаги, чтобы искать при рассмотрении проекта React/JavaScript. Предотвращение этих шаблонов может сделать ваш код более исполнителем, более надежным и проще для обслуживания.
? Посмотрите на ключевое слово
Вернуться в es5 дней, var Были ли единственные средства в нашем распоряжении для создания переменных. ES6 познакомило блок-населенный Пусть и Const ключевые слова.
По моему опыту я вижу очень мало ситуаций, где вы должны использовать Пусть Отказ Конечно, у него есть свое место (например, прилавка), но для большинства приложений Const лучше подходит. Вы скоро понимаете, почему.
Примите следующий общий корпус. Это делает сумма Красный, если негатив, иначе он будет в черном.
let color;
if (amount < 0) { color = 'red';} else { color = 'black';}return ( {formatCurrency(amount)} );Код использует Пусть , но после инициализации цвет Переменная никогда не переносится. Это именно то, что корпус использования для Const Действительно
Мы не можем просто заменить Пусть с Const Из-за того, как код структурирован. Однако, если мы рефикторуем использовать тройное, а Const работает отлично.
const color = amount < 0 ? 'red' : 'black';
Мы не только поехали от 6 строк кода до 1, но, используя Const вместо Пусть Наша оснастка бросит ошибку, если мы непреднамеренно переназнаем Const где-то еще в коде.
Вот вывод от Eslint, если я пытаюсь установить цвет к нулевой после его определения.
/Users/donavon/Projects/my-project/src/index.jsx
43:5 error 'color' is constant
Таким образом, в следующий раз, когда вы почувствуете, как ваша мышечная память начинает ввести Пусть , поймайте себя и используйте Const вместо. Девять раз из десяти, он будет служить вам просто в порядке.
Преимущества использования const
- Заставляет вас написать чистый код
- Проверка скомпилирования непреднамеренной переменной назначение
? Разрушивание – твой друг
По словам MDN :
Это также делает код значительно легче читать. Возьмите этот фрагмент, например.
render() { return( { this.props.isLoading ? 'Loading...' : this.props.children } );}Есть несколько Это .props Операции происходят. Это медленнее выполнить (OK, незначительно, но все же, необходимо возникнуть несколько объектов свойств, которые необходимо возникнуть), и опять же, он добавляет визуальный беспорядок.
render() { const { className, isLoading, children } = this.props;return({isLoading ? 'Loading...' : children});}
Добавляя одну линейку кода, выше, остальная часть кода более читается.
Преимущества разрушения
- Потенциально более быстрый исполнение
- Очиститель
- Менее склонны к скрытым ошибкам, вызванным опечатками
? Распространение над Object.Assign.
Раньше было то, что делает неглубокую копию объекта или создания объекта из других необходимых объектов Объект.assign Отказ Но сегодня, с помощью Babel, мы можем использовать новый синтаксис распространения ES.
Вот какой-то код, использующий Объект.assign Отказ
const defaults = { foo: 'foo', bar: 'bar' };const obj1 = Object.assign({}, defaults, { bar: 'baz' });// {foo:'foo', bar:'baz'}Код ниже выводит одинаковые результаты, но используя синтаксис распространения объекта.
const defaults = { foo: 'foo', bar: 'bar' };const obj1 = { ...defaults, bar: 'baz' };// {foo:'foo', bar:'baz'}Этот «синтаксический сахар» позволяет увидеть данные, на которых вы работаете без всякого шума и загрязнения, вызванного сантехникой ES5. Вы можете прочитать больше о шуме и беспорядке в моей статье « Шум вокруг нас “.
Axel Rauschmayer имеет большое глубокое объяснение распространения против Объект.assign В его статье « ES2018: Отдых/складывать свойства “. Этого стоит ваше время, если вы любите копать в сантехнике.
Преимущества использования распространения
- Меньше беспорядок
- Потенциально более эффективно
? Используя тройное вместо использования логического и
Для простого Если Условия, тройник не правильный инструмент. Я объясняю это подробно в своей статье о троиках и логичном и в своей статье « Условный рендеринг в реакции с использованием троиков и логических и “.
Преимущества, используя логические и
- Меньше беспорядок
? Функция стрелки выражения тела
Функции arrow идеально подходят для написания функциональных компонентов без природы (SFC) без природы и поставляются в двух формах. Форма тела отбора, как это.
const SomeFunction = () => { return 'value';};И форма тела выражения, которая имеет подразумеваемое Возвращение утверждение.
const SomeFunction = () => 'value';
Некоторые люди ошибочно называют эту «одну строку», но, как вы можете видеть ниже, выражение может охватывать несколько строк. Обратите внимание, что я использую скобки и не вьющиеся скобки.
const SomeFunction = () => ( 'value');
Поэтому, если ваша функция возвращает одно выражение, и вам не нужно промежуточные вычислительные Const Заявления, используйте форму выражения на функцию стрелки. Это простая идея, и почти слишком очевидно, когда она написана так, но для некоторых людей это легкая вещь.
К счастью, Eslint снова может прийти к вашему спасению.
/Users/donavon/Projects/my-project/src/index.jsx
12:17 error Unexpected block statement surrounding arrow body; move the returned value immediately after the `=>`
Единственное, что нужно помнить, так это то, что для того, чтобы вернуть объект в форме выражения, вы должны приложить объект литерала в скобках, как и так.
const SomeFunction = () => ({ foo: 'foo', bar: 'bar',});Преимущества функций стрелки тела экспрессии
- Меньше беспорядок
? Высыхать этот дубликат код
Вы не думали, что я бы написал статью о красных флагах в вашем коде, не упоминая сухое, ты? Вот так…
Посмотрите на следующие два SFC.
const Foo = () => ( <;div>Foo Title
...
const Bar = () => ( <;div>Bar Title
...
Обратите внимание, как выделенные разделы кода выше в Фюра и Бар почти идентичны. Очевидно, что они оба отображают заголовок в определенном стиле. Что если у вас был тот же код в 4, 5 или больше места? Высоко вероятно, что любые изменения, сделанные в будущем, потребуют, чтобы вы внесли изменения в несколько мест.
Вы должны ревертировать дубликат кода в свою собственную функцию. Это называется сушкой или Не повторяйте себя Отказ
const Title = text => ({text}
);
const Foo = () => ();...
const Bar = () => ();...
Преимущества сухого кода
- Очиститель
- Более удобный
? Почему вы используете конструктор?
Много раз при написании компонента Class access Class выпуска вы создаете конструктор для установки начального значения Государство Отказ Вот обычный пример.
constructor(props) { super(props); this.state = { count: 0 };}Но знаете ли вы, что вы можете сделать все это, используя предложение о свойствах нового класса? Код выше может быть написан просто как это.
state = { count: 0 };Вы можете прочитать больше об этом в своей статье « Конструктор мертв, давно живут конструктор “.
Преимущества не используя конструктор
- Очиститель
? Заключение
Как я уже сказал, в начале, учится избегать некоторых из этих шаблонов, может сделать ваш код более исполнителем, более надежным и проще для обслуживания.
Это не жесткие и быстрые правила, но общие руководящие принципы предназначены для открытия ваших глаз на другие способы поиска кода. Используйте с осторожностью. Ваш пробег может варьироваться.
Строгие правила Eslint будут идти вдоль того, чтобы помочь вам найти некоторые из них для вас, или … Вы всегда можете пометить меня в ваш запрос на тягу. ?
Я хотел бы извиниться, если эта статья казалась эпизодом воспоминания о вашей любимой Sitcom (я ненавижу тех), но я хотел разоблачить тех из вас, кто никогда не читал мои другие статьи, с шансом погрузиться глубже.
Я также пишу для American Express Engineering Blog. Проверьте мои другие произведения и произведения моих талантливых сотрудников на Americanexpress.io Отказ Вы также можете Следуй за мной в Twitter Отказ
Оригинал: “https://www.freecodecamp.org/news/learn-to-spot-red-flags-in-your-react-javascript-code-d52d5fac85f4/”