[Перевод] Хотел бы я знать эти советы до того, как изучу React.js

Оригинальный адрес:What I wish I knew when I started to work with React.js

Оригинальный автор:David Yu

Перевод с:Программа перевода самородков

Постоянная ссылка на эту статью:GitHub.com/rare earth/gold-no…

Переводчик:xionglong58

Корректор:xujiujiu,wznonstop

Photo by [Ben White](https://unsplash.com/@benwhitephotography?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)

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

На Medium есть много руководств по React.js, и мне очень жаль, что не было такого, который дал бы мне несколько советов, перечисленных ниже, когда я был новичком в React.js.

Операция .bind(this) не требуется при использовании стрелочных функций.

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

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

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

  render(){
    return (
      <button type="button" 
      onClick={this.handleClick}>
      Click Me
      </button>
    );
  }
}

Почему вы используете для каждого метода.bind(this), потому что большинство руководств советуют вам сделать это. Когда у вас много контролируемых компонентов,constructor(){}будет выглядеть очень громоздко.

На самом деле, вы можете сделать это:

class Foo extends React.Component{

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

  render(){
    return (
      <button type="button" 
      onClick={this.handleClick}>
        Click Me
      </button>
    );
  }
}

как?

Стрелочные функции в ES6 используютлексический охватдает методу доступ к месту, где он был определенthis.

Когда сервисные работники мешают вашему развитию

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

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

Но обнаружил, что сайт не обновлялся. 😰

Не паникуйте, убедитесь, что вашsrc/index.jsФайл имеет следующее содержимое:

// 确保注销 service worker
serviceWorker.unregister();

Начиная с версии 16.8 React.js, приведенная выше строка по умолчанию имеет значениеserverWorker.unregister().

Однако, если в будущих версиях будут изменения, вы также будете знать, где внести изменения.

В 99% случаев вам не нужно использовать выброс

Create React Appпредоставить командуyarn eject, что позволяет настроить процесс сборки проекта.

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

Выброс вашего проекта React подобен открытию капота работающей машины и замене двигателя на ходу.

Конечно, если вы руководитель Webpack, стоит настроить процесс сборки в соответствии с потребностями вашего проекта.

Если вы просто хотите уложиться в сроки, сосредоточьте всю свою энергию на том, что будет продвигать вас вперед.

Автоматическое исправление ESlint при сохранении сэкономит вам много времени

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

При использовании ESLint и подключаемого модуля Visual Studio Code код автоматически выравнивается при сохранении файла.

Как это настроить?

В твоемpackage.jsonДобавьте в файл некоторые зависимости разработчика и выполните команду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"

}

Установите расширение ESLint

Проверить автоматическое исправление при сохранении

Вам не нужны библиотеки, такие как Redux, стилизованные компоненты и т. д.

У каждого инструмента есть свое предназначение, и действительно полезно знать о различных инструментах.

Если у вас в руке молоток, все выглядит как гвоздь. - Авраам Маслоу

При использовании некоторых библиотек необходимо учитывать временные затраты на их внедрение, а также следующие вопросы:

Какую проблему я собираюсь решить?
Может ли проект извлечь выгоду из этой библиотеки в долгосрочной перспективе?
Сам React уже предоставляет готовое решение?

Когда у React естьContextиHooksВам действительно все еще нужен Redux?

Я особенно рекомендую это, когда ваши пользователи находятся в плохой сетевой среде.Redux Offline.

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

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

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 (
   <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 值应该为 true，但事实上却为 false
  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) {
  // 做些过滤操作
 }
};

Предложение 2: манипулировать состоянием во второй функции обратного вызова setState

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

filterData = () => {
  if (this.state.isFiltered) {
   // 做些过滤操作
  }
};

Суммировать

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

(Время рекламы) Если вы хотите, чтобы ваш сайт был интегрирован с платформой WeChat и привлек более 1 миллиарда пользователей, быстро зарегистрируйтесь, чтобы получитьГлоссарий общих терминов Wechat.

Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,продукт,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.