Мы объединились с Open SourceCraft, чтобы предложить вам 6 профессиональных советов от разработчиков React .
Если вы новичок в React, вы можете извлечь пользу из успеха и неудач разработчиков React, которые извлекли ценные уроки об этой среде.
Совет 1: используйте функциональные компоненты
Кэм Джексон
Если вам не нужны методы внутреннего состояния или жизненного цикла вашего компонента, используйте вместо этого функциональный компонент. Функциональный компонент — это чистая функция JavaScript, которая принимает props
Преимущества функциональных компонентов:
- Меньше кода
- Легче понять
- Компонент не имеет состояния, поэтому вы избегаете случайного сохранения состояния в компоненте, который вы не должны
- Компонент проще тестировать
- Там нет
this - Проще увидеть, где и когда извлечь мелкие компоненты
Совет 2. Держите ваши компоненты маленькими
Рэнди Коулман
Мелкие компоненты легче:
- Читать
- Тестовое задание
- поддерживать
- Повторное использование
Извлечение компонентов сделает ваше приложение более организованным, более модульным и более структурным. Помните Совет 1 и извлекайте блоки кода в функциональные компоненты, когда это возможно.
Совет 3: понять, как справиться с this
Кори Дом
Первый способ справиться с this
Но если вы используете класс ES6, вам нужно связать this
Есть несколько способов сделать это.
- Связать в рендере
- Используйте функцию стрелки в рендере
- Привязка в конструкторе
- Используйте функцию стрелки в свойстве класса
Посмотрите видео, чтобы увидеть эти методы на практике.
Совет 4: используйте функцию в setState
София Шумейкер
Согласно документации React, React не гарантирует, что изменения состояния будут применены немедленно.
Поэтому чтение this.statesetState()this.state
Поэтому вместо обновления состояния с помощью объекта обновите его функцией, чтобы избежать этой потенциальной ошибки.
Совет 5: используйте проп-типы
Адам Яр
prop-types Это внешний пакет, который вы можете установить через npm или другим способом. Просто импортируйте пакет, затем добавьте propTypes к вашему компоненту и наберите соответственно. Если вы хотите, чтобы реквизит был необходим, просто добавьте .isRequired
Совет 6: Используйте инструменты React Developer
Брайан Гейтс
С помощью React Developer Tools , которые доступны как расширение Google Chrome и Firefox, а также как отдельное приложение для других сред, вы можете быстро просматривать иерархию компонентов, проверять и редактировать свойства и состояние компонента, а также вызывать методы для компонента в DevTools. ,