Технологии
Новые возможности React 19
By Dwinner ||
10 минут ||
3 Ноября, 2024
🔧 Компилятор React: Предстоящий компилятор React, уже используемый Instagram, оптимизирует процессы разработки и повышает производительность.
🌟 Серверные компоненты: Вместе с введением серверных компонентов, интегрированных с Next.js, разработчики могут ожидать более эффективного серверного рендеринга и повышенной производительности.
💥 Действия: Новая парадигма взаимодействия с элементами DOM, Действия предназначены переопределить способ, которым разработчики манипулируют пользовательскими интерфейсами.
📄 Метаданные документа: Упрощение управления метаданными, это улучшение дает разработчикам возможность достигать большего с меньшим количеством кода, повышая масштабируемость и поддерживаемость.
🚀 Загрузка ресурсов: Фоновая загрузка ресурсов обещает более быстрые времена загрузки приложений и более плавные пользовательские впечатления, улучшая общую производительность.
🔌 Веб-компоненты: Интеграция React с веб-компонентами открывает мир возможностей, позволяя безболезненно внедрять веб-стандарты в приложения React.
🎣 Усовершенствованные хуки: Основываясь на успехе системы хуков React, версия 19 представляет захватывающие новые хуки, которые упрощают рабочие процессы разработки и способствуют созданию более чистых и поддерживаемых кодовых баз.
Максимизация производительности в React 19 с помощью useMemo
До:
import React, { useState, useMemo } from 'react';
function ExampleComponent() {
const [inputValue, setInputValue] = useState('');
// Memoize the result of checking if the input value is empty
const isInputEmpty = useMemo(() => {
console.log('Checking if input is empty...');
return inputValue.trim() === '';
}, [inputValue]);
return (
<div>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
placeholder="Type something..."
/>
<p>{isInputEmpty ? 'Input is empty' : 'Input is not empty'}</p>
</div>
);
}
export default ExampleComponent;После:
import React, { useState, useMemo } from 'react';
function ExampleComponent() {
const [inputValue, setInputValue] = useState('');
const isInputEmpty = () => {
console.log('Checking if input is empty...');
return inputValue.trim() === '';
});
return (
<div>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
placeholder="Type something..."
/>
<p>{isInputEmpty ? 'Input is empty' : 'Input is not empty'}</p>
</div>
);
}
export default ExampleComponent;Новый хук use()
В React19 будет введен новый хук под названием use(). Этот хук упростит работу с обещаниями (promises), асинхронным кодом и контекстом.
Вот синтаксис хука:
const value = use(resource); Ниже приведен пример кода, демонстрирующий использование хука use для выполнения запроса fetch:
import { use } from "react";
const fetchUsers = async () => {
const res = await fetch('https://example.com/users');
return res.json();
};
const UsersItems = () => {
const users = use(fetchUsers());
return (
<ul>
{users.map((user) => (
<div key={user.id} className='bg-blue-50 shadow-md p-4 my-6 rounded-lg'>
<h2 className='text-xl font-bold'>{user.name}</h2>
<p>{user.email}</p>
</div>
))}
</ul>
);
};
export default UsersItems;Хук useOptimistic()
useOptimistic - это React Hook, который позволяет отображать другое состояние во время выполнения асинхронного действия, согласно документации React.
Этот хук поможет улучшить пользовательский опыт и может ускорить ответы. Он будет полезен для приложений, взаимодействующих с сервером.
Вот синтаксис хука useOptimistic:
const [ optimisticMessage, addOptimisticMessage] =
useOptimistic(state, updatefn) Хук useOptimistic позволяет немедленно обновлять пользовательский интерфейс, предполагая успешное выполнение запроса. Название "optimistic" (оптимистичный) связано с тем, что пользователь видит оптимистичный (успешный) результат действия, даже если выполнение действия занимает время.
Давайте рассмотрим, как можно реализовать хук useOptimistic. В приведенном ниже коде показано, как оптимистическое состояние меняется при клике на кнопку "Отправить" формы (Отправка...) до получения ответа от сервера.
import { useOptimistic, useState } from "react";
const Optimistic = () => {
const [messages, setMessages] = useState([
{ text: "Hey, I am initial!", sending: false, key: 1 },
]);
const [optimisticMessages, addOptimisticMessage] = useOptimistic(
messages,
(state, newMessage) => [
...state,
{
text: newMessage,
sending: true,
},
]
);
async function sendFormData(formData) {
const sentMessage = await fakeDelayAction(formData.get("message"));
setMessages((messages) => [...messages, { text: sentMessage }]);
}
async function fakeDelayAction(message) {
await new Promise((res) => setTimeout(res, 1000));
return message;
}
const submitData = async (userData) => {
addOptimisticMessage(userData.get("username"));
await sendFormData(userData);
};
return (
<>
{optimisticMessages.map((message, index) => (
<div key={index}>
{message.text}
{!!message.sending && <small> (Sending...)</small>}
</div>
))}
<form action={submitData}>
<h1>OptimisticState Hook</h1>
<div>
<label>Username</label>
<input type="text" name="username" />
</div>
<button type="submit">Submit</button>
</form>
</>
);
};
export default Optimistic;1. fakeDelayAction - это фиктивный метод для задержки события отправки. Он используется для демонстрации оптимистичного состояния.
2. submitData - это действие, отвечающее за отправку формы. Этот метод также может быть асинхронным.
3. sendFormData - отвечает за отправку данных формы в fakeDelayAction.
Установка начального состояния. messages будут использоваться в useOptimistic() в качестве входных данных и будут возвращены в optimisticMessages.
Чтобы узнать больше, вы можете подписаться на команду React в следующих местах, чтобы оставаться в курсе:
react
технологии
WEB
Избранный пост
🚀 Обзор React Native 0.74: Новая Архитектура без ...
React Native продолжает активно развиваться, и версия 0.74 принесла несколько значительных изменений, которые улучшают производительность и удобство работы с фреймворком. Одним из главных нововведений...
7 Февраля, 2025
10 минут
Недавний пост
Пошаговое руководство по настройке push-уведомлени...
1. Создание нового проекта React Native (если не создано ранее)
Понимание потоков в React Native: JavaScript, Shad...
React Native создан, чтобы обеспечить бесперебойную работу приложений,...
Улучшение производительности React Native с помощь...
React Native
🚀 Как настроить .env для приложения на React Nati...
Управление переменными окружения критически важно для настройки конфиг...
Новые возможности React 19
🔧 Компилятор React: Предстоящий компилятор React, уже используемый In...
Стоимость разработки мобильных приложений в 2024 г...
Цена разработки мобильного приложения может варьироваться в зависимост...
🚀 Обзор React Native 0.74: Новая Архитектура без ...
React Native продолжает активно развиваться, и версия 0.74 принесла не...