Официальное предупреждение, пришло react18

внешний интерфейс React.js

18 Вот и он

Что, реакция18 идет, я не могу в это поверить, реакция 17 еще не горячая, 18 приходит внезапно, без особых предосторожностей, просто такой сюрприз, официальный сайт реакции выпустил введение реакции 18, если вы все еще не не поверите, нажмите на ссылку, чтобы увидеть вуаляОфициальное введениеБар. Увидев, что дата была выпущена 8 числа, я бросил беглый взгляд и быстро отправился в npm искать версию 18.0.0-alpha, которая была установлена ​​11 часов назад. Это только версия для раннего внедрения.Согласно официальному введению, будет несколько месяцев полировки, прежде чем будет запущена официальная версия 18. Требуется терпение, чтобы использовать его в работе, но для студентов, изучающих стек технологий реагирования, это по-прежнему необходимо обратить на это внимание заранее. , было бы здорово, если бы вы могли присоединиться к сообществу, чтобы оставить положительный отзыв. Сказав так много, давайте взглянем на официальное введение multi-react18.

новый специальный новый

1.Automatic batching

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

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    setCount(c => c + 1); // Does not re-render yet
    setFlag(f => !f); // Does not re-render yet
    // React will only re-render once at the end (that's batching!)
  }

  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
    </div>
  );
}

В этом коде я напрямую скопировал демонстрационный код Дэна Абрамова для описания функции автоматической пакетной обработки (следующее также -_-). Судя по комментариям, handleClick будет запускать только рендеринг. Для чего это сделано? Объясните на примере Дэна: ресторанное обслуживание Если вы заказываете блюдо, вы идете на кухню и уведомляете кухню, но сообщаете об этом кухне сразу после заказа. Одно из самых больших преимуществ этого — лучшая производительность. Давайте посмотрим на следующий фрагмент кода:

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    fetchSomething().then(() => {
      // React 17 and earlier does NOT batch these:
      setCount(c => c + 1); // Causes a re-render
      setFlag(f => !f); // Causes a re-render
    });
  }

  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
    </div>
  );
}

На этот раз он будет рендериться дважды, если у вас есть глубокое понимание принципа реакции, результат не будет сильно отличаться. Проще говоря, когда выполняется асинхронная задача, она больше не находится в контексте реакции. React использует идентификатор, чтобы отметить, требуются ли пакетные обновления. Когда начинается рендеринг, он помечается как истинный. После фиксации он помечается как false, и асинхронная задача выполняется снова. , по сути, после коммита, то так как флаг стоит false, батч не будет взят. Вероятно, это и означает, если вам интересно, вы можете углубиться в детали реализации. Не только setTimeout, в описании Дэна,Updates inside of promises, setTimeout, native event handlers, or any other event were not batched in React by default, Так что рендеринг, запускаемый событиями promise/setTimeout/native, не будет идти пачками. Конечно, это все до версии 18. Что из себя представляет версия 18? Перейдем к коду:

setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will only re-render once at the end (that's batching!)
}, 1000);

Асинхронные задачи здесь завершают автоматические пакетные обновления. Конечно, если мы хотим включить эту функцию в версии 18, нам нужно использовать ReactDOM.createRoot для монтирования нашего приложения. Если мы все еще используем ReactDOM.render, автоматическая пакетная обработка не будет включена. . Автоматическая пакетная обработка выглядит восхитительно, но если я не хочу использовать ее в некоторых сценариях, также предоставляется официальное решение, см. пример:

import { flushSync } from 'react-dom'; // Note: react-dom, not react

function handleClick() {
  flushSync(() => {
    setCounter(c => c + 1);
  });
  // React has updated the DOM by now
  flushSync(() => {
    setFlag(f => !f);
  });
  // React has updated the DOM by now
}

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

Прочитав описание Автоматического пакетирования, я хотел бы добавить, что блокирующий и параллельный режимы до версии react18 действительно поддерживаются.Automatic batching of multiple setStatesЧто ж, можешь попробовать. И, наконец, давайте поговорим об API нестабильной_батчедапдатес. До версии 18, если мы хотим выполнять пакетную обработку вручную, нам нужно использовать ее для достижения этой цели, и она по-прежнему будет поддерживаться в версии 18.

2.startTransition

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

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

// Urgent: Show what was typed
setInputValue(input);

// Not urgent: Show the results
setSearchQuery(input);

import { startTransition } from 'react';

// Urgent: Show what was typed
setInputValue(input);

// Mark any state updates inside as transitions
startTransition(() => {
  // Transition: Show the results
  setSearchQuery(input);
});

Фрагмент кода 1 — это наш общий способ написания. Пользовательский ввод обновляет значение состояния поля ввода для отображения ввода в реальном времени, а затем фильтрует список. SetInputValue и setSearchQuery выполняются одновременно; во фрагменте кода 2 используется startTransition api и оборачивает в него setSearchQuery. , чтобы добиться приоритета задач ручного рендеринга, тогда обновление setInputValue выше, чем setSearchQuery в это время, поэтому ответ пользователя на ввод может быть гарантирован, чтобы добиться шелковистой работы, официальный тоже сравнивал с setTimeout, вот без введения, всемнажмите здесь, чтобы посмотреть.

3.New Suspense SSR Architecture

React18 внес новые улучшения в производительность SSR и представил новый API под названием pipeToNodeWritable.Этот API может заменить renderToString, а renderToNodeStream помечен как устаревший.Почему такие изменения?Дано официальное объяснение:

renderToString: Keeps working (with limited Suspense support).
renderToNodeStream: Deprecated (with full Suspense support, but without streaming).
pipeToNodeWritable: New and recommended (with full Suspense support and streaming)

Есть два слова, которые требуют внимания: приостановка и потоковая передача. Компонент приостановки был официально предложен в версии 16.6.0. В прошлом он в основном использовался для асинхронной загрузки компонентов с помощью React.lazy, а потоковая передача относится к компонентам сервера React. в паре с. Поддержка этих двух более полная, поэтому SSR реакции 18 позволит пользователям быстрее видеть интерфейс и раньше взаимодействовать. В чем преимущество SSR в react18 по сравнению с предыдущим SSR?Давайте сначала рассмотрим традиционный процесс SSR:

On the server, fetch data for the entire app.
Then, on the server, render the entire app to HTML and send it in the response.
Then, on the client, load the JavaScript code for the entire app.
Then, on the client, connect the JavaScript logic to the server-generated HTML for the entire app (this is “hydration”).

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

инкрементное обновление

Всякий раз, когда происходит серьезное обновление версии, это обновление должно учитываться каждым фреймворком.Для разработчиков обновление не должно влиять на мои существующие проекты.Будьте уверены, React считает больше, чем мы, на самом деле То же самое верно для vue, который обеспечивает прогрессивную и плавную стратегию обновления. Официальный представитель React сказал, будьте уверены, что для обновления вам нужно лишь внести небольшие изменения в код приложения или вообще не вносить их, на самом деле, не только react18, react16 до 17, но и стоимость обновления на самом деле очень мала.

Сообщество и рабочая группа react18

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

план выпуска

React 18 Library Alpha (Available now)
React 18 Public Beta (Months)
React 18 RC (Months)
React 18 (2-4 weeks after RC)

Давайте подождем и посмотрим официальный план выпуска.

Категории