Що б я хотів знати, коли я почав працювати з React.js

Після первинного випуску 29 травня 2013 року React.js захопив Інтернет. Не секрет, що я та багато інших розробників зобов'язані своїм успіхом саме цій дивовижній структурі.

З Medium, настільки повним посібників 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(this)до кожного методу, який існує, оскільки більшість навчальних посібників вам це роблять. Якщо у вас є кілька контрольованих компонентів, ви отримаєте жирний набір кодів у вашому constructor(){}.

Натомість ви можете:

class Foo extends React.Component{
 handleClick = (event) =>; { // your event handling logic }
 render(){ return (  Click Me  ); }}

Як?

Функція стрілки ES6 використовує Lexical Scoping, що дозволяє методу отримувати доступ до thisтого, де він ініціюється.

Коли працівники служби працюють проти вас

Сервісні працівники чудово підходять для прогресивного веб-додатку, який забезпечує автономний доступ та оптимізує для користувачів з поганим з’єднанням з Інтернетом.

Але коли ви не знаєте, що працівник служби кешування ваших статичних файлів, ви розгортаєте свої виправлення неодноразово.

Тільки пошук вашого сайту не оновлюється. ?

Не панікуйте, переконайтеся, що src/index.js:

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

Починаючи з версії 16.8, цей рядок повинен бути serverWorker.unregister()за замовчуванням.

Але якщо вони вирішать знову змінитись, ви будете знати, де шукати.

99% часу вам не потрібно викидати

Додаток Create React пропонує опцію для yarn ejectвашого проекту для налаштування процесу збірки.

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

Викинути ваш проект React - це все одно, що вискочити капот вашого автомобіля, що працює, і змінити двигун на льоту, щоб він працював на 1% швидше.

Звичайно, якщо ви вже майстер Webpack, варто налаштувати процес збірки відповідно до потреб проекту.

Коли ви намагаєтеся виконувати вчасно, зосередьте свої зусилля на тому, куди вона рухає голку вперед.

ESlint Auto Fix On Save економить стільки часу

Можливо, ви скопіювали якийсь код звідкись, що не має форматування. Оскільки ви не можете терпіти, як це виглядає потворно, ви проводите час вручну, додаючи пробіли.

За допомогою ESLint та Visual Studio Code Plugin він може виправити це для вас за збереження.

Як?

  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 вже пропонує щось прямо з коробки?

Завдяки контексту та хукам, доступним для React зараз, вам все ще потрібен Redux?

Я настійно рекомендую Redux Offline, коли ваші користувачі перебувають у поганому середовищі підключення до Інтернету.

Reuse event handler

If you don’t feel like typing the same thing over and over again, reusing an event handler could be an option:

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 is asynchronous

The naïve me would write something like:

 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 } };

Option 1: Passing the state down

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

Option 2: The secondary function to the callback of setState

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

Conclusion

These tips saved me a lot of time, and I am sure there are more. Please feel free to share them in the comments section.

If you are looking to integrate your website with WeChat and reach 1+ billion users in China, sign up for a free glossary for commonly used WeChat terms.