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

Установите React 18 alpha: npm install react@alpha react-dom@alpha

Вот список нескольких обновлений.

1. Новый Root API
2. Саспенс
3. SuspenseList
4. useDeferredValue
5. Автоматическое дозирование

В React 18 появился новый Root API.

Ранее в нашем методе responseDOM.render мы использовали для передачи нашего компонента App, затем document.getElementById и нашего корневого элемента. Итак, мы рендерили компонент нашего приложения в наш корневой элемент на странице.

import ReactDOM from "react-dom";
import App from "App";
ReactDOM.render(<App />, document.getElementById("root"));

import ReactDOM from "react-dom";
import App from "App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

Саспенс

Как и его название, Suspense приостанавливает что-то, пока оно не будет готово к рендерингу.

В предыдущей версии react, приведенный ниже код приводил к немедленному монтированию ReadyComponent и вызову его эффектов.

<Suspense fallback={<Loading />}>
    <ComponentWaitingForData />
    <ReadyComponent />
</Suspense>

Ссылаясь на приведенный выше код, теперь он не будет монтировать ReadyComponent, вместо этого он будет сначала ждать разрешения ComponentWaitingForData.

SuspenseList

SuspenseList исключает две опоры. раскрытьOrder и хвост.

ShowOrder - это один из параметров конфигурации SuspenseList. Может быть неопределенным, вместе, вперед и назад.

• undefined (по умолчанию): показывать детей по мере разрешения подтяжек.
• вместе : покажите детей вместе, как только все подтяжки будут устранены.
• вперед : отрисовывать детей сверху вниз, безразлично к подтяжкам. порядок разрешения
• наоборот : рендерить дочерние элементы снизу вверх, безразлично к порядку разрешения подтяжек

<SuspenseList revealOrder="forwards" >
    <Suspense fallback={<p>Loading attendance...</p>}>
        <Attendance id={facultyID}/>
    </Suspense>
    <Suspense fallback={<p>Loading homework...</p>}>
        <Homework id={facultyID}/>
    </Suspense>
</SuspenseList>

<SuspenseList revealOrder="forwards" tail="collapsed">
    <Suspense fallback={<p>Loading attendance...</p>}>
        <Attendance id={facultyID}/>
    </Suspense>
    <Suspense fallback={<p>Loading homework...</p>}>
        <Homework id={facultyID}/>
    </Suspense>
</SuspenseList>

useDeferredValue

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

import { useDeferredValue } from "react";
const [text, setText] = useState("react js");
const deferredText = useDeferredValue(text, { timeoutMs: 2000 });

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

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

Давайте посмотрим на приведенный ниже код о том, как происходит пакетная обработка в более ранних версиях React.

export default function App() {
    const [count, setCount] = useState(0);
    const [color, setColor] = useState(undefined);
    
    const handleClick = () => {
        setCount(count + 1); //No re-render
        setColor(count % 2 === 0 ? "Green" : "Red"); //No re-render
        // Now re-renders once at the end (this is batching)
    }
return (
        <>
            <button onClick={handleClick}>Next</button>
            <span style={{
                color: count % 2 === 0 ? "red" : "green",
            }}>
                {color}
            </span>
        </>
    );
}

Давайте посмотрим на приведенный ниже код, в котором происходит пакетная обработка. В приведенном ниже коде пакетная обработка кода отлично работает с React 18, но более ранние версии React ее не обрабатывают.

export default function App() {
    const [count, setCount] = useState(0);
    const [color, setColor] = useState(undefined);    const handleClick = () => {
        Promise.resolve().then(() => {
            setCount(count + 1); //Re-render
            setColor(count % 2 === 0 ? "Green" : "Red"); //Re-render
        });
    }    return (
        <>
            <button onClick={handleClick}>Next</button>
            <span style={{
                color: count % 2 === 0 ? "red" : "green",
            }}>
                {color}
            </span>
        </>
    );
}

Справка - https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html

Заключительные мысли:

Мы только что узнали о некоторых интересных обновлениях в альфа-версии React 18. Как разработчик JavaScript, мне очень понравились обновления, и я очень рад видеть, как выглядит бета-версия React 18.

Спасибо, что добрались до конца 🙌. Если вам понравилась эта статья или вы узнали что-то новое, поддержите меня, нажав кнопку «Поделиться» ниже, чтобы охватить больше людей, и / или дайте мне подписаться в Твиттере, чтобы увидеть другие советы, статьи и вещи, которые я узнаю и делюсь там.