Что нужно знать новичкам в React

JavaScript React.js

Добавить Автора

Переводчик: Front-end Xiaozhi

Источник: среда

Ставь лайк и смотри, поиск в WeChat【Переезд в мир】Обратите внимание на этого человека, который не имеет большого фабричного прошлого, но имеет восходящий и позитивный настрой. эта статьяGitHub GitHub.com/QQ449245884…Он был включен, статьи были классифицированы, и многие мои документы и учебные материалы были систематизированы.

Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.

.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)решать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:

// 将它注销掉
serviceWorker.unregister();

Начиная с версии 16.8, по умолчаниюserverWorker.unregister()。

Не нужно запускать в 99% случаевejectЗаказ

Create React APPпредоставляет возможностьyarn eject, вы можете открывать проекты для настройки процесса сборки.

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

Извлечение проекта React похоже на открытие капота работающей машины при динамическом изменении двигателя, чтобы он работал на 1% быстрее.

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

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

ESlint Auto экономит много времени благодаря автоматическому форматированию.

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

Используя ESLint и плагин Visual Studio Code, он может отформатировать его для вас при сохранении.

как установить

1. В вашем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"
}

2. Установите плагин ESLint

3. Запустите автоматическое исправление при сохранении

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

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

Если у вас есть только молоток, все выглядит как гвоздь

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

  • Какую проблему я пытаюсь решить

  • Выиграет ли этот проект от этой библиотеки в долгосрочной перспективе?

  • Предоставляет ли React что-то из коробки?

Теперь вы можете использовать ReactContextа такжеHook, вам все еще нужен 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，但事实并非如此，因为 setState 是异步的
  // isFiltered还没有改变
  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: используйте функцию обратного вызова setState

toggleFilter = () => {
 this.setState((prevState) => ({
  isFiltered: !prevState.isFiltered
 }), () => {
  this.filterData();
 });
};
filterData = () => {
  if (this.state.isFiltered) {
   // Do some filtering
  }
};

Суммировать

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

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

оригинал:medium.free код camp.org/what-i-wish…

общаться с

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.

Категории