Что я хотел бы знать, когда я начал работать с React.js

Автор оригинала: FreeCodeCamp Community Member.

Давид Ю.

После первоначального выпуска 29 мая 2013 года React.js взял через Интернет. Это не секрет, что я и многие другие разработчики должны их успех в этой удивительной структуре.

С средней наполненной React.js Учебники, я желаю, чтобы один из них рассказал мне эти советы, когда начал.

Не нужно .bind (это) при использовании функции стрелки

Обычно у вас будет что-то подобное, когда у вас есть контролируемый компонент:

class Foo extends React.Component{  constructor( props ){    super( props );    this.handleClick = this.handleClick.bind(this);  }

  handleClick(event){    // your event handling logic  }

  render(){    return (            Click Me          );  }}

Вы пишете .bind (это) К каждому методу, который существует, потому что большинство учебников говорят вам сделать это. Если у вас есть несколько контролируемых компонентов, вы получите жирный стог кодов в вашем Конструктор () {} Отказ

Вместо этого вы можете:

class Foo extends React.Component{

  handleClick = (event) =>; {    // your event handling logic  }

  render(){    return (              Click Me          );  }}

Как?

Функция стрелки ES6 использует Лексический навес , который позволяет методу доступа к это откуда он сработал.

Когда службы работники работают против вас

Работники обслуживания отлично подходят для Прогрессивное веб-приложение , что позволяет бесплатно доступом и оптимизировать для пользователей с плохими интернет-соединениями.

Но когда вы не знаете, что сервисный работник кэширует ваши статические файлы, вы многократно развертываете ваши фиксимы.

Только чтобы найти ваш сайт не обновляет. ?

Не паникуйте, убедитесь, что в вашем SRC/index.js :

// Make sure it's set to unregisterserviceWorker.unregister();

Нашей версии 16.8 эта линия должна быть ServerWorker.unregister () по умолчанию.

Но если они решили измениться снова, вы узнаете, где посмотреть.

99% случаев, когда вам не нужно извлечь

Создать ract app предлагает возможность пряжа извлечь Ваш проект для настройки процесса сборки.

Я помню, как пытаться настроить процесс сборки, чтобы автоматически включить изображения SVG в нашем коде. Я провел часы, просто пытаясь понять процесс сборки. В конечном итоге имеем импортный файл, который впрыскивает теги SVG, и мы увеличили скорость загрузки сайта на 0,0001 миллисекунды.

Извлечение вашего проекта React Project – это как выскакивать капот вашего бегущего автомобиля и изменение двигателя на лету, чтобы запустить на 1% быстрее.

Конечно, если вы уже у вас WebPack Master, стоит настроить процесс сборки, чтобы адаптировать потребности проекта.

Когда вы пытаетесь доставить вовремя, сосредоточьте свои усилия, где он перемещает иглу вперед.

ESLINT AUTO исправить на сохранении экономит так много времени

Возможно, вы скопировали какой-то код от куда-то, которые вышли из форматирования Whack. Потому что вы не можете стоять, насколько уродливы это выглядит, вы проводите время вручную добавлять пространства.

С помощью плагина Eslint и Visual Studio Code он может исправить его для сохранения.

Как?

1. В вашем Package.json Добавьте некоторые зависимости Dev и сделайте NPM I или пряжа :

"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, стилизованные компоненты и т. Д…

Каждый инструмент имеет свое назначение. Это сказано, хорошо знать о различных инструментах.

Вам нужно подумать о времени настройки для некоторых из библиотек, которые вы используете и сравните его с:

• В чем проблема, которую я пытаюсь решить?
• Будет ли этот проект жить достаточно долго, чтобы воспользоваться этой библиотекой?
• Реагирование уже предложит что-то прямо из коробки?

С Контекст и Крючки Доступно для реакции сейчас, вам все еще нужно redux?

Я очень рекомендую Redux офлайн Для того, когда ваши пользователи в плохой среде подключения к Интернету.

Повторно использовать обработчик событий

Если вы не хотите печатать то же самое снова и снова, повторное использование обработчика событий может быть вариантом:

class App extends Component {

 constructor(props) {  super(props);  this.state = {   foo: "",   bar: "",  }; }

 // Reusable for all inputs onChange = e => {  const {   target: { value, name },  } = e;    // name will be the state name  this.setState({   [name]: value  });

 };  render() {  return (   
              
  ); }}

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) {   // Do some filtering  } };

Вариант 1: передача состояния вниз

toggleFilter = () => { const currentFilterState = !this.state.isFiltered; this.setState({  isFiltered: currentFilterState }); this.filterData(currentFilterState);};

filterData = (currentFilterState) => { if (currentFilterState) {  // Do some filtering }};

Вариант 2: Вторичная функция к обратным вызовам STESTATE

toggleFilter = () => { this.setState((prevState) => ({  isFiltered: !prevState.isFiltered }), () => {  this.filterData(); });};

filterData = () => {  if (this.state.isFiltered) {   // Do some filtering  }};

Вывод

Эти советы спасли меня много времени, и я уверен, что есть больше. Пожалуйста, не стесняйтесь делиться ими в разделе комментариев.

Если вы хотите интегрировать свой веб-сайт с WECHAT и достигнуть 1+ миллиардов пользователей в Китае, подписаться на Бесплатный глоссарий для часто используемых терминов Wechat Отказ