From 92ebaf8f7ac44f48a30d60f6866cf1e50a6a2553 Mon Sep 17 00:00:00 2001
From: "translate-react-bot[bot]"
<251169733+translate-react-bot[bot]@users.noreply.github.com>
Date: Wed, 4 Feb 2026 15:02:02 +0000
Subject: [PATCH 1/4] =?UTF-8?q?docs:=20translate=20`react-labs-view-transi?=
=?UTF-8?q?tions-activity-and-more.md`=20to=20=D0=A0=D1=83=D1=81=D1=81?=
=?UTF-8?q?=D0=BA=D0=B8=D0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
...labs-view-transitions-activity-and-more.md | 8047 +++++++++++++++--
1 file changed, 7077 insertions(+), 970 deletions(-)
diff --git a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
index e4bb25a4aa..c4c7776e67 100644
--- a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
+++ b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
@@ -1,79 +1,79 @@
---
-title: "React Labs: View Transitions, Activity, and more"
+title: "React Labs: Переходы, Активность и другое"
author: Ricky Hanlon
date: 2025/04/23
-description: In React Labs posts, we write about projects in active research and development. In this post, we're sharing two new experimental features that are ready to try today, and updates on other areas we're working on now.
+description: В постах React Labs мы пишем о проектах, находящихся в активном исследовании и разработке. В этом посте мы представляем две новые экспериментальные функции, готовые к тестированию сегодня, и обновления по другим областям, над которыми мы сейчас работаем.
---
-April 23, 2025 by [Ricky Hanlon](https://twitter.com/rickhanlonii)
+23 апреля 2025 г. [Ricky Hanlon](https://twitter.com/rickhanlonii)
---
-In React Labs posts, we write about projects in active research and development. In this post, we're sharing two new experimental features that are ready to try today, and updates on other areas we're working on now.
+В постах React Labs мы пишем о проектах, находящихся в активном исследовании и разработке. В этом посте мы представляем две новые экспериментальные функции, готовые к тестированию сегодня, и обновления по другим областям, над которыми мы сейчас работаем.
-React Conf 2025 is scheduled for October 7–8 in Henderson, Nevada!
+React Conf 2025 запланирована на 7–8 октября в Хендерсоне, Невада!
-We're looking for speakers to help us create talks about the features covered in this post. If you're interested in speaking at ReactConf, [please apply here](https://forms.reform.app/react-conf/call-for-speakers/) (no talk proposal required).
+Мы ищем докладчиков, которые помогут нам создать выступления о функциях, описанных в этом посте. Если вы заинтересованы в выступлении на ReactConf, [пожалуйста, подайте заявку здесь](https://forms.reform.app/react-conf/call-for-speakers/) (предварительное предложение доклада не требуется).
-For more info on tickets, free streaming, sponsoring, and more, see [the React Conf website](https://conf.react.dev).
+Для получения дополнительной информации о билетах, бесплатной трансляции, спонсорстве и многом другом посетите [веб-сайт React Conf](https://conf.react.dev).
-Today, we're excited to release documentation for two new experimental features that are ready for testing:
+Сегодня мы рады опубликовать документацию для двух новых экспериментальных функций, готовых к тестированию:
-- [View Transitions](#view-transitions)
-- [Activity](#activity)
+- [Переходы](#view-transitions)
+- [Активность](#activity)
-We're also sharing updates on new features currently in development:
-- [React Performance Tracks](#react-performance-tracks)
-- [Compiler IDE Extension](#compiler-ide-extension)
-- [Automatic Effect Dependencies](#automatic-effect-dependencies)
-- [Fragment Refs](#fragment-refs)
-- [Concurrent Stores](#concurrent-stores)
+Мы также делимся обновлениями о новых функциях, находящихся в разработке:
+- [Треки производительности React](#react-performance-tracks)
+- [Расширение IDE для компилятора](#compiler-ide-extension)
+- [Автоматические зависимости эффектов](#automatic-effect-dependencies)
+- [Рефы фрагментов](#fragment-refs)
+- [Конкурентные хранилища](#concurrent-stores)
---
-# New Experimental Features {/*new-experimental-features*/}
+# Новые экспериментальные функции {/*new-experimental-features*/}
-View Transitions and Activity are now ready for testing in `react@experimental`. These features have been tested in production and are stable, but the final API may still change as we incorporate feedback.
+View Transitions и Activity теперь готовы к тестированию в `react@experimental`. Эти функции были протестированы в продакшене и являются стабильными, но окончательный API может измениться по мере внесения обратной связи.
-You can try them by upgrading React packages to the most recent experimental version:
+Вы можете попробовать их, обновив пакеты React до последней экспериментальной версии:
- `react@experimental`
- `react-dom@experimental`
-Read on to learn how to use these features in your app, or check out the newly published docs:
+Читайте дальше, чтобы узнать, как использовать эти функции в вашем приложении, или ознакомьтесь с недавно опубликованной документацией:
-- [``](/reference/react/ViewTransition): A component that lets you activate an animation for a Transition.
-- [`addTransitionType`](/reference/react/addTransitionType): A function that allows you to specify the cause of a Transition.
-- [``](/reference/react/Activity): A component that lets you hide and show parts of the UI.
+- [``](/reference/react/ViewTransition): Компонент, который позволяет активировать анимацию для перехода.
+- [`addTransitionType`](/reference/react/addTransitionType): Функция, которая позволяет указать причину перехода.
+- [``](/reference/react/Activity): Компонент, который позволяет скрывать и показывать части пользовательского интерфейса.
-## View Transitions {/*view-transitions*/}
+## Переход между видами {/*view-transitions*/}
-React View Transitions are a new experimental feature that makes it easier to add animations to UI transitions in your app. Under-the-hood, these animations use the new [`startViewTransition`](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition) API available in most modern browsers.
+React View Transitions — это новая экспериментальная функция, которая упрощает добавление анимаций при переходе между состояниями пользовательского интерфейса в вашем приложении. По сути, эти анимации используют новый API [`startViewTransition`](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition), доступный в большинстве современных браузеров.
-To opt-in to animating an element, wrap it in the new `` component:
+Чтобы включить анимацию элемента, оберните его в новый компонент ``:
```js
-// "what" to animate.
+// "Что" анимировать.
-
animate me
+
анимируй меня
```
-This new component lets you declaratively define "what" to animate when an animation is activated.
+Этот новый компонент позволяет декларативно определить, "что" будет анимировано при активации анимации.
-You can define "when" to animate by using one of these three triggers for a View Transition:
+Вы можете определить, "когда" анимировать, используя один из следующих трех триггеров для View Transition:
```js
-// "when" to animate.
+// "Когда" анимировать.
// Transitions
startTransition(() => setState(...));
@@ -83,14 +83,14 @@ const deferred = useDeferredValue(value);
// Suspense
}>
-
Loading...
+
Загрузка...
```
-By default, these animations use the [default CSS animations for View Transitions](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#customizing_your_animations) applied (typically a smooth cross-fade). You can use [view transition pseudo-selectors](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree) to define "how" the animation runs. For example, you can use `*` to change the default animation for all transitions:
+По умолчанию эти анимации используют [CSS-анимации по умолчанию для View Transitions](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#customizing_your_animations) (обычно плавное перекрестное затухание). Вы можете использовать [псевдоселекторы view transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree), чтобы определить, "как" выполняется анимация. Например, вы можете использовать `*`, чтобы изменить анимацию по умолчанию для всех переходов:
```
-// "how" to animate.
+// "Как" анимировать.
::view-transition-old(*) {
animation: 300ms ease-out fade-out;
}
@@ -99,16 +99,16 @@ By default, these animations use the [default CSS animations for View Transition
}
```
-When the DOM updates due to an animation trigger—like `startTransition`, `useDeferredValue`, or a `Suspense` fallback switching to content—React will use [declarative heuristics](/reference/react/ViewTransition#viewtransition) to automatically determine which `` components to activate for the animation. The browser will then run the animation that's defined in CSS.
+Когда DOM обновляется из-за триггера анимации — например, `startTransition`, `useDeferredValue` или переключение `Suspense` с резервного содержимого на основное — React будет использовать [декларативные эвристики](/reference/react/ViewTransition#viewtransition), чтобы автоматически определить, какие компоненты `` следует активировать для анимации. Затем браузер выполнит анимацию, определенную в CSS.
-If you're familiar with the browser's View Transition API and want to know how React supports it, check out [How does `` Work](/reference/react/ViewTransition#how-does-viewtransition-work) in the docs.
+Если вы знакомы с API браузера View Transition и хотите узнать, как React его поддерживает, ознакомьтесь с разделом [Как работает ``](/reference/react/ViewTransition#how-does-viewtransition-work) в документации.
-In this post, let's take a look at a few examples of how to use View Transitions.
+В этой статье мы рассмотрим несколько примеров использования View Transitions.
-We'll start with this app, which doesn't animate any of the following interactions:
-- Click a video to view the details.
-- Click "back" to go back to the feed.
-- Type in the list to filter the videos.
+Мы начнем с этого приложения, которое не анимирует ни одно из следующих взаимодействий:
+- Нажмите на видео, чтобы просмотреть детали.
+- Нажмите "назад", чтобы вернуться к ленте.
+- Введите текст в поле, чтобы отфильтровать видео.
@@ -118,7 +118,7 @@ import TalkDetails from './Details'; import Home from './Home'; import {useRoute
export default function App() {
const {url} = useRouter();
- // 🚩This version doesn't include any animations yet
+ // 🚩Эта версия еще не включает никаких анимаций
return url === '/' ? : ;
}
```
@@ -164,7 +164,7 @@ export default function Details() {
navigateBack("/");
}}
>
- Back
+ Назад
}
>
@@ -194,7 +194,7 @@ function SearchInput({ value, onChange }) {
return (
+ );
+}
+
+function filterVideos(videos, query) {
+ const keywords = query
+ .toLowerCase()
+ .split(" ")
+ .filter((s) => s !== "");
+ if (keywords.length === 0) {
+ return videos;
+ }
+ return videos.filter((video) => {
+ const words = (video.title + " " + video.description)
+ .toLowerCase()
+ .split(" ");
+ return keywords.every((kw) => words.some((w) => w.includes(kw)));
+ });
+}
+```
+
+```js src/Icons.js hidden
+export function ChevronLeft() {
+ return (
+
+ );
+}
+
+export function PauseIcon() {
+ return (
+
+ );
+}
+
+export function PlayIcon() {
+ return (
+
+ );
+}
+export function Heart({liked, animate}) {
+ return (
+ <>
+
+
+
+
+ );
+}
+
+export function IconSearch(props) {
+ return (
+
+ );
+}
+```
+
+```js src/Layout.js
+import {unstable_ViewTransition as ViewTransition} from 'react'; import { useIsNavPending } from "./router";
+
+export default function Page({ heading, children }) {
+ const isPending = useIsNavPending();
+ return (
+
+
+
+ {/* Пользовательские классы в зависимости от типа перехода. */}
+
+ {heading}
+
+ {isPending && }
+
+
+ {/* Отказ от ViewTransition для контента. */}
+ {/* Контент может определять свой собственный ViewTransition. */}
+
+
+
{children}
+
+
+
+ );
+}
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+
+ );
+}
+```
+
+```js src/Videos.js
+import { useState, unstable_ViewTransition as ViewTransition } from "react"; import LikeButton from "./LikeButton"; import {useRouter} from "./router"; import {PauseIcon, PlayIcon} from "./Icons"; import {startTransition} from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ return (
+
+
+ {/* Custom classes based on transition type. */}
+
+ {heading}
+
+ {isPending && }
+
+
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+
+
+
{children}
+
+
+
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+
+ );
+}
+```
+
+```js src/Videos.js hidden
+import { useState, unstable_ViewTransition as ViewTransition } from "react";
+import LikeButton from "./LikeButton";
+import { useRouter } from "./router";
+import { PauseIcon, PlayIcon } from "./Icons";
+import { startTransition } from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ // This uses the default animation, no additional css needed.
+ return (
+
+
+ {/* Custom classes based on transition type. */}
+
+ {heading}
+
+ {isPending && }
+
+
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+
+
+
{children}
+
+
+
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+
+ );
+}
+```
+
+```js src/Videos.js hidden
+import { useState, unstable_ViewTransition as ViewTransition } from "react";
+import LikeButton from "./LikeButton";
+import { useRouter } from "./router";
+import { PauseIcon, PlayIcon } from "./Icons";
+import { startTransition } from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ // This uses the default animation, no additional css needed.
+ return (
+
+
+.search-input input {
+ display: flex;
+ padding-inline-start: 2.75rem;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ width: 100%;
+ text-align: start;
+ background-color: rgb(235 236 240);
+ outline: 2px solid transparent;
+ cursor: pointer;
+ border: none;
+ align-items: center;
+ color: rgb(35 39 47);
+ border-radius: 9999px;
+ vertical-align: middle;
+ font-size: 15px;
+}
-There are a few known issues we plan to address such as performance, and the scheduler track not always "connecting" work across Suspended trees, so it's not quite ready to try. We're also still collecting feedback from early adopters to improve the design and usability of the tracks.
+.search-input input:hover, .search-input input:active {
+ background-color: rgb(235 236 240/ 0.8);
+ color: rgb(35 39 47/ 0.8);
+}
-Once we solve those issues, we'll publish experimental docs and share that it's ready to try.
+/* Home */
+.video-list {
+ position: relative;
+}
----
+.video-list .videos {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ overflow-y: auto;
+ height: 100%;
+}
+```
-## Automatic Effect Dependencies {/*automatic-effect-dependencies*/}
+```css src/animations.css
+/* No additional animations needed */
-When we released hooks, we had three motivations:
-- **Sharing code between components**: hooks replaced patterns like render props and higher-order components to allow you to reuse stateful logic without changing your component hierarchy.
-- **Think in terms of function, not lifecycles**: hooks let you split one component into smaller functions based on what pieces are related (such as setting up a subscription or fetching data), rather than forcing a split based on lifecycle methods.
-- **Support ahead-of-time compilation**: hooks were designed to support ahead-of-time compilation with less pitfalls causing unintentional de-optimizations caused by lifecycle methods, and limitations of classes.
-Since their release, hooks have been successful at *sharing code between components*. Hooks are now the favored way to share logic between components, and there are less use cases for render props and higher order components. Hooks have also been successful at supporting features like Fast Refresh that were not possible with class components.
-### Effects can be hard {/*effects-can-be-hard*/}
-Unfortunately, some hooks are still hard to think in terms of function instead of lifecycles. Effects specifically are still hard to understand and are the most common pain point we hear from developers. Last year, we spent a significant amount of time researching how Effects were used, and how those use cases could be simplified and easier to understand.
-We found that often, the confusion is from using an Effect when you don't need to. The [You Might Not Need an Effect](/learn/you-might-not-need-an-effect) guide covers many cases for when Effects are not the right solution. However, even when an Effect is the right fit for a problem, Effects can still be harder to understand than class component lifecycles.
-We believe one of the reasons for confusion is that developers to think of Effects from the _component's_ perspective (like a lifecycle), instead of the _Effects_ point of view (what the Effect does).
-Let's look at an example [from the docs](/learn/lifecycle-of-reactive-effects#thinking-from-the-effects-perspective):
-```js
-useEffect(() => {
- // Your Effect connected to the room specified with roomId...
- const connection = createConnection(serverUrl, roomId);
- connection.connect();
- return () => {
- // ...until it disconnected
- connection.disconnect();
- };
-}, [roomId]);
-```
+/* Previously defined animations below */
-Many users would read this code as "on mount, connect to the roomId. whenever `roomId` changes, disconnect to the old room and re-create the connection". However, this is thinking from the component's lifecycle perspective, which means you will need to think of every component lifecycle state to write the Effect correctly. This can be difficult, so it's understandable that Effects seem harder than class lifecycles when using the component perspective.
-### Effects without dependencies {/*effects-without-dependencies*/}
-Instead, it's better to think from the Effect's perspective. The Effect doesn't know about the component lifecycles. It only describes how to start synchronization and how to stop it. When users think of Effects in this way, their Effects tend to be easier to write, and more resilient to being started and stopped as many times as is needed.
-We spent some time researching why Effects are thought of from the component perspective, and we think one of the reasons is the dependency array. Since you have to write it, it's right there and in your face reminding you of what you're "reacting" to and baiting you into the mental model of 'do this when these values change'.
-When we released hooks, we knew we could make them easier to use with ahead-of-time compilation. With the React Compiler, you're now able to avoid writing `useCallback` and `useMemo` yourself in most cases. For Effects, the compiler can insert the dependencies for you:
-```js
-useEffect(() => {
- const connection = createConnection(serverUrl, roomId);
- connection.connect();
- return () => {
- connection.disconnect();
- };
-}); // compiler inserted dependencies.
-```
+/* Slide animations for Suspense the fallback down */
+::view-transition-old(.slide-down) {
+ animation: 150ms ease-out both fade-out, 150ms ease-out both slide-down;
+}
-With this code, the React Compiler can infer the dependencies for you and insert them automatically so you don't need to see or write them. With features like [the IDE extension](#compiler-ide-extension) and [`useEffectEvent`](/reference/react/experimental_useEffectEvent), we can provide a CodeLens to show you what the Compiler inserted for times you need to debug, or to optimize by removing a dependency. This helps reinforce the correct mental model for writing Effects, which can run at any time to synchronize your component or hook's state with something else.
+::view-transition-new(.slide-up) {
+ animation: 210ms ease-in 150ms both fade-in, 400ms ease-in both slide-up;
+}
-Our hope is that automatically inserting dependencies is not only easier to write, but that it also makes them easier to understand by forcing you to think in terms of what the Effect does, and not in component lifecycles.
+/* Animations for view transition classed added by transition type */
+::view-transition-old(.slide-forward) {
+ /* when sliding forward, the "old" page should slide out to left. */
+ animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+}
----
+::view-transition-new(.slide-forward) {
+ /* when sliding forward, the "new" page should slide in from right. */
+ animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+}
+
+::view-transition-old(.slide-back) {
+ /* when sliding back, the "old" page should slide out to right. */
+ animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
+}
+
+::view-transition-new(.slide-back) {
+ /* when sliding back, the "new" page should slide in from left. */
+ animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
+}
+
+/* Keyframes to support our animations above. */
+@keyframes slide-up {
+ from {
+ transform: translateY(10px);
+ }
+ to {
+ transform: translateY(0);
+ }
+}
+
+@keyframes slide-down {
+ from {
+ transform: translateY(0);
+ }
+ to {
+ transform: translateY(10px);
+ }
+}
-## Compiler IDE Extension {/*compiler-ide-extension*/}
+@keyframes fade-in {
+ from {
+ opacity: 0;
+ }
+}
-Earlier this week [we shared](/blog/2025/04/21/react-compiler-rc) the React Compiler release candidate, and we're working towards shipping the first SemVer stable version of the compiler in the coming months.
+@keyframes fade-out {
+ to {
+ opacity: 0;
+ }
+}
-We've also begun exploring ways to use the React Compiler to provide information that can improve understanding and debugging your code. One idea we've started exploring is a new experimental LSP-based React IDE extension powered by React Compiler, similar to the extension used in [Lauren Tan's React Conf talk](https://conf2024.react.dev/talks/5).
+@keyframes slide-to-right {
+ to {
+ transform: translateX(50px);
+ }
+}
-Our idea is that we can use the compiler's static analysis to provide more information, suggestions, and optimization opportunities directly in your IDE. For example, we can provide diagnostics for code breaking the Rules of React, hovers to show if components and hooks were optimized by the compiler, or a CodeLens to see [automatically inserted Effect dependencies](#automatic-effect-dependencies).
+@keyframes slide-from-right {
+ from {
+ transform: translateX(50px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
-The IDE extension is still an early exploration, but we'll share our progress in future updates.
+@keyframes slide-to-left {
+ to {
+ transform: translateX(-50px);
+ }
+}
----
+@keyframes slide-from-left {
+ from {
+ transform: translateX(-50px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+/* Default .slow-fade. */
+::view-transition-old(.slow-fade) {
+ animation-duration: 500ms;
+}
-## Fragment Refs {/*fragment-refs*/}
+::view-transition-new(.slow-fade) {
+ animation-duration: 500ms;
+}
+```
-Many DOM APIs like those for event management, positioning, and focus are difficult to compose when writing with React. This often leads developers to reach for Effects, managing multiple Refs, by using APIs like `findDOMNode` (removed in React 19).
+```js src/index.js hidden
+import React, {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import './styles.css';
+import './animations.css';
-We are exploring adding refs to Fragments that would point to a group of DOM elements, rather than just a single element. Our hope is that this will simplify managing multiple children and make it easier to write composable React code when calling DOM APIs.
+import App from './App';
+import {Router} from './router';
-Fragment refs are still being researched. We'll share more when we're closer to having the final API finished.
+const root = createRoot(document.getElementById('root'));
+root.render(
+
+
+
+
+
+);
+```
----
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+
+
+### Серверный рендеринг с Activity {/*server-side-rendering-with-activity*/}
+
+При использовании Activity на странице с серверным рендерингом (SSR) существуют дополнительные оптимизации.
+
+Если часть страницы рендерится с `mode="hidden"`, она не будет включена в SSR-ответ. Вместо этого React запланирует клиентский рендеринг содержимого внутри Activity, пока остальная часть страницы гидратируется, отдавая приоритет видимому контенту на экране.
-## Gesture Animations {/*gesture-animations*/}
+Для частей UI, отрендеренных с `mode="visible"`, React будет понижать приоритет гидратации содержимого внутри Activity, подобно тому, как содержимое Suspense гидратируется с низким приоритетом. Если пользователь взаимодействует со страницей, мы отдадим приоритет гидратации внутри границы при необходимости.
-We're also researching ways to enhance View Transitions to support gesture animations such as swiping to open a menu, or scroll through a photo carousel.
+Это продвинутые сценарии использования, но они демонстрируют дополнительные преимущества, учтенные в Activity.
-Gestures present new challenges for a few reasons:
+### Будущие режимы для Activity {/*future-modes-for-activity*/}
-- **Gestures are continuous**: as you swipe the animation is tied to your finger placement time, rather than triggering and running to completion.
-- **Gestures don't complete**: when you release your finger gesture animations can run to completion, or revert to their original state (like when you only partially open a menu) depending on how far you go.
-- **Gestures invert old and new**: while you're animating, you want the page you are animating from to stay "alive" and interactive. This inverts the browser View Transition model where the "old" state is a snapshot and the "new" state is the live DOM.
+В будущем мы можем добавить новые режимы для Activity.
-We believe we’ve found an approach that works well and may introduce a new API for triggering gesture transitions. For now, we're focused on shipping ``, and will revisit gestures afterward.
+Например, распространенный сценарий использования — рендеринг модального окна, где предыдущая «неактивная» страница видна за «активным» модальным представлением. Режим «hidden» не подходит для этого сценария, поскольку он не видим и не включен в SSR.
+
+Вместо этого мы рассматриваем новый режим, который будет сохранять контент видимым — и включенным в SSR — но будет держать его размонтированным и понижать приоритет обновлений. Этот режим также может потребовать «приостановки» обновлений DOM, поскольку может отвлекать видимый контент, обновляющийся за модальным окном.
+
+Другой режим, который мы рассматриваем для Activity, — это возможность автоматического уничтожения состояния для скрытых Activity, если используется слишком много памяти. Поскольку компонент уже размонтирован, может быть предпочтительнее уничтожить состояние для наименее недавно использованных скрытых частей приложения, чем потреблять слишком много ресурсов.
+
+Это области, которые мы все еще исследуем, и мы поделимся дополнительной информацией по мере продвижения. Для получения дополнительной информации о том, что включает в себя Activity сегодня, [ознакомьтесь с документацией](/reference/react/Activity).
---
-## Concurrent Stores {/*concurrent-stores*/}
+# Функции в разработке {/*features-in-development*/}
-When we released React 18 with concurrent rendering, we also released `useSyncExternalStore` so external store libraries that did not use React state or context could [support concurrent rendering](https://github.com/reactwg/react-18/discussions/70) by forcing a synchronous render when the store is updated.
+Мы также разрабатываем функции, которые помогут решить перечисленные ниже распространенные проблемы.
-Using `useSyncExternalStore` comes at a cost though, since it forces a bail out from concurrent features like transitions, and forces existing content to show Suspense fallbacks.
+По мере итерации над возможными решениями вы можете увидеть некоторые потенциальные API, которые мы тестируем, на основе отправленных нами PR. Пожалуйста, помните, что, пробуя разные идеи, мы часто изменяем или удаляем различные решения после их опробования.
-Now that React 19 has shipped, we're revisiting this problem space to create a primitive to fully support concurrent external stores with the `use` API:
+Когда решения, над которыми мы работаем, публикуются слишком рано, это может вызвать суматоху и путаницу в сообществе. Чтобы сбалансировать прозрачность и ограничить путаницу, мы делимся проблемами, для которых мы в настоящее время разрабатываем решения, не раскрывая конкретное решение, которое у нас есть на уме.
-```js
-const value = use(store);
-```
+По мере развития этих функций мы будем анонсировать их в блоге с документацией, чтобы вы могли их опробовать.
-Our goal is to allow external state to be read during render without tearing, and to work seamlessly with all of the concurrent features React offers.
+## Треки производительности React {/*react-performance-tracks*/}
-This research is still early. We'll share more, and what the new APIs will look like, when we're further along.
+Мы работаем над новым набором пользовательских треков для профилировщиков производительности с использованием API браузера, которые [позволяют добавлять пользовательские треки](https://developer.chrome.com/docs/devtools/performance/extension) для предоставления дополнительной информации о производительности вашего React-приложения.
----
+Эта функция все еще находится в разработке, поэтому мы еще не готовы опубликовать документацию для ее полного выпуска в качестве экспериментальной функции. Вы можете получить предварительный просмотр при использовании экспериментальной версии React, которая автоматически добавит треки производительности в профили:
-_Thanks to [Aurora Scharff](https://bsky.app/profile/aurorascharff.no), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Eli White](https://twitter.com/Eli_White), [Lauren Tan](https://bsky.app/profile/no.lol), [Luna Wei](https://github.com/lunaleaps), [Matt Carroll](https://twitter.com/mattcarrollcode), [Jack Pope](https://jackpope.me), [Jason Bonta](https://threads.net/someextent), [Jordan Brown](https://github.com/jbrown215), [Jordan Eldredge](https://bsky.app/profile/capt.dev), [Mofei Zhang](https://threads.net/z_mofei), [Sebastien Lorber](https://bsky.app/profile/sebastienlorber.com), [Sebastian Markbåge](https://bsky.app/profile/sebmarkbage.calyptus.eu), and [Tim Yung](https://github.com/yungsters) for reviewing this post._
+
+
+
+
+
+
+
Date: Wed, 13 May 2026 15:34:55 +0000
Subject: [PATCH 2/4] =?UTF-8?q?docs:=20translate=20`react-labs-view-transi?=
=?UTF-8?q?tions-activity-and-more.md`=20to=20=D0=A0=D1=83=D1=81=D1=81?=
=?UTF-8?q?=D0=BA=D0=B8=D0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
...labs-view-transitions-activity-and-more.md | 1983 +++++++++++++----
1 file changed, 1545 insertions(+), 438 deletions(-)
diff --git a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
index c4c7776e67..ad4d1f1e6a 100644
--- a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
+++ b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
@@ -1,84 +1,84 @@
---
-title: "React Labs: Переходы, Активность и другое"
+title: "React Labs: View Transitions, Activity и многое другое"
author: Ricky Hanlon
date: 2025/04/23
-description: В постах React Labs мы пишем о проектах, находящихся в активном исследовании и разработке. В этом посте мы представляем две новые экспериментальные функции, готовые к тестированию сегодня, и обновления по другим областям, над которыми мы сейчас работаем.
+description: В постах React Labs мы пишем о проектах, находящихся в активной разработке и исследовании. В этом посте мы делимся двумя новыми экспериментальными функциями, которые можно попробовать уже сегодня, а также обновлениями по другим областям, над которыми мы сейчас работаем.
---
-23 апреля 2025 г. [Ricky Hanlon](https://twitter.com/rickhanlonii)
+23 апреля 2025 г. от [Ricky Hanlon](https://twitter.com/rickhanlonii)
---
-В постах React Labs мы пишем о проектах, находящихся в активном исследовании и разработке. В этом посте мы представляем две новые экспериментальные функции, готовые к тестированию сегодня, и обновления по другим областям, над которыми мы сейчас работаем.
+В постах React Labs мы пишем о проектах, находящихся в активной разработке и исследовании. В этом посте мы делимся двумя новыми экспериментальными функциями, которые можно попробовать уже сегодня, а также обновлениями по другим областям, над которыми мы сейчас работаем.
-
-React Conf 2025 запланирована на 7–8 октября в Хендерсоне, Невада!
+React Conf 2025 запланирована на 7–8 октября в Хендерсоне, штат Невада!
-Мы ищем докладчиков, которые помогут нам создать выступления о функциях, описанных в этом посте. Если вы заинтересованы в выступлении на ReactConf, [пожалуйста, подайте заявку здесь](https://forms.reform.app/react-conf/call-for-speakers/) (предварительное предложение доклада не требуется).
+Мы ищем докладчиков, которые помогут нам создать доклады о функциях, описанных в этом посте. Если вы заинтересованы в выступлении на ReactConf, [пожалуйста, подайте заявку здесь](https://forms.reform.app/react-conf/call-for-speakers/) (предложение доклада не требуется).
Для получения дополнительной информации о билетах, бесплатной трансляции, спонсорстве и многом другом посетите [веб-сайт React Conf](https://conf.react.dev).
-Сегодня мы рады опубликовать документацию для двух новых экспериментальных функций, готовых к тестированию:
+Сегодня мы рады выпустить документацию по двум новым экспериментальным функциям, готовым к тестированию:
-- [Переходы](#view-transitions)
-- [Активность](#activity)
+- [View Transitions](#view-transitions)
+- [Activity](#activity)
-Мы также делимся обновлениями о новых функциях, находящихся в разработке:
-- [Треки производительности React](#react-performance-tracks)
-- [Расширение IDE для компилятора](#compiler-ide-extension)
-- [Автоматические зависимости эффектов](#automatic-effect-dependencies)
-- [Рефы фрагментов](#fragment-refs)
-- [Конкурентные хранилища](#concurrent-stores)
+Мы также делимся обновлениями по новым функциям, находящимся в разработке:
+- [React Performance Tracks](#react-performance-tracks)
+- [Compiler IDE Extension](#compiler-ide-extension)
+- [Automatic Effect Dependencies](#automatic-effect-dependencies)
+- [Fragment Refs](#fragment-refs)
+- [Concurrent Stores](#concurrent-stores)
---
# Новые экспериментальные функции {/*new-experimental-features*/}
-View Transitions и Activity теперь готовы к тестированию в `react@experimental`. Эти функции были протестированы в продакшене и являются стабильными, но окончательный API может измениться по мере внесения обратной связи.
+View Transitions и Activity теперь готовы к тестированию в `react@experimental`. Эти функции были протестированы в продакшене и стабильны, но окончательный API может измениться по мере учета отзывов.
-Вы можете попробовать их, обновив пакеты React до последней экспериментальной версии:
+Вы можете попробовать их, обновив пакеты React до самой последней экспериментальной версии:
- `react@experimental`
- `react-dom@experimental`
-Читайте дальше, чтобы узнать, как использовать эти функции в вашем приложении, или ознакомьтесь с недавно опубликованной документацией:
+Читайте дальше, чтобы узнать, как использовать эти функции в своем приложении, или ознакомьтесь с недавно опубликованной документацией:
-- [``](/reference/react/ViewTransition): Компонент, который позволяет активировать анимацию для перехода.
-- [`addTransitionType`](/reference/react/addTransitionType): Функция, которая позволяет указать причину перехода.
+- [``](/reference/react/ViewTransition): Компонент, который позволяет активировать анимацию для Transition.
+- [`addTransitionType`](/reference/react/addTransitionType): Функция, которая позволяет указать причину Transition.
- [``](/reference/react/Activity): Компонент, который позволяет скрывать и показывать части пользовательского интерфейса.
-## Переход между видами {/*view-transitions*/}
-React View Transitions — это новая экспериментальная функция, которая упрощает добавление анимаций при переходе между состояниями пользовательского интерфейса в вашем приложении. По сути, эти анимации используют новый API [`startViewTransition`](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition), доступный в большинстве современных браузеров.
+## Переходы между представлениями {/*view-transitions*/}
+
+React View Transitions — это новая экспериментальная функция, которая упрощает добавление анимации к переходам пользовательского интерфейса в вашем приложении. В основе этих анимаций используется новый API [`startViewTransition`](https://developer.mozilla.org/ru/docs/Web/API/Document/startViewTransition), доступный в большинстве современных браузеров.
Чтобы включить анимацию элемента, оберните его в новый компонент ``:
```js
-// "Что" анимировать.
+// "что" анимировать.
-
анимируй меня
+
анимировать меня
```
-Этот новый компонент позволяет декларативно определить, "что" будет анимировано при активации анимации.
+Этот новый компонент позволяет декларативно определять «что» анимировать при активации анимации.
-Вы можете определить, "когда" анимировать, используя один из следующих трех триггеров для View Transition:
+Вы можете определить «когда» анимировать, используя один из этих трех триггеров для View Transition:
```js
-// "Когда" анимировать.
+// "когда" анимировать.
-// Transitions
+// Переходы
startTransition(() => setState(...));
-// Deferred Values
+// Отложенные значения
const deferred = useDeferredValue(value);
// Suspense
@@ -87,10 +87,10 @@ const deferred = useDeferredValue(value);
```
-По умолчанию эти анимации используют [CSS-анимации по умолчанию для View Transitions](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#customizing_your_animations) (обычно плавное перекрестное затухание). Вы можете использовать [псевдоселекторы view transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree), чтобы определить, "как" выполняется анимация. Например, вы можете использовать `*`, чтобы изменить анимацию по умолчанию для всех переходов:
+По умолчанию эти анимации используют [CSS-анимации по умолчанию для View Transitions](https://developer.mozilla.org/ru/docs/Web/API/View_Transition_API/Using#customizing_your_animations) (обычно плавное перекрестное затухание). Вы можете использовать [псевдоселекторы перехода между представлениями](https://developer.mozilla.org/ru/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree), чтобы определить «как» запускается анимация. Например, вы можете использовать `*`, чтобы изменить анимацию по умолчанию для всех переходов:
```
-// "Как" анимировать.
+// "как" анимировать.
::view-transition-old(*) {
animation: 300ms ease-out fade-out;
}
@@ -99,16 +99,16 @@ const deferred = useDeferredValue(value);
}
```
-Когда DOM обновляется из-за триггера анимации — например, `startTransition`, `useDeferredValue` или переключение `Suspense` с резервного содержимого на основное — React будет использовать [декларативные эвристики](/reference/react/ViewTransition#viewtransition), чтобы автоматически определить, какие компоненты `` следует активировать для анимации. Затем браузер выполнит анимацию, определенную в CSS.
+Когда DOM обновляется из-за триггера анимации, например `startTransition`, `useDeferredValue` или переключение резервного варианта `Suspense` на контент, React будет использовать [декларативную эвристику](/reference/react/ViewTransition#viewtransition), чтобы автоматически определить, какие компоненты `` активировать для анимации. Затем браузер запустит анимацию, определенную в CSS.
-Если вы знакомы с API браузера View Transition и хотите узнать, как React его поддерживает, ознакомьтесь с разделом [Как работает ``](/reference/react/ViewTransition#how-does-viewtransition-work) в документации.
+Если вы знакомы с API View Transition браузера и хотите узнать, как React его поддерживает, ознакомьтесь с разделом [Как работает ``](/reference/react/ViewTransition#how-does-viewtransition-work) в документации.
-В этой статье мы рассмотрим несколько примеров использования View Transitions.
+В этой статье давайте рассмотрим несколько примеров использования View Transitions.
-Мы начнем с этого приложения, которое не анимирует ни одно из следующих взаимодействий:
-- Нажмите на видео, чтобы просмотреть детали.
-- Нажмите "назад", чтобы вернуться к ленте.
-- Введите текст в поле, чтобы отфильтровать видео.
+Начнем с этого приложения, которое не анимирует ни одно из следующих взаимодействий:
+- Нажмите на видео, чтобы просмотреть подробности.
+- Нажмите «назад», чтобы вернуться к ленте.
+- Введите в списке, чтобы отфильтровать видео.
@@ -118,7 +118,7 @@ import TalkDetails from './Details'; import Home from './Home'; import {useRoute
export default function App() {
const {url} = useRouter();
- // 🚩Эта версия еще не включает никаких анимаций
+ // 🚩Эта версия пока не включает никаких анимаций
return url === '/' ? : ;
}
```
@@ -249,6 +249,7 @@ export default function Home() {
);
}
+```
```js src/Icons.js
export function ChevronLeft() {
@@ -482,7 +483,6 @@ export function Video({ video }) {
}
```
-
```js src/data.js hidden
const videos = [
{
@@ -603,14 +603,14 @@ export function Router({ children }) {
});
}
function navigate(url) {
- // Обновляем состояние роутера в переходе.
+ // Update router state in transition.
startTransition(() => {
go(url);
});
}
function navigateBack(url) {
- // Обновляем состояние роутера в переходе.
+ // Update router state in transition.
startTransition(() => {
go(url);
});
@@ -618,13 +618,13 @@ export function Router({ children }) {
useEffect(() => {
function handlePopState() {
- // Это не должно анимироваться, так как восстановление должно быть синхронным.
- // Несмотря на то, что это переход.
+ // This should not animate because restoration has to be synchronous.
+ // Even though it's a transition.
startTransition(() => {
setRouterState({
url: document.location.pathname + document.location.search,
pendingNav() {
- // Ничего не делаем. URL уже обновлен.
+ // Noop. URL has already updated.
},
});
});
@@ -2420,6 +2420,8 @@ animation: 1s linear 1s infinite shimmer;
}
```
+```
+
```js src/index.js hidden
import React, {StrictMode} from 'react';
import {createRoot} from 'react-dom/client';
@@ -2457,18 +2459,20 @@ root.render(
+```
-#### View Transitions не заменяют анимации, управляемые CSS и JavaScript {/*view-transitions-do-not-replace-css-and-js-driven-animations*/}
+#### View Transitions не заменяют анимации, управляемые CSS и JS {/*view-transitions-do-not-replace-css-and-js-driven-animations*/}
-View Transitions предназначены для UI-переходов, таких как навигация, раскрытие, открытие или изменение порядка элементов. Они не предназначены для замены всех анимаций в вашем приложении.
+View Transitions предназначены для использования в переходах пользовательского интерфейса, таких как навигация, разворачивание, открытие или изменение порядка. Они не предназначены для замены всех анимаций в вашем приложении.
-В нашем примере приложения выше обратите внимание, что уже есть анимации при нажатии кнопки «лайк» и в мерцании запасного варианта Suspense. Это хорошие варианты использования для CSS-анимаций, поскольку они анимируют конкретный элемент.
+В нашем примере приложения выше обратите внимание, что уже есть анимации при нажатии кнопки «Нравится» и в заглушке Suspense. Это хорошие примеры использования CSS-анимаций, потому что они анимируют конкретный элемент.
-### Анимация переходов {/*animating-navigations*/}
-Наше приложение включает роутер с поддержкой Suspense, где [переходы между страницами уже помечены как Transitions](/reference/react/useTransition#building-a-suspense-enabled-router), что означает, что переходы выполняются с помощью `startTransition`:
+### Анимирование навигации {/*animating-navigations*/}
+
+Наше приложение включает в себя маршрутизатор с поддержкой Suspense, с [переходами между страницами, уже отмеченными как Transitions](/reference/react/useTransition#building-a-suspense-enabled-router), что означает, что навигация выполняется с помощью `startTransition`:
```js
function navigate(url) {
@@ -2478,19 +2482,18 @@ function navigate(url) {
}
```
-`startTransition` является триггером для View Transition, поэтому мы можем добавить `` для анимации между страницами:
+`startTransition` — это триггер View Transition, поэтому мы можем добавить `` для анимации между страницами:
```js
-// "Что" анимировать
+// "что" анимировать
{url === '/' ? : }
```
-Когда `url` изменяется, рендерятся `` и новый маршрут. Поскольку `` был обновлен внутри `startTransition`, он активируется для анимации.
-
+Когда `url` меняется, `` и новый маршрут отображаются. Поскольку `` был обновлен внутри `startTransition`, `` активируется для анимации.
-По умолчанию View Transitions включают стандартную анимацию браузера cross-fade (перекрестное затухание). Добавив это в наш пример, мы получим перекрестное затухание при каждом переходе между страницами:
+По умолчанию View Transitions включают в себя анимацию перекрестного перехода, используемую по умолчанию в браузере. Добавив это в наш пример, мы теперь имеем перекрестный переход при навигации между страницами:
@@ -2500,8 +2503,8 @@ import {unstable_ViewTransition as ViewTransition} from 'react'; import Details
export default function App() {
const {url} = useRouter();
- // Используйте ViewTransition для анимации между страницами.
- // Дополнительный CSS по умолчанию не требуется.
+ // Use ViewTransition to animate between pages.
+ // No additional CSS needed by default.
return (
{url === '/' ? : }
@@ -2732,7 +2735,7 @@ export function Heart({liked, animate}) {
)}
@@ -2781,6 +2784,7 @@ export default function Page({ heading, children }) {
);
}
+```
```js src/Layout.js
import {unstable_ViewTransition as ViewTransition} from 'react'; import { useIsNavPending } from "./router";
@@ -2900,7 +2904,6 @@ export function Video({ video }) {
}
```
-
```js src/data.js hidden
const videos = [
{
@@ -3071,6 +3074,8 @@ export function useRouter() {
export function useIsNavPending() {
return use(RouterContext).isPending;
}
+```
+
```css src/styles.css hidden
@font-face {
@@ -4872,17 +4877,18 @@ root.render(
-Поскольку наш роутер уже обновляет маршрут с помощью `startTransition`, это изменение одной строки для добавления `` активирует анимацию перехода с плавным затуханием по умолчанию.
+Поскольку наш роутер уже обновляет маршрут с помощью `startTransition`, это изменение в одну строку для добавления `` активирует анимацию перехода по умолчанию.
-Если вам интересно, как это работает, ознакомьтесь с документацией [Как работает ``?](/reference/react/ViewTransition#how-does-viewtransition-work)
+Если вам интересно, как это работает, см. документацию [Как работает ``?](/reference/react/ViewTransition#how-does-viewtransition-work)
+
#### Отказ от анимаций `` {/*opting-out-of-viewtransition-animations*/}
В этом примере мы оборачиваем корень приложения в `` для простоты, но это означает, что все переходы в приложении будут анимированы, что может привести к неожиданным анимациям.
-Чтобы исправить это, мы оборачиваем дочерние элементы маршрутов значением `"none"`, чтобы каждая страница могла контролировать свою собственную анимацию:
+Чтобы исправить это, мы оборачиваем дочерние элементы маршрута с помощью `"none"`, чтобы каждая страница могла управлять своей собственной анимацией:
```js
// Layout.js
@@ -4891,17 +4897,18 @@ root.render(
```
-На практике навигация должна осуществляться с помощью пропсов "enter" и "exit" или с использованием типов переходов (Transition Types).
+На практике навигация должна выполняться через пропсы "enter" и "exit" или с использованием типов переходов.
+
### Настройка анимаций {/*customizing-animations*/}
-По умолчанию `` включает стандартное перекрестное затухание браузера.
+По умолчанию, `` включает в себя стандартный эффект перекрестного перехода из браузера.
-Чтобы настроить анимации, вы можете передать пропсы компоненту ``, чтобы указать, какие анимации использовать, в зависимости от [того, как активируется ``](/reference/react/ViewTransition#props).
+Чтобы настроить анимации, вы можете предоставить пропсы компоненту ``, чтобы указать, какие анимации использовать, основываясь на [том, как активируется ``](/reference/react/ViewTransition#props).
-Например, мы можем замедлить стандартное перекрестное затухание:
+Например, мы можем замедлить анимацию перекрестного перехода `default`:
```js
@@ -4909,7 +4916,7 @@ root.render(
```
-И определить `slow-fade` в CSS с помощью [классов view transition](/reference/react/ViewTransition#view-transition-classes):
+И определить `slow-fade` в CSS, используя [классы перехода вида](/reference/react/ViewTransition#view-transition-classes):
```css
::view-transition-old(.slow-fade) {
@@ -4921,7 +4928,7 @@ root.render(
}
```
-Теперь перекрестное затухание будет медленнее:
+Теперь перекрестный переход медленнее:
@@ -5166,7 +5173,7 @@ export function Heart({liked, animate}) {
)}
@@ -5215,6 +5222,7 @@ export default function Page({ heading, children }) {
);
}
+```
```js src/Layout.js hidden
import {unstable_ViewTransition as ViewTransition} from 'react'; import { useIsNavPending } from "./router";
@@ -5334,7 +5342,6 @@ export function Video({ video }) {
}
```
-
```js src/data.js hidden
const videos = [
{
@@ -7348,7 +7355,7 @@ animation: 1s linear 1s infinite shimmer;
```
```css src/animations.css
-/* Определяем .slow-fade с помощью классов view transition */
+/* Определите .slow-fade, используя классы переходов представлений */
::view-transition-old(.slow-fade) {
animation-duration: 500ms;
}
@@ -7395,13 +7402,14 @@ root.render(
-См. [Стилизация View Transitions](/reference/react/ViewTransition#styling-view-transitions) для полного руководства по стилизации ``.
+См. [Стилизация переходов представлений](/reference/react/ViewTransition#styling-view-transitions) для полного руководства по стилизации ``.
+
### Переходы между общими элементами {/*shared-element-transitions*/}
-Когда две страницы содержат один и тот же элемент, часто хочется анимировать его переход с одной страницы на другую.
+Когда две страницы содержат один и тот же элемент, часто требуется анимировать его переход с одной страницы на другую.
-Для этого вы можете добавить уникальное `name` к ``:
+Для этого можно добавить уникальное значение `name` в ``:
```js
@@ -7409,7 +7417,7 @@ root.render(
```
-Теперь миниатюра видео будет анимироваться между двумя страницами:
+Теперь миниатюра видео анимируется между двумя страницами:
@@ -7422,9 +7430,9 @@ import { useRouter } from "./router";
export default function App() {
const { url } = useRouter();
- // Сохраняем наш стандартный медленный переход.
- // Это позволяет контенту, не участвующему в переходе
- // между общими элементами, плавно появляться и исчезать.
+ // Keeping our default slow-fade.
+ // This allows the content not in the shared
+ // element transition to cross-fade.
return (
{url === "/" ? : }
@@ -7474,7 +7482,7 @@ export default function Details() {
navigateBack("/");
}}
>
- Назад
+ Back
}
>
@@ -7504,7 +7512,7 @@ function SearchInput({ value, onChange }) {
return (
-### Анимация границ Suspense {/*animating-suspense-boundaries*/}
+
+### Анимирование границ Suspense {/*animating-suspense-boundaries*/}
Suspense также активирует View Transitions.
-Чтобы анимировать переход от запасного варианта к контенту, мы можем обернуть `Suspense` в ``:
+Чтобы анимировать переход от fallback к контенту, мы можем обернуть `Suspense` в ``:
```js
@@ -12625,7 +13200,7 @@ Suspense также активирует View Transitions.
```
-Добавив это, запасной вариант будет плавно переходить в контент. Нажмите на видео, и вы увидите, как информация о видео анимируется:
+Добавив это, fallback будет перекрестно переходить в контент. Нажмите на видео и посмотрите, как информация о видео анимируется:
@@ -12872,7 +13447,7 @@ export function Heart({liked, animate}) {
)}
@@ -12931,12 +13506,13 @@ export default function Page({ heading, children }) {
}
```
+
```js src/LikeButton.js hidden
import {useState} from 'react';
import {Heart} from './Icons';
-// Хак, так как у нас нет реального бэкенда.
-// В отличие от локального состояния, это переживает фильтрацию видео.
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
const likedVideos = new Set();
export default function LikeButton({video}) {
@@ -12970,8 +13546,8 @@ import { PauseIcon, PlayIcon } from "./Icons";
import { startTransition } from "react";
export function Thumbnail({ video, children }) {
- // Добавляем имя для анимации с помощью общей переходной анимации элементов.
- // Используется анимация по умолчанию, дополнительный CSS не требуется.
+ // Add a name to animate with a shared element transition.
+ // This uses the default animation, no additional css needed.
return (
-Мы также можем предоставить пользовательские анимации, используя `exit` для запасного варианта и `enter` для контента:
+Мы также можем предоставить пользовательские анимации, используя `exit` для fallback и `enter` для контента:
```js {3,8}
@@ -14136,6 +14713,8 @@ export default function Home() {
);
}
+```
+
```js src/Icons.js hidden
export function ChevronLeft() {
@@ -14230,7 +14809,7 @@ export function Heart({liked, animate}) {
)}
@@ -14385,7 +14964,6 @@ export function Video({ video }) {
}
```
-
```js src/data.js hidden
const videos = [
{
@@ -14472,7 +15050,6 @@ export function fetchVideoDetails(id) {
```
```
-
```js src/router.js hidden
import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react";
@@ -15141,22 +15718,38 @@ animation: 1s linear 1s infinite shimmer;
vertical-align: middle;
font-size: 15px;
}
-
-.search-input input:hover, .search-input input:active {
-
+
+.search-input input:hover, .search-input input:active {
+ background-color: rgb(235 236 240/ 0.8);
+ color: rgb(35 39 47/ 0.8);
+}
+
+/* Home */
+.video-list {
+ position: relative;
+}
+
+.video-list .videos {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ overflow-y: auto;
+ height: 100%;
+}
+```
```css src/animations.css
-/* Slide the fallback down */
+/* Сдвинуть fallback вниз */
::view-transition-old(.slide-down) {
animation: 150ms ease-out both fade-out, 150ms ease-out both slide-down;
}
-/* Slide the content up */
+/* Сдвинуть контент вверх */
::view-transition-new(.slide-up) {
animation: 210ms ease-in 150ms both fade-in, 400ms ease-in both slide-up;
}
-/* Define the new keyframes */
+/* Определить новые ключевые кадры */
@keyframes slide-up {
from {
transform: translateY(10px);
@@ -15175,34 +15768,34 @@ animation: 1s linear 1s infinite shimmer;
}
}
-/* Previously defined animations below */
+/* Ранее определённые анимации ниже */
-/* Animations for view transition classed added by transition type */
+/* Анимации для перехода представлений, добавленные по типу перехода */
::view-transition-old(.slide-forward) {
- /* when sliding forward, the "old" page should slide out to left. */
+ /* при переходе вперёд, "старая" страница должна выезжать влево. */
animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(.slide-forward) {
- /* when sliding forward, the "new" page should slide in from right. */
+ /* при переходе вперёд, "новая" страница должна въезжать справа. */
animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
::view-transition-old(.slide-back) {
- /* when sliding back, the "old" page should slide out to right. */
+ /* при переходе назад, "старая" страница должна выезжать вправо. */
animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}
::view-transition-new(.slide-back) {
- /* when sliding back, the "new" page should slide in from left. */
+ /* при переходе назад, "новая" страница должна въезжать слева. */
animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
}
-/* Keyframes to support our animations above. */
+/* Ключевые кадры для поддержки наших анимаций выше. */
@keyframes fade-in {
from {
opacity: 0;
@@ -15245,7 +15838,7 @@ animation: 1s linear 1s infinite shimmer;
}
}
-/* Default .slow-fade. */
+/* По умолчанию .slow-fade. */
::view-transition-old(.slow-fade) {
animation-duration: 500ms;
}
@@ -15290,11 +15883,10 @@ root.render(
}
```
-
-### Анимация списков {/*animating-lists*/}
+### Анимирование списков {/*animating-lists*/}
-Вы также можете использовать `` для анимации списков элементов при их переупорядочивании, например, в списке элементов с поиском:
+Вы также можете использовать ``, чтобы анимировать списки элементов при их переупорядочивании, например, в списке элементов с возможностью поиска:
```js {3,5}
@@ -15314,7 +15906,7 @@ const deferredSearchText = useDeferredValue(searchText);
const filteredVideos = filterVideos(videos, deferredSearchText);
```
-Теперь элементы анимируются по мере ввода текста в строке поиска:
+Теперь элементы анимируются по мере ввода текста в строку поиска:
@@ -15616,7 +16208,7 @@ export default function Page({ heading, children }) {
- {/* Пользовательские классы в зависимости от типа перехода. */}
+ {/* Пользовательские классы на основе типа перехода. */}
{/* Отказ от ViewTransition для контента. */}
- {/* Контент может определить свой собственный ViewTransition. */}
+ {/* Контент может определять свой собственный ViewTransition. */}
{children}
@@ -15644,7 +16236,7 @@ export default function Page({ heading, children }) {
import {useState} from 'react';
import {Heart} from './Icons';
-// Хак, так как у нас нет реального бэкенда.
+// Хаки, поскольку у нас на самом деле нет бэкенда.
// В отличие от локального состояния, это переживает фильтрацию видео.
const likedVideos = new Set();
@@ -15674,13 +16266,13 @@ export default function LikeButton({video}) {
```js src/Videos.js hidden
import { useState, unstable_ViewTransition as ViewTransition } from "react";
import LikeButton from "./LikeButton";
-import {useRouter} from "./router";
-import {PauseIcon, PlayIcon} from "./Icons";
+import { useRouter } from "./router";
+import { PauseIcon, PlayIcon } from "./Icons";
import { startTransition } from "react";
export function Thumbnail({ video, children }) {
- // Добавьте имя для анимации с помощью перехода с общим элементом.
- // Это использует анимацию по умолчанию, дополнительный CSS не требуется.
+ // Добавьте имя для анимации с переходом общего элемента.
+ // Это использует анимацию по умолчанию, дополнительный css не требуется.
return (
{}, url: document.location.pathname});
function navigate(url) {
startTransition(() => {
- // Тип перехода для причины "переход вперед"
+ // Тип перехода для причины "навигация вперед"
addTransitionType('nav-forward');
go(url);
});
}
function navigateBack(url) {
startTransition(() => {
- // Тип перехода для причины "переход назад"
+ // Тип перехода для причины "навигация назад"
addTransitionType('nav-back');
go(url);
});
@@ -15854,13 +16445,13 @@ export function Router({ children }) {
useEffect(() => {
function handlePopState() {
- // Это не должно анимироваться, так как восстановление должно быть синхронным.
+ // Это не должно анимироваться, потому что восстановление должно быть синхронным.
// Даже если это переход.
startTransition(() => {
setRouterState({
url: document.location.pathname + document.location.search,
pendingNav() {
- // Ничего не делать. URL уже обновлен.
+ // Noop. URL уже обновлен.
},
});
});
@@ -15901,6 +16492,7 @@ export function useIsNavPending() {
}
```
+
```css src/styles.css hidden
@font-face {
font-family: Optimistic Text;
@@ -16511,7 +17103,7 @@ animation: 1s linear 1s infinite shimmer;
```
```css src/animations.css
-/* No additional animations needed */
+/* Дополнительные анимации не нужны */
@@ -16521,14 +17113,14 @@ animation: 1s linear 1s infinite shimmer;
-/* Previously defined animations below */
+/* Ранее определённые анимации ниже */
-/* Slide animation for Suspense */
+/* Анимация слайда для Suspense */
::view-transition-old(.slide-down) {
animation: 150ms ease-out both fade-out, 150ms ease-out both slide-down;
}
@@ -16537,32 +17129,32 @@ animation: 1s linear 1s infinite shimmer;
animation: 210ms ease-in 150ms both fade-in, 400ms ease-in both slide-up;
}
-/* Animations for view transition classed added by transition type */
+/* Анимации для переходов представлений, добавленные по типу перехода */
::view-transition-old(.slide-forward) {
- /* when sliding forward, the "old" page should slide out to left. */
+ /* при переходе вперёд, "старая" страница должна выезжать влево. */
animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(.slide-forward) {
- /* when sliding forward, the "new" page should slide in from right. */
+ /* при переходе вперёд, "новая" страница должна въезжать справа. */
animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
::view-transition-old(.slide-back) {
- /* when sliding back, the "old" page should slide out to right. */
+ /* при переходе назад, "старая" страница должна выезжать вправо. */
animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}
::view-transition-new(.slide-back) {
- /* when sliding back, the "new" page should slide in from left. */
+ /* при переходе назад, "новая" страница должна въезжать слева. */
animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
}
-/* Keyframes to support our animations above. */
+/* Keyframes для поддержки наших анимаций выше. */
@keyframes slide-up {
from {
transform: translateY(10px);
@@ -16669,15 +17261,14 @@ root.render(
}
```
-
-### Конечный результат {/*final-result*/}
+### Окончательный результат {/*final-result*/}
-Добавив несколько компонентов `` и несколько строк CSS, мы смогли добавить все анимации, показанные выше, в конечный результат.
+Добавив несколько компонентов `` и несколько строк CSS, мы смогли добавить все вышеперечисленные анимации в окончательный результат.
-Мы с восторгом относимся к View Transitions и считаем, что они выведут на новый уровень приложения, которые вы сможете создавать. Они готовы к использованию уже сегодня в экспериментальном канале релизов React.
+Мы в восторге от View Transitions и считаем, что они поднимут на новый уровень приложения, которые вы сможете создавать. Их можно начать пробовать уже сегодня в экспериментальном канале релизов React.
-Давайте уберём медленное затухание и посмотрим на конечный результат:
+Давайте уберем медленное затухание и посмотрим на окончательный результат:
@@ -16687,7 +17278,7 @@ import {unstable_ViewTransition as ViewTransition} from 'react'; import Details
export default function App() {
const {url} = useRouter();
- // Анимируем страницы с помощью перекрестного затухания.
+ // Animate with a cross fade between pages.
return (
{url === '/' ? : }
@@ -16700,17 +17291,17 @@ export default function App() {
import { use, Suspense, unstable_ViewTransition as ViewTransition } from "react"; import { fetchVideo, fetchVideoDetails } from "./data"; import { Thumbnail, VideoControls } from "./Videos"; import { useRouter } from "./router"; import Layout from "./Layout"; import { ChevronLeft } from "./Icons";
function VideoDetails({id}) {
- // Анимируем от запасного варианта Suspense до контента
+ // Animate from Suspense fallback to content
return (
}
>
- {/* Анимируем контент вверх */}
+ {/* Animate the content up */}
@@ -16741,7 +17332,7 @@ export default function Details() {
navigateBack("/");
}}
>
- Назад
+ Back
}
>
@@ -16770,21 +17361,21 @@ function VideoInfo({ id }) {
import { useId, useState, use, useDeferredValue, unstable_ViewTransition as ViewTransition } from "react";import { Video } from "./Videos";import Layout from "./Layout";import { fetchVideos } from "./data";import { IconSearch } from "./Icons";
function SearchList({searchText, videos}) {
- // Активируем с помощью useDeferredValue ("когда")
+ // Activate with useDeferredValue ("when")
const deferredSearchText = useDeferredValue(searchText);
const filteredVideos = filterVideos(videos, deferredSearchText);
return (
{filteredVideos.map((video) => (
- // Анимируем каждый элемент в списке ("что")
+ // Animate each item in list ("what")
))}
{filteredVideos.length === 0 && (
-
Нет результатов
+
No results
)}
);
@@ -16796,7 +17387,7 @@ export default function Home() {
const [searchText, setSearchText] = useState('');
return (
- {count} Видео
}>
+
+
+
+ );
+}
+
+function SearchInput({ value, onChange }) {
+ const id = useId();
+ return (
+
+ );
+}
+
+function filterVideos(videos, query) {
+ const keywords = query
+ .toLowerCase()
+ .split(" ")
+ .filter((s) => s !== "");
+ if (keywords.length === 0) {
+ return videos;
+ }
+ return videos.filter((video) => {
+ const words = (video.title + " " + video.description)
+ .toLowerCase()
+ .split(" ");
+ return keywords.every((kw) => words.some((w) => w.includes(kw)));
+ });
+}
+```
```js src/Icons.js hidden
export function ChevronLeft() {
@@ -19480,7 +20463,6 @@ export function Video({ video }) {
}
```
-
```js src/data.js hidden
const videos = [
{
@@ -19567,7 +20549,6 @@ export function fetchVideoDetails(id) {
```
```
-
```js src/router.js hidden
import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react";
@@ -20256,8 +21237,9 @@ animation: 1s linear 1s infinite shimmer;
}
```
+```
```css src/animations.css
-/* No additional animations needed */
+/* Дополнительные анимации не нужны */
@@ -20267,14 +21249,14 @@ animation: 1s linear 1s infinite shimmer;
-/* Previously defined animations below */
+/* Ранее определённые анимации ниже */
-/* Slide animations for Suspense the fallback down */
+/* Анимации скольжения для Suspense, чтобы сдвинуть fallback вниз */
::view-transition-old(.slide-down) {
animation: 150ms ease-out both fade-out, 150ms ease-out both slide-down;
}
@@ -20283,32 +21265,32 @@ animation: 1s linear 1s infinite shimmer;
animation: 210ms ease-in 150ms both fade-in, 400ms ease-in both slide-up;
}
-/* Animations for view transition classed added by transition type */
+/* Анимации для переходов представлений, добавленные по типу перехода */
::view-transition-old(.slide-forward) {
- /* when sliding forward, the "old" page should slide out to left. */
+ /* при скольжении вперёд "старая" страница должна выскользнуть влево. */
animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(.slide-forward) {
- /* when sliding forward, the "new" page should slide in from right. */
+ /* при скольжении вперёд "новая" страница должна въехать справа. */
animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
::view-transition-old(.slide-back) {
- /* when sliding back, the "old" page should slide out to right. */
+ /* при скольжении назад "старая" страница должна выскользнуть вправо. */
animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}
::view-transition-new(.slide-back) {
- /* when sliding back, the "new" page should slide in from left. */
+ /* при скольжении назад "новая" страница должна въехать слева. */
animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
}
-/* Keyframes to support our animations above. */
+/* Keyframes для поддержки наших анимаций выше. */
@keyframes slide-up {
from {
transform: translateY(10px);
@@ -20415,46 +21397,48 @@ root.render(
```
+```
-### Серверный рендеринг с Activity {/*server-side-rendering-with-activity*/}
+### Рендеринг на стороне сервера с Activity {/*server-side-rendering-with-activity*/}
-При использовании Activity на странице с серверным рендерингом (SSR) существуют дополнительные оптимизации.
+При использовании Activity на странице, которая использует рендеринг на стороне сервера (SSR), существуют дополнительные оптимизации.
-Если часть страницы рендерится с `mode="hidden"`, она не будет включена в SSR-ответ. Вместо этого React запланирует клиентский рендеринг содержимого внутри Activity, пока остальная часть страницы гидратируется, отдавая приоритет видимому контенту на экране.
+Если часть страницы отрендерена с `mode="hidden"`, то она не будет включена в ответ SSR. Вместо этого React запланирует клиентский рендер для контента внутри Activity, пока остальная часть страницы гидрируется, отдавая приоритет видимому контенту на экране.
-Для частей UI, отрендеренных с `mode="visible"`, React будет понижать приоритет гидратации содержимого внутри Activity, подобно тому, как содержимое Suspense гидратируется с низким приоритетом. Если пользователь взаимодействует со страницей, мы отдадим приоритет гидратации внутри границы при необходимости.
+Для частей пользовательского интерфейса, отрендеренных с `mode="visible"`, React снизит приоритет гидратации контента внутри Activity, аналогично тому, как контент Suspense гидрируется с более низким приоритетом. Если пользователь взаимодействует со страницей, мы при необходимости отдадим приоритет гидратации внутри границы.
-Это продвинутые сценарии использования, но они демонстрируют дополнительные преимущества, учтенные в Activity.
+Это продвинутые варианты использования, но они показывают дополнительные преимущества, учитываемые с Activity.
### Будущие режимы для Activity {/*future-modes-for-activity*/}
-В будущем мы можем добавить новые режимы для Activity.
+В будущем мы можем добавить больше режимов в Activity.
-Например, распространенный сценарий использования — рендеринг модального окна, где предыдущая «неактивная» страница видна за «активным» модальным представлением. Режим «hidden» не подходит для этого сценария, поскольку он не видим и не включен в SSR.
+Например, распространенным вариантом использования является рендеринг модального окна, где предыдущая «неактивная» страница видна за «активным» видом модального окна. Режим «hidden» не подходит для этого варианта использования, потому что он не виден и не включен в SSR.
-Вместо этого мы рассматриваем новый режим, который будет сохранять контент видимым — и включенным в SSR — но будет держать его размонтированным и понижать приоритет обновлений. Этот режим также может потребовать «приостановки» обновлений DOM, поскольку может отвлекать видимый контент, обновляющийся за модальным окном.
+Вместо этого мы рассматриваем новый режим, который будет сохранять контент видимым — и включенным в SSR — но будет держать его несмонтированным и снижать приоритет обновлений. Этот режим также может потребовать «приостановки» обновлений DOM, поскольку может отвлекать видеть, как фоновый контент обновляется, пока открыто модальное окно.
-Другой режим, который мы рассматриваем для Activity, — это возможность автоматического уничтожения состояния для скрытых Activity, если используется слишком много памяти. Поскольку компонент уже размонтирован, может быть предпочтительнее уничтожить состояние для наименее недавно использованных скрытых частей приложения, чем потреблять слишком много ресурсов.
+Другой режим, который мы рассматриваем для Activity, — это возможность автоматического уничтожения состояния для скрытых Activity, если используется слишком много памяти. Поскольку компонент уже не смонтирован, может быть предпочтительнее уничтожить состояние для наименее недавно использованных скрытых частей приложения, чем потреблять слишком много ресурсов.
-Это области, которые мы все еще исследуем, и мы поделимся дополнительной информацией по мере продвижения. Для получения дополнительной информации о том, что включает в себя Activity сегодня, [ознакомьтесь с документацией](/reference/react/Activity).
+Это области, которые мы все еще изучаем, и мы поделимся дополнительной информацией по мере продвижения. Для получения дополнительной информации о том, что включает в себя Activity сегодня, [ознакомьтесь с документацией](/reference/react/Activity).
---
-# Функции в разработке {/*features-in-development*/}
+# Разрабатываемые функции {/*features-in-development*/}
-Мы также разрабатываем функции, которые помогут решить перечисленные ниже распространенные проблемы.
+Мы также разрабатываем функции, которые помогут решить распространенные проблемы, описанные ниже.
-По мере итерации над возможными решениями вы можете увидеть некоторые потенциальные API, которые мы тестируем, на основе отправленных нами PR. Пожалуйста, помните, что, пробуя разные идеи, мы часто изменяем или удаляем различные решения после их опробования.
+По мере того, как мы будем итерировать возможные решения, вы можете увидеть, что некоторые потенциальные API, которые мы тестируем, будут опубликованы на основе PR, которые мы выкладываем. Пожалуйста, имейте в виду, что, пробуя разные идеи, мы часто меняем или удаляем разные решения после их опробования.
-Когда решения, над которыми мы работаем, публикуются слишком рано, это может вызвать суматоху и путаницу в сообществе. Чтобы сбалансировать прозрачность и ограничить путаницу, мы делимся проблемами, для которых мы в настоящее время разрабатываем решения, не раскрывая конкретное решение, которое у нас есть на уме.
+Когда решения, над которыми мы работаем, публикуются слишком рано, это может создать неразбериху и путаницу в сообществе. Чтобы сбалансировать прозрачность и ограничить путаницу, мы делимся проблемами, для которых мы в настоящее время разрабатываем решения, не делясь конкретным решением, которое мы имеем в виду.
-По мере развития этих функций мы будем анонсировать их в блоге с документацией, чтобы вы могли их опробовать.
+По мере продвижения этих функций мы будем объявлять о них в блоге с включенной документацией, чтобы вы могли их опробовать.
+
-## Треки производительности React {/*react-performance-tracks*/}
+## React Performance Tracks {/*react-performance-tracks*/}
-Мы работаем над новым набором пользовательских треков для профилировщиков производительности с использованием API браузера, которые [позволяют добавлять пользовательские треки](https://developer.chrome.com/docs/devtools/performance/extension) для предоставления дополнительной информации о производительности вашего React-приложения.
+Мы работаем над новым набором пользовательских треков для профилировщиков производительности, используя API браузера, которые [позволяют добавлять пользовательские треки](https://developer.chrome.com/docs/devtools/performance/extension) для предоставления больше информации о производительности вашего React-приложения.
-Эта функция все еще находится в разработке, поэтому мы еще не готовы опубликовать документацию для ее полного выпуска в качестве экспериментальной функции. Вы можете получить предварительный просмотр при использовании экспериментальной версии React, которая автоматически добавит треки производительности в профили:
+Эта функция все еще находится в разработке, поэтому мы еще не готовы публиковать документацию, чтобы полностью выпустить ее в качестве экспериментальной функции. Вы можете получить предварительный просмотр при использовании экспериментальной версии React, которая автоматически добавит треки производительности в профили:
@@ -20462,4 +21446,127 @@ root.render(
-
+
+
+
+
+Существует несколько известных проблем, которые мы планируем решить, такие как производительность, и трек планировщика не всегда «соединяет» работу между Suspended-деревьями, поэтому он еще не совсем готов к использованию. Мы также все еще собираем отзывы от первых пользователей, чтобы улучшить дизайн и удобство использования треков.
+
+Как только мы решим эти проблемы, мы опубликуем экспериментальную документацию и сообщим, что ее можно попробовать.
+
+---
+
+## Automatic Effect Dependencies {/*automatic-effect-dependencies*/}
+
+Когда мы выпустили хуки, у нас было три мотива:
+
+- **Общий код между компонентами**: хуки заменили такие шаблоны, как render props и компоненты высшего порядка, чтобы позволить вам повторно использовать логику с сохранением состояния, не изменяя иерархию ваших компонентов.
+- **Думать с точки зрения функции, а не жизненных циклов**: хуки позволяют разделить один компонент на меньшие функции на основе того, какие части связаны (например, настройка подписки или получение данных), а не принудительно разделять на основе методов жизненного цикла.
+- **Поддержка компиляции ahead-of-time**: хуки были разработаны для поддержки компиляции ahead-of-time с меньшим количеством подводных камней, вызывающих непреднамеренную деоптимизацию, вызванную методами жизненного цикла, и ограничениями классов.
+
+С момента их выпуска хуки успешно справляются с задачей *общего кода между компонентами*. Хуки теперь являются предпочтительным способом обмена логикой между компонентами, и существует меньше вариантов использования для render props и компонентов высшего порядка. Хуки также успешно поддерживают такие функции, как Fast Refresh, которые были невозможны с компонентами класса.
+
+### Effects могут быть сложными {/*effects-can-be-hard*/}
+
+К сожалению, о некоторых хуках все еще сложно думать с точки зрения функции, а не жизненных циклов. Эффекты, в частности, все еще трудно понять и являются наиболее распространенной проблемой, о которой мы слышим от разработчиков. В прошлом году мы потратили значительное количество времени на изучение того, как использовались Effects, и как эти варианты использования можно упростить и сделать более понятными.
+
+Мы обнаружили, что часто путаница возникает из-за использования Effect, когда он вам не нужен. Руководство [You Might Not Need an Effect](/learn/you-might-not-need-an-effect) охватывает многие случаи, когда Effects не являются правильным решением. Однако, даже когда Effect подходит для проблемы, Effects все равно может быть сложнее понять, чем жизненные циклы компонентов класса.
+
+Мы считаем, что одна из причин путаницы заключается в том, что разработчики думают об Effects с точки зрения _компонента_ (как о жизненном цикле), а не с точки зрения _Effects_ (что делает Effect).
+
+Давайте рассмотрим пример [из документации](/learn/lifecycle-of-reactive-effects#thinking-from-the-effects-perspective):
+
+```js
+useEffect(() => {
+ // Ваш Effect, подключенный к комнате, указанной с помощью roomId...
+ const connection = createConnection(serverUrl, roomId);
+ connection.connect();
+ return () => {
+ // ...пока он не отключится
+ connection.disconnect();
+ };
+}, [roomId]);
+```
+
+Многие пользователи будут читать этот код как «при монтировании подключиться к roomId. всякий раз, когда `roomId` меняется, отключиться от старой комнаты и повторно создать соединение». Однако это мышление с точки зрения жизненного цикла компонента, а это означает, что вам нужно будет учитывать каждое состояние жизненного цикла компонента, чтобы правильно написать Effect. Это может быть сложно, поэтому понятно, что Effects кажутся сложнее, чем классовые жизненные циклы при использовании перспективы компонента.
+
+### Effects без зависимостей {/*effects-without-dependencies*/}
+
+Вместо этого лучше думать с точки зрения Effect. Effect ничего не знает о жизненных циклах компонентов. Он только описывает, как начать синхронизацию и как ее остановить. Когда пользователи думают об Effects таким образом, их Effects, как правило, легче писать и более устойчивы к запуску и остановке столько раз, сколько необходимо.
+
+Мы потратили некоторое время на изучение того, почему об Effects думают с точки зрения компонента, и мы думаем, что одна из причин — массив зависимостей. Поскольку вам приходится его писать, он прямо перед вами, напоминая вам о том, на что вы «реагируете», и заманивая вас в ментальную модель «сделай это, когда эти значения изменятся».
+
+Когда мы выпустили хуки, мы знали, что можем упростить их использование с помощью компиляции ahead-of-time. С React Compiler вы теперь можете избежать самостоятельного написания `useCallback` и `useMemo` в большинстве случаев. Для Effects компилятор может вставить зависимости за вас:
+
+```js
+useEffect(() => {
+ const connection = createConnection(serverUrl, roomId);
+ connection.connect();
+ return () => {
+ connection.disconnect();
+ };
+}); // компилятор вставил зависимости.
+```
+
+С помощью этого кода React Compiler может вывести зависимости за вас и вставить их автоматически, чтобы вам не нужно было их видеть или писать. С такими функциями, как [расширение IDE](#compiler-ide-extension) и [`useEffectEvent`](/reference/react/experimental_useEffectEvent), мы можем предоставить CodeLens, чтобы показать вам, что компилятор вставил для тех случаев, когда вам нужно отладить или оптимизировать, удалив зависимость. Это помогает укрепить правильную ментальную модель для написания Effects, которые могут запускаться в любое время для синхронизации состояния вашего компонента или хука с чем-то другим.
+
+Мы надеемся, что автоматическая вставка зависимостей не только упрощает написание, но и упрощает их понимание, заставляя вас думать с точки зрения того, что делает Effect, а не с точки зрения жизненных циклов компонентов.
+
+---
+
+## Compiler IDE Extension {/*compiler-ide-extension*/}
+
+Ранее на этой неделе [мы поделились](/blog/2025/04/21/react-compiler-rc) кандидатом на выпуск React Compiler, и мы работаем над выпуском первой стабильной версии компилятора SemVer в ближайшие месяцы.
+
+Мы также начали изучать способы использования React Compiler для предоставления информации, которая может улучшить понимание и отладку вашего кода. Одна из идей, которую мы начали изучать, — это новое экспериментальное расширение React IDE на основе LSP, разработанное на основе React Compiler, аналогичное расширению, используемому в [выступлении Лорен Тан на React Conf](https://conf2024.react.dev/talks/5).
+
+Наша идея заключается в том, что мы можем использовать статический анализ компилятора для предоставления больше информации, предложений и возможностей оптимизации непосредственно в вашей IDE. Например, мы можем предоставить диагностику для кода, нарушающего Правила React, наведение курсора, чтобы показать, были ли компоненты и хуки оптимизированы компилятором, или CodeLens, чтобы увидеть [автоматически вставленные зависимости Effect](#automatic-effect-dependencies).
+
+Расширение IDE все еще находится на ранней стадии изучения, но мы поделимся нашими успехами в будущих обновлениях.
+
+---
+
+## Fragment Refs {/*fragment-refs*/}
+
+Многие DOM API, такие как API для управления событиями, позиционирования и фокуса, сложно компоновать при написании с помощью React. Это часто приводит к тому, что разработчики обращаются к Effects, управляя несколькими Refs, используя такие API, как `findDOMNode` (удален в React 19).
+
+Мы изучаем возможность добавления refs к фрагментам, которые будут указывать на группу элементов DOM, а не только на один элемент. Мы надеемся, что это упростит управление несколькими дочерними элементами и упростит написание компонуемого кода React при вызове DOM API.
+
+Fragment refs все еще находятся в стадии исследования. Мы поделимся дополнительной информацией, когда будем ближе к завершению окончательного API.
+
+---
+
+## Gesture Animations {/*gesture-animations*/}
+
+Мы также исследуем способы улучшения View Transitions для поддержки анимаций жестов, таких как смахивание для открытия меню или прокрутка фотокарусели.
+
+Жесты представляют новые проблемы по нескольким причинам:
+
+- **Жесты непрерывны**: при смахивании анимация привязана ко времени размещения пальца, а не к запуску и завершению.
+- **Жесты не завершаются**: когда вы отпускаете палец, анимации жестов могут завершиться или вернуться в исходное состояние (например, когда вы только частично открываете меню) в зависимости от того, как далеко вы зашли.
+- **Жесты инвертируют старое и новое**: во время анимации вы хотите, чтобы страница, с которой вы анимируете, оставалась «живой» и интерактивной. Это инвертирует модель View Transition браузера, где «старое» состояние — это снимок, а «новое» состояние — это живой DOM.
+
+Мы считаем, что нашли подход, который хорошо работает, и можем представить новый API для запуска переходов жестов. Пока мы сосредоточены на выпуске ``, а затем вернемся к жестам.
+
+---
+
+## Concurrent Stores {/*concurrent-stores*/}
+
+Когда мы выпустили React 18 с конкурентным рендерингом, мы также выпустили `useSyncExternalStore`, чтобы библиотеки внешних хранилищ, которые не использовали состояние или контекст React, могли [поддерживать конкурентный рендеринг](https://github.com/reactwg/react-18/discussions/70), принудительно выполняя синхронный рендер при обновлении хранилища.
+
+Однако использование `useSyncExternalStore` имеет свою цену, поскольку оно вынуждает отказаться от таких конкурентных функций, как переходы, и заставляет существующий контент отображать fallbacks Suspense.
+
+Теперь, когда React 19 выпущен, мы возвращаемся к этой проблеме, чтобы создать примитив для полной поддержки конкурентных внешних хранилищ с помощью API `use`:
+
+```js
+const value = use(store);
+```
+
+Наша цель — позволить считывать внешнее состояние во время рендеринга без разрыва и беспрепятственно работать со всеми конкурентными функциями, которые предлагает React.
+
+Это исследование все еще на ранней стадии. Мы поделимся дополнительной информацией и тем, как будут выглядеть новые API, когда мы продвинемся дальше.
+
+---
+
+_Благодарим [Aurora Scharff](https://bsky.app/profile/aurorascharff.no), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Eli White](https://twitter.com/Eli_White), [Lauren Tan](https://bsky.app/profile/no.lol), [Luna Wei](https://github.com/lunaleaps), [Matt Carroll](https://twitter.com/mattcarrollcode), [Jack Pope](https://jackpope.me), [Jason Bonta](https://threads.net/someextent), [Jordan Brown](https://github.com/jbrown215), [Jordan Eldredge](https://bsky.app/profile/capt.dev), [Mofei Zhang](https://threads.net/z_mofei), [Sebastien Lorber](https://bsky.app/profile/sebastienlorber.com), [Sebastian Markbåge](https://bsky.app/profile/sebmarkbage.calyptus.eu) и [Tim Yung](https://github.com/yungsters) за рецензирование этого поста._
\ No newline at end of file
From 1d72bed1eea0225b6b80b8b0aff9e24a999fd5ee Mon Sep 17 00:00:00 2001
From: "translate-react-bot[bot]"
<251169733+translate-react-bot[bot]@users.noreply.github.com>
Date: Mon, 18 May 2026 16:03:43 +0000
Subject: [PATCH 3/4] =?UTF-8?q?docs:=20translate=20`react-labs-view-transi?=
=?UTF-8?q?tions-activity-and-more.md`=20to=20=D0=A0=D1=83=D1=81=D1=81?=
=?UTF-8?q?=D0=BA=D0=B8=D0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
...labs-view-transitions-activity-and-more.md | 15879 +++-------------
1 file changed, 2917 insertions(+), 12962 deletions(-)
diff --git a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
index ad4d1f1e6a..bc8a314c0f 100644
--- a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
+++ b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
@@ -1,36 +1,39 @@
---
-title: "React Labs: View Transitions, Activity и многое другое"
+title: "React Labs: Переходы представлений, активность и многое другое"
author: Ricky Hanlon
date: 2025/04/23
-description: В постах React Labs мы пишем о проектах, находящихся в активной разработке и исследовании. В этом посте мы делимся двумя новыми экспериментальными функциями, которые можно попробовать уже сегодня, а также обновлениями по другим областям, над которыми мы сейчас работаем.
+description: В публикациях React Labs мы пишем о проектах, находящихся в стадии
+ активных исследований и разработок. В этой публикации мы расскажем о двух
+ новых экспериментальных возможностях, готовых к тестированию сегодня, а также
+ об обновлениях в других областях, над которыми мы работаем сейчас.
---
-
23 апреля 2025 г. от [Ricky Hanlon](https://twitter.com/rickhanlonii)
---
-В постах React Labs мы пишем о проектах, находящихся в активной разработке и исследовании. В этом посте мы делимся двумя новыми экспериментальными функциями, которые можно попробовать уже сегодня, а также обновлениями по другим областям, над которыми мы сейчас работаем.
+В публикациях React Labs мы пишем о проектах, находящихся в активной стадии исследований и разработок. В этой публикации мы представляем две новые экспериментальные функции, готовые к тестированию, а также обновления по другим областям, над которыми мы сейчас работаем.
+
-React Conf 2025 запланирована на 7–8 октября в Хендерсоне, штат Невада!
+React Conf 2025 запланирована на 7–8 октября в Хендерсоне, Невада!
-Мы ищем докладчиков, которые помогут нам создать доклады о функциях, описанных в этом посте. Если вы заинтересованы в выступлении на ReactConf, [пожалуйста, подайте заявку здесь](https://forms.reform.app/react-conf/call-for-speakers/) (предложение доклада не требуется).
+Мы ищем докладчиков, которые помогут нам создать выступления о функциях, описанных в этой публикации. Если вы заинтересованы в выступлении на ReactConf, [подайте заявку здесь](https://forms.reform.app/react-conf/call-for-speakers/) (предварительное предложение доклада не требуется).
Для получения дополнительной информации о билетах, бесплатной трансляции, спонсорстве и многом другом посетите [веб-сайт React Conf](https://conf.react.dev).
-Сегодня мы рады выпустить документацию по двум новым экспериментальным функциям, готовым к тестированию:
+Сегодня мы рады опубликовать документацию для двух новых экспериментальных функций, готовых к тестированию:
- [View Transitions](#view-transitions)
- [Activity](#activity)
-Мы также делимся обновлениями по новым функциям, находящимся в разработке:
+Мы также делимся обновлениями о новых функциях, находящихся в разработке:
- [React Performance Tracks](#react-performance-tracks)
- [Compiler IDE Extension](#compiler-ide-extension)
- [Automatic Effect Dependencies](#automatic-effect-dependencies)
@@ -41,39 +44,38 @@ React Conf 2025 запланирована на 7–8 октября в Хенд
# Новые экспериментальные функции {/*new-experimental-features*/}
-View Transitions и Activity теперь готовы к тестированию в `react@experimental`. Эти функции были протестированы в продакшене и стабильны, но окончательный API может измениться по мере учета отзывов.
+View Transitions и Activity теперь готовы к тестированию в `react@experimental`. Эти функции были протестированы в продакшене и являются стабильными, но окончательный API может измениться по мере внесения обратной связи.
-Вы можете попробовать их, обновив пакеты React до самой последней экспериментальной версии:
+Вы можете попробовать их, обновив пакеты React до последней экспериментальной версии:
- `react@experimental`
- `react-dom@experimental`
-Читайте дальше, чтобы узнать, как использовать эти функции в своем приложении, или ознакомьтесь с недавно опубликованной документацией:
+Читайте дальше, чтобы узнать, как использовать эти функции в вашем приложении, или ознакомьтесь с недавно опубликованной документацией:
-- [``](/reference/react/ViewTransition): Компонент, который позволяет активировать анимацию для Transition.
-- [`addTransitionType`](/reference/react/addTransitionType): Функция, которая позволяет указать причину Transition.
-- [``](/reference/react/Activity): Компонент, который позволяет скрывать и показывать части пользовательского интерфейса.
+- [``](/reference/react/ViewTransition): Компонент, который позволяет активировать анимацию для перехода.
+- [`addTransitionType`](/reference/react/addTransitionType): Функция, которая позволяет указать причину перехода.
+- [``](/reference/react/Activity): Компонент, который позволяет скрывать и отображать части пользовательского интерфейса.
+## Переходы между видами {/*view-transitions*/}
-## Переходы между представлениями {/*view-transitions*/}
-
-React View Transitions — это новая экспериментальная функция, которая упрощает добавление анимации к переходам пользовательского интерфейса в вашем приложении. В основе этих анимаций используется новый API [`startViewTransition`](https://developer.mozilla.org/ru/docs/Web/API/Document/startViewTransition), доступный в большинстве современных браузеров.
+Переходы между видами в React — это новая экспериментальная функция, которая упрощает добавление анимаций при переходе между состояниями пользовательского интерфейса в вашем приложении. По сути, эти анимации используют новый API [`startViewTransition`](https://developer.mozilla.org/ru/docs/Web/API/Document/startViewTransition), доступный в большинстве современных браузеров.
Чтобы включить анимацию элемента, оберните его в новый компонент ``:
```js
-// "что" анимировать.
+// "Что" анимировать.
-
анимировать меня
+
Анимируй меня
```
-Этот новый компонент позволяет декларативно определять «что» анимировать при активации анимации.
+Этот новый компонент позволяет декларативно определить, "что" будет анимировано при активации анимации.
-Вы можете определить «когда» анимировать, используя один из этих трех триггеров для View Transition:
+Вы можете определить, "когда" анимировать, используя один из следующих трех триггеров для перехода между видами:
```js
-// "когда" анимировать.
+// "Когда" анимировать.
// Переходы
startTransition(() => setState(...));
@@ -87,10 +89,10 @@ const deferred = useDeferredValue(value);
```
-По умолчанию эти анимации используют [CSS-анимации по умолчанию для View Transitions](https://developer.mozilla.org/ru/docs/Web/API/View_Transition_API/Using#customizing_your_animations) (обычно плавное перекрестное затухание). Вы можете использовать [псевдоселекторы перехода между представлениями](https://developer.mozilla.org/ru/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree), чтобы определить «как» запускается анимация. Например, вы можете использовать `*`, чтобы изменить анимацию по умолчанию для всех переходов:
+По умолчанию эти анимации используют [CSS-анимации по умолчанию для переходов между видами](https://developer.mozilla.org/ru/docs/Web/API/View_Transition_API/Using#customizing_your_animations) (обычно плавное перекрестное затухание). Вы можете использовать [псевдоселекторы переходов между видами](https://developer.mozilla.org/ru/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree), чтобы определить, "как" будет выполняться анимация. Например, вы можете использовать `*`, чтобы изменить анимацию по умолчанию для всех переходов:
```
-// "как" анимировать.
+// "Как" анимировать.
::view-transition-old(*) {
animation: 300ms ease-out fade-out;
}
@@ -99,16 +101,16 @@ const deferred = useDeferredValue(value);
}
```
-Когда DOM обновляется из-за триггера анимации, например `startTransition`, `useDeferredValue` или переключение резервного варианта `Suspense` на контент, React будет использовать [декларативную эвристику](/reference/react/ViewTransition#viewtransition), чтобы автоматически определить, какие компоненты `` активировать для анимации. Затем браузер запустит анимацию, определенную в CSS.
+Когда DOM обновляется из-за триггера анимации — например, `startTransition`, `useDeferredValue` или переключение резервного варианта `Suspense` на контент — React будет использовать [декларативные эвристики](/reference/react/ViewTransition#viewtransition), чтобы автоматически определить, какие компоненты `` следует активировать для анимации. Затем браузер выполнит анимацию, определенную в CSS.
-Если вы знакомы с API View Transition браузера и хотите узнать, как React его поддерживает, ознакомьтесь с разделом [Как работает ``](/reference/react/ViewTransition#how-does-viewtransition-work) в документации.
+Если вы знакомы с API переходов между видами в браузере и хотите узнать, как React его поддерживает, ознакомьтесь с разделом [Как работает ``](/reference/react/ViewTransition#how-does-viewtransition-work) в документации.
-В этой статье давайте рассмотрим несколько примеров использования View Transitions.
+В этой статье мы рассмотрим несколько примеров использования переходов между видами.
-Начнем с этого приложения, которое не анимирует ни одно из следующих взаимодействий:
-- Нажмите на видео, чтобы просмотреть подробности.
-- Нажмите «назад», чтобы вернуться к ленте.
-- Введите в списке, чтобы отфильтровать видео.
+Мы начнем с этого приложения, которое не анимирует ни одно из следующих взаимодействий:
+- Нажмите на видео, чтобы просмотреть детали.
+- Нажмите "назад", чтобы вернуться к ленте.
+- Введите текст в списке, чтобы отфильтровать видео.
@@ -118,7 +120,7 @@ import TalkDetails from './Details'; import Home from './Home'; import {useRoute
export default function App() {
const {url} = useRouter();
- // 🚩Эта версия пока не включает никаких анимаций
+ // 🚩Эта версия еще не включает никаких анимаций
return url === '/' ? : ;
}
```
@@ -249,6 +251,7 @@ export default function Home() {
);
}
+
```
```js src/Icons.js
@@ -344,7 +347,7 @@ export function Heart({liked, animate}) {
)}
@@ -395,8 +398,8 @@ export default function Page({ heading, children }) {
import {useState} from 'react';
import {Heart} from './Icons';
-// A hack since we don't actually have a backend.
-// Unlike local state, this survives videos being filtered.
+// Хак, так как у нас нет реального бэкенда.
+// В отличие от локального состояния, это сохраняется при фильтрации видео.
const likedVideos = new Set();
export default function LikeButton({video}) {
@@ -405,7 +408,7 @@ export default function LikeButton({video}) {
return (
- {/* Opt-out of ViewTransition for the content. */}
- {/* Content can define it's own ViewTransition. */}
-
-
-
{children}
-
-
-
- );
-}
-```
-
-```js src/LikeButton.js hidden
-import {useState} from 'react';
-import {Heart} from './Icons';
-
-// A hack since we don't actually have a backend.
-// Unlike local state, this survives videos being filtered.
-const likedVideos = new Set();
-
-export default function LikeButton({video}) {
- const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
- const [animate, setAnimate] = useState(false);
- return (
-
- );
-}
-```
-
-```js src/Videos.js active
-import { useState, unstable_ViewTransition as ViewTransition } from "react"; import LikeButton from "./LikeButton"; import { useRouter } from "./router"; import { PauseIcon, PlayIcon } from "./Icons"; import { startTransition } from "react";
-
-export function Thumbnail({ video, children }) {
- // Add a name to animate with a shared element transition.
- // This uses the default animation, no additional css needed.
- return (
-
-
- {/* Custom classes based on transition type. */}
-
- {heading}
-
- {isPending && }
-
-
- {/* Opt-out of ViewTransition for the content. */}
- {/* Content can define it's own ViewTransition. */}
-
-
-
{children}
-
-
-
- );
-}
-```
-
-```js src/LikeButton.js hidden
-import {useState} from 'react';
-import {Heart} from './Icons';
-
-// A hack since we don't actually have a backend.
-// Unlike local state, this survives videos being filtered.
-const likedVideos = new Set();
-
-export default function LikeButton({video}) {
- const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
- const [animate, setAnimate] = useState(false);
- return (
-
- );
-}
-```
-
-```js src/Videos.js hidden
-import { useState, unstable_ViewTransition as ViewTransition } from "react";
-import LikeButton from "./LikeButton";
-import { useRouter } from "./router";
-import { PauseIcon, PlayIcon } from "./Icons";
-import { startTransition } from "react";
-
-export function Thumbnail({ video, children }) {
- // Add a name to animate with a shared element transition.
- // This uses the default animation, no additional css needed.
- return (
-
-
- {/* Opt-out of ViewTransition for the content. */}
- {/* Content can define it's own ViewTransition. */}
-
-
-
{children}
-
-
-
- );
-}
-```
-
-```js src/LikeButton.js hidden
-import {useState} from 'react';
-import {Heart} from './Icons';
-
-// A hack since we don't actually have a backend.
-// Unlike local state, this survives videos being filtered.
-const likedVideos = new Set();
-
-export default function LikeButton({video}) {
- const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
- const [animate, setAnimate] = useState(false);
- return (
-
- );
-}
-```
-
-```js src/Videos.js active
-import { useState, unstable_ViewTransition as ViewTransition } from "react"; import LikeButton from "./LikeButton"; import { useRouter } from "./router"; import { PauseIcon, PlayIcon } from "./Icons"; import { startTransition } from "react";
-
-export function Thumbnail({ video, children }) {
- // Add a name to animate with a shared element transition.
- // This uses the default animation, no additional css needed.
- return (
-
-
- {/* Custom classes based on transition type. */}
-
- {heading}
-
- {isPending && }
-
-
- {/* Opt-out of ViewTransition for the content. */}
- {/* Content can define it's own ViewTransition. */}
-
-
-
{children}
-
-
-
- );
-}
-```
-
-```js src/LikeButton.js hidden
-import {useState} from 'react';
-import {Heart} from './Icons';
-
-// A hack since we don't actually have a backend.
-// Unlike local state, this survives videos being filtered.
-const likedVideos = new Set();
-
-export default function LikeButton({video}) {
- const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
- const [animate, setAnimate] = useState(false);
- return (
-
- );
-}
-```
-
-```js src/Videos.js hidden
-import { useState, unstable_ViewTransition as ViewTransition } from "react";
-import LikeButton from "./LikeButton";
-import { useRouter } from "./router";
-import { PauseIcon, PlayIcon } from "./Icons";
-import { startTransition } from "react";
-
-export function Thumbnail({ video, children }) {
- // Add a name to animate with a shared element transition.
- // This uses the default animation, no additional css needed.
- return (
-
-
-
- );
-}
-
-```
-
-```js src/Icons.js hidden
-export function ChevronLeft() {
- return (
-
-
-If you're curious to know more about how they work, check out [How Does `` Work](/reference/react/ViewTransition#how-does-viewtransition-work) in the docs.
-
-_For more background on how we built View Transitions, see: [#31975](https://github.com/facebook/react/pull/31975), [#32105](https://github.com/facebook/react/pull/32105), [#32041](https://github.com/facebook/react/pull/32041), [#32734](https://github.com/facebook/react/pull/32734), [#32797](https://github.com/facebook/react/pull/32797) [#31999](https://github.com/facebook/react/pull/31999), [#32031](https://github.com/facebook/react/pull/32031), [#32050](https://github.com/facebook/react/pull/32050), [#32820](https://github.com/facebook/react/pull/32820), [#32029](https://github.com/facebook/react/pull/32029), [#32028](https://github.com/facebook/react/pull/32028), and [#32038](https://github.com/facebook/react/pull/32038) by [@sebmarkbage](https://twitter.com/sebmarkbage) (thanks Seb!)._
-
----
-
-## Activity {/*activity*/}
-
-In [past](/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022#offscreen) [updates](/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024#offscreen-renamed-to-activity), we shared that we were researching an API to allow components to be visually hidden and deprioritized, preserving UI state with reduced performance costs relative to unmounting or hiding with CSS.
-
-We're now ready to share the API and how it works, so you can start testing it in experimental React versions.
-
-`` is a new component to hide and show parts of the UI:
-
-```js [[1, 1, "'visible'"], [2, 1, "'hidden'"]]
-
-
-
-```
-
-When an Activity is visible it's rendered as normal. When an Activity is hidden it is unmounted, but will save its state and continue to render at a lower priority than anything visible on screen.
-
-You can use `Activity` to save state for parts of the UI the user isn't using, or pre-render parts that a user is likely to use next.
-
-Let's look at some examples improving the View Transition examples above.
-
-
-
-**Effects don’t mount when an Activity is hidden.**
-
-When an `` is `hidden`, Effects are unmounted. Conceptually, the component is unmounted, but React saves the state for later.
-
-In practice, this works as expected if you have followed the [You Might Not Need an Effect](/learn/you-might-not-need-an-effect) guide. To eagerly find problematic Effects, we recommend adding [``](/reference/react/StrictMode) which will eagerly perform Activity unmounts and mounts to catch any unexpected side effects.
-
-
-
-### Restoring state with Activity {/*restoring-state-with-activity*/}
-
-When a user navigates away from a page, it's common to stop rendering the old page:
-
-```js {6,7}
-function App() {
- const { url } = useRouter();
-
- return (
- <>
- {url === '/' && }
- {url !== '/' && }
-
- );
-}
-```
-
-However, this means if the user goes back to the old page, all of the previous state is lost. For example, if the `` page has an `` field, when the user leaves the page the `` is unmounted, and all of the text they had typed is lost.
-
-Activity allows you to keep the state around as the user changes pages, so when they come back they can resume where they left off. This is done by wrapping part of the tree in `` and toggling the `mode`:
-
-```js {6-8}
-function App() {
- const { url } = useRouter();
-
- return (
- <>
-
-
-
- {url !== '/' && }
-
- );
-}
-```
-
-With this change, we can improve on our View Transitions example above. Before, when you searched for a video, selected one, and returned, your search filter was lost. With Activity, your search filter is restored and you can pick up where you left off.
-
-Try searching for a video, selecting it, and clicking "back":
-
-
-
-```js src/App.js
-import { unstable_ViewTransition as ViewTransition, unstable_Activity as Activity } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router";
-
-export default function App() {
- const { url } = useRouter();
-
- return (
- // View Transitions know about Activity
-
- {/* Render Home in Activity so we don't lose state */}
-
-
-
- {url !== '/' && }
-
- );
-}
-```
-
-```js src/Details.js hidden
-import { use, Suspense, unstable_ViewTransition as ViewTransition } from "react";
-import { fetchVideo, fetchVideoDetails } from "./data";
-import { Thumbnail, VideoControls } from "./Videos";
-import { useRouter } from "./router";
-import Layout from "./Layout";
-import { ChevronLeft } from "./Icons";
-
-function VideoDetails({id}) {
- // Animate from Suspense fallback to content
- return (
-
-
-
- }
- >
- {/* Animate the content up */}
-
-
-
-
- );
-}
-
-function VideoInfoFallback() {
- return (
- <>
-
-
-
- );
-}
-
-export default function Details() {
- const { url, navigateBack } = useRouter();
- const videoId = url.split("/").pop();
- const video = use(fetchVideo(videoId));
-
- return (
- {
- navigateBack("/");
- }}
- >
- Back
-
- }
- >
-
+
+ );
+}
+
```
```js src/Icons.js hidden
@@ -12178,7 +948,7 @@ export function Heart({liked, animate}) {
)}
@@ -12203,29 +973,22 @@ export function IconSearch(props) {
}
```
-```js src/Layout.js hidden
+```js src/Layout.js
import {unstable_ViewTransition as ViewTransition} from 'react'; import { useIsNavPending } from "./router";
export default function Page({ heading, children }) {
const isPending = useIsNavPending();
+
return (
- {/* Custom classes based on transition type. */}
-
- {heading}
-
+ {heading}
{isPending && }
- {/* Opt-out of ViewTransition for the content. */}
- {/* Content can define it's own ViewTransition. */}
+ {/* Отключить ViewTransition для контента. */}
+ {/* Контент может определять свой собственный ViewTransition. */}
{children}
@@ -12240,8 +1003,8 @@ export default function Page({ heading, children }) {
import {useState} from 'react';
import {Heart} from './Icons';
-// A hack since we don't actually have a backend.
-// Unlike local state, this survives videos being filtered.
+// Хак, так как у нас нет реального бэкенда.
+// В отличие от локального состояния, это переживает фильтрацию видео.
const likedVideos = new Set();
export default function LikeButton({video}) {
@@ -12250,7 +1013,7 @@ export default function LikeButton({video}) {
return (
- 
- 
- 
- 
- {children}
-