Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Хорошая и плохая практика написания кода на ReactJS и JavaScript

Coding Style Guide

Это руководство содержит в себе наиболее разумный подход к написанию JavaScript и ReactJS (JSX) кода.

Основные правила

  1. Компонент не должен содержать в себе состояний.
  2. Компоненты делятся на два типа:
  • Presentation component — презентационный компонент. Главная роль — отображение переданных данных от контейнера.
  • Container — контейнер. Главная роль — хранение функциональной части и логики компонента. Передаёт итоговые данные в презентационный компонент.

В презентационном компоненте не желательно хранить логику или любую другую функциональную часть. Исключение — компонент-класс.

  1. Не создавать компонент-класс, если нет определённой необходимости.
  2. Используйте библиотеку lodash для работы с объектами и массивами. Безопасный метод _.get предотвратит ошибки при работе с объектами.

PropTypes

  1. Всегда указывайте явные defaultProps для всех свойств, которые не указаны как необходимые.

Почему? propTypes является способом документации, а предоставление defaultProps позволяет читателю вашего кода избежать множества неясностей. Кроме того, это может означать, что ваш код может пропустить определенные проверки типов. Пример верного и неверного решения: https://gist.github.com/Archakov06/45fe1264dca019d48a0c32c49a56d356

ReactJS: Good / Bad

Анонимная функция (передача аргументов вручную)

// ✅ GOOD
<Button onClick={removeItem.bind(this, id)}>Удалить</Button>

// ❌ BAD
<Button
  onClick={() => {
    removeItem(id);
  }}>
  Удалить
</Button>

Старайтесь не создавать анонимную функции, для передачи данных в другую функцию. Для подобной ситуации, используйте метод — .bind().

Метод bind() создаёт новую функцию, которая при вызове устанавливает в качестве контекста выполнения this предоставленное значение. В метод также передаётся набор аргументов, которые будут установлены перед переданными в привязанную функцию аргументами при её вызове.

В onClick передавайте функцию removeItem с привязкой контекст и новых аргументов.

Подробнее о .bind(): https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Анонимная функция (передача аргументов по умолчанию)

// ✅ GOOD
<Input onChange={this.props.onChange} />

// ✅ GOOD
<Input onChange={this.props.onChange.bind(this, 'myField')} />

// ❌ BAD
<Input onChange={value => this.props.onChange(value)} />

В данном случае, метод onChange автоматически передаст value первым аргументом в функцию this.props.onChange.

Если же вы хотите добавить дополнительные аргументы, после value, пробрасывайте их через .bind(this, ...). В итоге, onChange получит 2 значания — введённое значение пользователем и строку myField.

Redux: Good / Bad

Передача объекта с экшенами в метод connect()

// ✅ GOOD
const mapDispatchToProps = dispatch => bindActionCreators(appActions, dispatch);

// ✅ GOOD
import { action1, action2, action3 } from 'src/actions/appActions';

const mapDispatchToProps = {
  action1,
  action2,
  action3
};

// ✅ GOOD
connect(mapStateToProps, appActions);

// ❌ BAD
const mapDispatchToProps = dispatch => ({
  ...bindActionCreators(appActions, dispatch)
});

Вы можете передать в connect() вторым аргументом объект, содержащий в себе все ваши экшены. Не обязательно передавать функцию вторым аргументом.

JavaScript: Good / Bad

Условный оператор

// ✅ GOOD
if (a > b) {
  calculate(a, b);
}

// ❌ BAD
if (a > b) calculate(a, b);

Подробнее: https://goo.gl/iNhtc7

Полезные материалы, источники:

Список полезных материалов и некоторых источников, откуда я брал правила написанию кода на ReactJS и JavaScript.

Ресурсы (ReactJS):

Ресурсы (JavaScript):

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment