Рубрики
Без рубрики

Реагировать 18 здесь! Какие новости?

React Core Team недавно выпустила альфа-версию React18. Этот выпуск более сосредоточен на пользователю … Теги с архитектурой, предпринимательской обработкой, JavaScript, реагируют.

React Core Team недавно выпустила альфа-версию React18. Этот выпуск более сосредоточен на изменении пользователей и внутренних изменений в архитектуре, включая адаптацию к одновременным функциям.

Мы можем установить React 18 сразу, используя:

npm install react@alpha

И реагировать,

npm install react-dom@alpha

Что нового?

1. Новый корневой API:

Мы обычно создаем уровень DOM корневого уровня, как его и добавьте приложение React. Теперь это было обесначено и теперь называется «устаревшим корнем API»

import React from 'react';
import ReactDOM from 'react-dom';

const container = document.getElementById('root') 

ReactDOM.render(, container);

Вместо этого новый Root api Введен в Rect18, который выглядит так:

import React from 'react';
import ReactDOM from 'react-dom';
import App from 'App'

const container = document.getEleementById('root')

const root = ReactDOM.createRoot(container)

root.render()

Rect18 будет отправлять с обоими Уничный корневой API и Новый корневой API Для поддержания плавного перехода реакции 17 (или более старых) приложений для реагирования на 18.

Использование нового корневого API над устаревшим корневым API:

Есть довольно много улучшений:

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

Уничный корневой API:

import ReactDOM from 'react-dom'
import App from 'App'

const container = document.getElementById('app');


ReactDOM.hydrate(, container)

Новый корневой API:

import ReactDOM from 'react-dom';
import App from 'App';

const container = document.getElementById('root');


const root = ReactDOM.createRoot(container, { hydrate: true });

root.render();

Узнайте больше о Гидратации здесь

b. ) Улучшения в Render Callback:

В Legacy Coot API мы могли бы пройти функцию обратного вызова рендеринга. Это анонимная функция, которая отображается/проходит после установки корневого компонента.

import React from 'react';
import ReactDOM from 'react-dom';
import App from 'App'

const container = document.getElementById('root')

ReactDOM.render(, container, function(){
    console.log('render only after initial component rendering')
})

console.log('render at very last')

Этот подход был изменен в новом корневом API, а не используя обратные вызовы, React Team предлагает использовать RequestLeCallback или даже родные совокупность

2. apertransition API:

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

Один важный случай для StartTransition может быть, когда пользователь начинает печатать в поле поиска. Входное значение должно быть немедленно обновлено, пока результаты поиска могут подождать несколько миллисекунд (как ожидалось пользователем).

Этот API обеспечивает способ различий между быстрыми обновлениями и задержанными обновлениями. Задержанное обновление (то есть. Переход одного вида интернет-интерфейса к другому) называется обновлениями перехода.

Для срочных обновлений, таких как набрав, наведите, нажав, мы называем реквизиты/функции, как правило, как это:

setText(input)

Для неясных или тяжелых обновлений пользовательских интерфейсов мы можем обернуть его в StartTransition API как:

startTransition(() => {

  setText(input);
});

3. Строгие эффекты, приходящие к строгую режиму:

Rect18 будет отправлять вместе с Строгие эффекты Режим сейчас. Так же, как Строгий режим , это было бы для развития сборки и улучшению DX.

Когда компонент завернут в строгие эффекты, Rect надо «намеренно» запускают побочные эффекты дважды, чтобы обнаружить необычное поведение/шаблон, который обычно болевой момент при работе с Useffect Функции монтажа и очистки.

Безопасные эффекты дважды несколько нравятся, крепление -> Размонтируйте -> монтировать

4. Улучшения SSR:

Рендеринг на стороне сервера получает архитектурный капитальный ремонт в этом выпуске, включая улучшения на первом загрузке времени экрана. В тривиальной версии (до реакции 17) SSR должен был загрузить всю страницу, прежде чем она сможет запустить увлажняющую страницу.

Это изменение в React18, теперь мы можем сломать компоненты реагирования на меньшие куски, используя Отказ

Это сейчас называется Выборочная гидратация Отказ Предположим, у нас есть 4 – 5 различных компонентов на экране, упаковочный компонент в настоящее время начнет увлажнить очень специфический компонент после того, как код был загружен, и он не блокирует остальную часть страницы. Имея эту стратегию, более важные части/компоненты страницы могут сначала стать интерактивными (под экстремальным медленным соединением), в то время как другие компоненты будут продолжать гидрат, давая хороший пользовательский опыт.


  }>

Здесь <Задержка/> Компонент не будет разрешен до тех пор, пока данные не будут выявлены, до тех пор, до того, как компонент не упадет на Отказ

Мы можем использовать Для нескольких компонентов выбирают данные в разное время, сохраняя интерактивные компоненты.

5. Список ожидания:

Другой реагирование 18 одновременных функций, которые «оркестраты» порядок, в котором на экране появляются тяжелые данные.

А берет в раскрытие опоры со значениями вперед, назад или вместе


  }>
    
  
  }>

Здесь компонент карты будет выявлен в прямом направлении (пока данные не будут выявлены, вернутся к компоненту LoadingsPinner). Точно так же назад покажет карты в обратном порядке, а вместе припорочить все «вместе»

*6. UseeferredValue: *

UseeferredValue принимает значение состояния, тайм-аут в миллисекундах и возвращает «отсроченную версию» этого значения. Это значение отстает от предоставленных секунды времени ожидания.

const deferredValue = useDeferredValue(value, { timeoutMs: 3000 });

Это может быть использование для поля ввода текста. Ввод текста будет немедленно отображаться на экран, однако Текстовые реквизиты занимают UseeferredValue и возвращает DefferedText который отстает на 3 секунды. Это приводит к задержке компонента списков карты, пока не позволяют пользователям возможность иметь текстовое поле чувствовать себя сжерным.

function App() {
  const [text, setText] = useState("");
  const deferredText = useDeferredValue(text, { timeoutMs: 2000 }); 

  return (
    

    

      
    

  );
 }

Упаковка

React18 в основном было в основном о одновременных особенностях, а не в полноценном одновременном режиме (который был много разгружена от React16) Причина, являющаяся прикладными и библиотеками Автор, может иметь плавный переход, а не нарушение.

Rect18 – это альфа-релиз прямо сейчас, и не подходит для производственной доставки, поэтому API могут развиваться до тех пор, пока не достигнет стабильного выпуска к концу этого года (ожидается). Это завершает наш пост об RecoSt18.

** Некоторые важные ресурсы, которые я собрал со временем: **

  1. https://chan.dev/posts/concurrent-mode-is-dead/
  2. https://dev.to/cassidoo/react-18-alpha-is-out-now-what-2apj
  3. https://github.com/reactwg/react-18/discussions/4
  4. https://github.com/reactwg/react-18/discussions/37

_ Любил этот пост? Есть предложение или просто хочу сказать привет? Обратитесь к мне на Twitter _

Первоначально написано Абхинав Аншул для JavaScript работает

Оригинал: “https://dev.to/workshub/react-18-is-here-what-s-new-ah4”

Читайте ещё по теме: