02
Май
2019

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

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

От автора: после релиза 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.

Share

Тебе может это понравится...