Основные выводы из моего опыта в качестве разработчика React

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

Я подумываю о том, чтобы написать серию публикаций о моем пути ко всем этим технологиям, и я хотел бы начать с моего пути и опыта работы с React. Почему React first? Нет особой причины, но это технология, над которой я работаю больше всего в последнее время, и я думаю, что у меня есть хорошее сообщение.

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



Небольшие советы по написанию лучшего кода React
Узнайте, как использовать некоторые функции JavaScript, чтобы повысить свои навыки программирования на React и сделать код чище. levelup.gitconnected. com



Никогда не переставай учиться

Я знаю, что этот раздел не похож на конкретный урок React, но он очень важен. Так что прочтите меня!

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

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

Скорость, с которой вносятся изменения, заставляет нас постоянно читать документацию и сообщения в блогах, чтобы понять, что нового, почему мы должны это использовать и как. Но не думайте об этом как об обузе. Все эти изменения намеренно вносятся в фреймворки и языки программирования, чтобы облегчить нашу жизнь или сделать ее удобнее для пользователей; во всех случаях это выигрышная ситуация.

Оставайся голодным. Оставайся глупым.

Минимализм - твой лучший друг

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

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

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

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

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

function UserApprovalForm({ changeApproveStatus, status }) {
  return (
    <>
      <ChangeButton
          onClick={changeApproveStatus}
          text="Approved?"
      />,
      <UserInformation status={status} />
    </>
  );
}

Делайте компоненты простыми!

Не бойтесь рефакторинга

Я много раз читал в Интернете (вероятно, на Reddit), что вам нужно провести рефакторинг, потому что изначально код был ужасным, и я не мог не согласиться с этим. Я считаю, что рефакторинг не только необходим, но и нормален. Я считаю, что ваше приложение развивается, чтобы соответствовать требованиям будущего.

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

Почему вы попали в ситуацию, когда вам нужно провести рефакторинг, сказать сложно, но вот несколько идей:

  • Обновления библиотеки, в которых представлены новые шаблоны, концепции, идеи или способы решения проблем.
  • Код, который некоторое время рос небольшими приращениями, со временем сложность росла, и теперь его трудно поддерживать.
  • Прекращение поддержки функций

Вот пример того, как рефакторинг может улучшить читаемость путем обновления кода благодаря новым функциям в React:

Пример класса:

class BookList extends React.Component {
  componentDidMount() {
    this.props.fetchBooks(this.props.bookGenre);
  }
  componentDidUpdate(prevProps) {
    if (prevProps.bookGenre !== this.props.booksGenre) {
      this.props.fetchBooks(this.props.bookGenre);
    }
  } 
// ... }

Пример хуков:

const BookList = ({ bookGenre, fetchBooks }) => {
  useEffect(() => {
    fetchBooks(bookGenre);
  }, [bookGenre]);
// ... }

Воспользуйтесь рефакторингом как средством очистки кода и не бойтесь тормозить; помните, что у вас есть тесты! ;)

В React есть больше, чем вы знаете.

React - это гораздо больше, чем сама библиотека; другие библиотеки прекрасно работают с React, и вам необходимо изучить их; есть шаблоны, лучшие практики и т. д.

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

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

Некоторые примеры того, что вы можете попробовать:

  • Ссылки и контекст
  • Компоненты высшего порядка
  • Расширенные шаблоны и функции JS
  • Мемоизация
  • и другие

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

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Изучите расширенные функции и узнайте, как они работают

Заключение

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

Будьте в курсе последних событий, но этого недостаточно; опыт приходит от изучения новых вещей и понимания того, как они работают.

Я надеюсь, что эта статья окажется для вас полезной, и, пожалуйста, оставьте в комментариях, какие у вас есть лучшие уроки из работы с React. Ты согласен со мной?

Спасибо за прочтение!