Отличия Next и React
2 года назад·4 мин. на чтение
В этой статье рассмотрим ключевые особенности NextJS и ReactJS.
Перед разработкой веб-приложения необходимо принять решение, какой фреймворк или библиотеку использовать. Не секрет, что React — самая популярная JavaScript библиотека в мире.
Хорошим показателем популярности является активность сообщества вокруг определенной темы. И мы видим, что люди охотнее всего задают вопросы и отвечают на них в темах React
Однако, если вы решили использовать React для своего веб-приложения, возможно, вы слышали о Next и о том, что в некоторых вещах он лучше, чем React. Рост популярности Next показывает, что разработчики доверяют ему, хотя это относительно новый конкурент по сравнению с другими фреймворками и самим React.
Что такое React?
Прежде чем мы перейдем к сравнению Next и React, нужно получить некоторые базовые знания о React и Next. Библиотека React была создана Facebook в 2011 году, в 2013 году был открыт ее исходный код. Описание React гласило, что это эффективная, гибкая и декларативная JavaScript библиотека для создания интерактивных веб-приложений. React действительно хорош в разработке веб-приложений, которые требуют постоянного изменения данных в пользовательском интерфейсе. Если вы когда-либо разрабатывали веб-сайт с использованием только примитивных технологий, вы знаете, что после нажатия практически любого элемента веб-сайт обновляется. В наше время сложно найти что-то подобное в сети. Основным строительными блоками React приложений являются компоненты. Они отображают данные, когда эти данные изменяются, React обновляет интерфейс и генерирует новые данные. Этот процесс называется рендерингом.Почему React не фреймворк?
В сети существует множество споров о том, является ли React фреймворком или библиотекой. Это библиотека. Разработчики обычно используют термины «библиотека» и «фреймворк» взаимозаменяемо, однако это не одно и то же. Основными критериями для фреймворков являются:- Фреймворки предоставляют готовые к использованию инструменты, стандарты и шаблоны для быстрой разработки приложений, а библиотеки — нет.
- Фреймворки контролируют вызов библиотек для нашего кода.
- Фреймворки предоставляют правила и рекомендации по написанию кода и структурированию файлов и папок.
- Фреймворки имеют согласованный API, компиляторы, наборы инструментов и библиотеки внутри.
- Когда вы используете фреймворк, управление инвертируется, т. е. фреймворк управляет потоком и вызывает ваш код, в отличие от библиотек, которые позволяют вам управлять потоком приложения.
Что такое Create React App (CRA)?
Чтобы конкурировать с фреймворками, у React есть специальный фреймворк под названием Create React App (CRA). Он включает в себя структурирование файлов и другие инструменты, чтобы React можно было использовать в качестве фреймворка. Это лучший способ создания нового одностраничного приложения в React. CRA создает окружение для создания веб-приложения на основе React и сразу же оптимизирует ваше приложение для продакшена.Что такое Next?
Next, созданный Vercel и выпущенный в 2016 году, представляет собой легковесную платформу с открытым исходным кодом. Он был создан на основе React, чтобы сделать его удобнее и добавить дополнительные функции. Он используется для создания оптимизированных и быстрых веб-приложений благодаря server side рендерингу. Next популярен среди фреймворков, отчасти из-за его особенностей:- Typescript. Этот язык очень популярен, и я бы порекомендовал выучить его, если вы еще этого не сделали.
- Redux. Next полностью поддерживает Redux, что очень нравится разработчикам React.
- Оптимальная скорость. Next умеет рендерить страницы на стороне сервера разными способами. Первый — это привычный рендеринг на стороне сервера (SSR), который позволяет нам извлекать данные и отображать их во время запроса. Второй - статическая генерация, которая использует данные, доступные до запроса, что помогает кэшировать данные и улучшать SEO. Таким образом, поисковые роботы могут взаимодействовать с полностью готовой HTML-страницей. Vercel утверждает, что Next — один из самых быстрых фреймворков.
- Конфигурируемость. Next легко настраивается. Автоматически генерируемые решения для стилей упрощают разработку и предоставляют стартовые шаблоны для запуска вашего проекта.
- Маршрутизация. Создавать маршруты страниц так же просто, как создавать папки.
Отличия Next и React
Теперь, когда мы знаем основы Next и React, мы можем сравнить их и выяснить, почему они в целом являются хорошим выбором.Достоинства React
- Его легче учить, чем Next. React имеет хорошую документацию для быстрого начала работы.
- Для React есть сотни пакетов и инструментов, созданных для облегчения написания кода.
- Сильное сообщество с ~200000 звезд на Github на момент написания статьи значительно упрощает поиск помощи.
- Переиспользуемые компоненты позволяют разработчикам повторно использовать большую часть кода и создавать легко читаемый код.
- Инструмент Create React App позволяет разработчикам быстро и без проблем запускать свои проекты.
Недостатки React
- React приложения загружаются дольше и имеют плохую SEO оптимизацию. Next был создан с учетом SEO оптимизации.
- Производительность не так хороша, как у Next. Приложению нужно больше времени для загрузки.
- Разработчикам нужны такие инструменты, как CRA, для быстрого создания проекта. В противном случае настройка может оказаться сложной и занять слишком много времени.
- React развивается довольно быстро, поэтому разработчикам нужно следить за каждым обновлением React, поскольку новые функции могут быть добавлены в любое время. Документация быстро устаревает и не обязательно обновляется одновременно с обновлениями.
Достоинства Next
- Разработчикам не требуется дополнительная настройка для создания приложения SSR, в то время как для React требуется CRA.
- Не нужно беспокоиться о дополнительных инструментах или сборщиках, так как все делается за вас при создании проекта.
- Создан с учетом SEO. SSR улучшает качество страниц для поисковых роботов, которые посещают ваш сайт и собирают данные для поисковых систем.
- Производительность является большим преимуществом Next, поскольку приложения, созданные с его помощью, работают быстро благодаря SSR и статической генерации.
- Next оптимизирует изображения, что улучшает производительность.
- Next имеет собственную структуру папок, что делает процесс разработки интуитивно понятным и простым.
Недостатки Next
- Маршрутизация не такая гибкая, так как у Next есть своя встроенная.
- Без основ React будет сложнее создавать новые проекты.
Итоги
И Next, и React с CRA — отличные инструменты для удобной разработки. Next предоставляет быструю и легкую структуру, использующую SSR и отрисовку статического сайта. React, с другой стороны, отлично подходит для создания одностраничных веб-приложений. React более универсален, чем Next, так как это библиотека, а не фреймворк. Для пользователей React, уже знакомых с CRA, переход на Next не будет большой проблемой, а выигрыш может быть огромным с точки зрения SEO оптимизации и производительности.Вопросы по React на собеседовании
2 года назад·3 мин. на чтение
В этой статье рассмотрим вопросы, которые могут встретиться на собеседовании по ReactJS на позицию React или frontend разработчика в 2023 году.
Что нового появилось в 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 могут иметь только один корневой элемент?- Компонент 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') ] ) } }
- Виртуальный 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 компонентами?
Существует множество способов взаимодействия компонентов, которые можно разделить на следующие категории:- Взаимодействие родительского компонента с дочерним компонентом
- Дочерний компонент взаимодействует с родительским компонентом
- Общение между соседними элементами
- Родительский компонент взаимодействует с дочерними компонентами
- Связь независимых компонентов