Как senior разработчики создают React приложения

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

Основные принципы React

В основе React лежит набор основных принципов. Понимание этих принципов является ключом к созданию масштабируемых, поддерживаемых приложений React. Одним из наиболее фундаментальных принципов React является концепция «однонаправленного потока данных». Это означает, что данные проходят через приложение в одном направлении, от родительских компонентов до дочерних компонентов. Структурируя приложение таким образом, можно создать четкий и предсказуемый поток данных, упрощающий управление кодом и его отладку. Другим основным принципом React является использование «виртуальной модели DOM» (Document Object Model). Виртуальный DOM представляет собой абстракцию собственной модели DOM браузера, которая позволяет React более эффективно обновлять пользовательский интерфейс, сводя к минимуму количество требуемых фактических обновлений DOM. Используя виртуальный DOM, React может обновлять пользовательский интерфейс быстрым и отзывчивым способом, не требуя ненужных повторных отрисовок или обновлений.

Рекомендации по структурированию и организации кода

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

Компонентная архитектура

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

Разделение ответственности

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

Повторное использование кода

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

Масштабируемая структура папок

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

Инструменты и методы оптимизации производительности и масштабируемости

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

Рендеринг на стороне сервера

Отрисовка на стороне сервера (SSR) может помочь сократить время начальной загрузки приложения, отрендерив исходный HTML-код на сервере, а не ожидая, пока клиент загрузит и запустит JavaScript. Это может привести к более быстрому взаимодействию с пользователем, особенно в более медленных сетях или устройствах.

Разделение кода

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

Мемоизация

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

Профилирование производительности

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

Автоматизированное тестирование

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

Что нового появилось в React 18?

1. Автоматический батчинг setState

В React 17 только React события будут обрабатываться пакетно, а нативные JavaScript события, промисы, setTimeout и setInterval обрабатываться не будут. В React 18 все события обрабатываются пакетно, т.е. несколько setState будут объединены в одно выполнение, что повышает производительность. На уровне данных несколько обновлений состояния объединяются в одну обработку (на уровне представления несколько визуализаций объединяются в одну визуализацию).

2. Новый root API

В React 18 представлен новый root API, который поддерживает новый конкурентный рендеринг.

// React 17
import React from "react"
import ReactDOM from "react-dom"
import App from "./App"

const root = document.getElementById("root")
ReactDOM.render(root, <App />)

// unmount the component
ReactDOM.unmountComponentAtNode(root) 

// React 18
import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"

const root =  document.getElementById("root")
ReactDOM.createRoot(root).render(<App />)

// unmount the component
root.unmount()

3. Прекращение поддержки IE

Удалена поддержка браузера IE. Все новые функции, представленные React 18, основаны на современных браузерах. Если вам нужна поддержка IE, вам нужно вернуться к версии React 17.

4. flushSync

Используется, чтобы заставить React сбросить всю ожидающую работу и синхронно обновить DOM.

import React, {useState} from "react"
import {flushSync} from "react-dom"

const  App = () => {
  const [count, setCount] = useState(0)
  const [count2, setCount2] = useState(0)

  return (
    <div className="App">
      <button onClick={() => {
        // первое обновление
        flushSync(() => {
          setCount(count => count + 1)
        })
        // второе обновление
        flushSync(() => {
          setCount2(count2 => count2 + 1)
        })
      }}>click</ button >
       
      <span>count: {count}</ span >
      <span>count2: {count2}</ span >	
     </div>	
  )
}

export default App

5. Возвращаемое значение React компонента

В React 17 для возврата пустого компонента можно использовать только null, а явное возвращение undefined вызовет ошибку. В React 18 поддерживается возврат null и undefined.

6. Поддержка useId

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

7. Concurrent mode (Конкурентный режим)

Конкурентный режим — это не фича, а архитектура. Это помогает приложениям оставаться отзывчивыми, подстраиваясь под производительность устройства пользователя и скорость сети, а также устраняет блокировку механизмов рендеринга, делая рендеринг прерываемым. В React несколько состояний могут быть обновлены одновременно. Разница в том, чтобы синхронные непрерываемые обновления стали асинхронными прерываемыми обновлениями. useDeferredValue и startTransition используются для обозначения несрочного обновления.

Почему React компоненты не могут возвращать несколько элементов?

Почему компоненты React могут иметь только один корневой элемент?

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

class App extends React.Component{
  render() {
    return(
      <div>
        <h1 className="title">Hello</h1>
        <span>World</span>	
      </div>	
    )
}

// После компиляции
class App extends React.Component {
  render() {
    return React.createElement('div', null,
      [
        React.createElement('h1', {className:'title'}, 'Hello'),
        React.createElement('span', null, 'World')
      ]
    )
  }
}

2. Виртуальный DOM React представляет собой древовидную структуру, и корневой узел дерева может быть только один. При наличии нескольких корневых узлов невозможно подтвердить, какое дерево нужно обновить.

Как компоненты React могут возвращать несколько компонентов?

• Используя HOC (Higher Order Functions)
• Используя React.Fragment, вы можете добавить список элементов в группу, не создавая дополнительных узлов.

renderList() {
  list.map((item, key) => {
    return (
      <React.Fragment>
        <tr key={item.id}>
          <td>{item.name}</td>
          <td>{item.age}</td>
          <td>{item.address}</td>
        </tr>	
      </React.Fragment>
    )
  })
}

• Используя массив

renderList(){
  list.map((item, key) => {
    return [
      <tr key={item.id}>
        <td>{item.name}</td>
        <td>{item.age}</td>
        <td>{item.address}</td>
      </tr>
    ]
  })
}

Каковы способы общения между React компонентами?

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

• Взаимодействие родительского компонента с дочерним компонентом
• Дочерний компонент взаимодействует с родительским компонентом
• Общение между соседними элементами
• Родительский компонент взаимодействует с дочерними компонентами
• Связь независимых компонентов

Подробнее о каждой категории можно прочитать в этой статье.

Также по теме собеседований рекомендую прочитать:

• ТОП 10 вопросов на собеседовании ReactJS
• Собеседование ReactJS - вопросы и ответы
• Собеседование фронтенд разработчика. ТОП вопросов по HTTP и CORS