animate me

\n\n"}]}],"\n",["$r","p",null,{"children":"这个新组件让你可以以声明式方式定义在动画被激活时要动画的“什么”。"}],"\n",["$r","p",null,{"children":"你可以通过使用以下三种触发器之一来定义 View Transition 的“何时”动画："}],"\n",["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","children":"// 何时动画。\n\n// Transitions\nstartTransition(() => setState(...));\n\n// Deferred Values\nconst deferred = useDeferredValue(value);\n\n// Suspense\n}>\n

\n\n"}]}],"\n",["$r","p",null,{"children":["默认情况下，这些动画会使用应用于 ",["$r","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#customizing_your_animations","target":"_blank","rel":"nofollow noopener noreferrer","children":"View Transitions 的默认 CSS 动画"}],"（通常是平滑的交叉淡入淡出）。你可以使用 ",["$r","a",null,{"href":"https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using#the_view_transition_pseudo-element_tree","target":"_blank","rel":"nofollow noopener noreferrer","children":"view transition 伪选择器"}]," 来定义动画“如何”运行。例如，你可以使用 ",["$r","code",null,{"children":"*"}]," 来修改所有过渡的默认动画："]}],"\n",["$r","pre",null,{"children":["$r","code",null,{"children":"// 何如动画。\n::view-transition-old(*) {\n animation: 300ms ease-out fade-out;\n}\n::view-transition-new(*) {\n animation: 300ms ease-in fade-in;\n}\n"}]}],"\n",["$r","p",null,{"children":["当由于某个动画触发器——例如 ",["$r","code",null,{"children":"startTransition"}],"、",["$r","code",null,{"children":"useDeferredValue"}],"，或者 ",["$r","code",null,{"children":"Suspense"}]," 的 fallback 切换到内容——导致 DOM 更新时，React 会使用 ",["$r","a",null,{"href":"/reference/react/ViewTransition#viewtransition","children":"声明式启发式规则"}]," 自动判断哪些 ",["$r","code",null,{"children":""}]," 组件需要激活动画。然后浏览器会运行 CSS 中定义的动画。"]}],"\n",["$r","p",null,{"children":["如果你熟悉浏览器的 View Transition API，并想了解 React 如何支持它，请查看文档中的 ",["$r","a",null,{"href":"/reference/react/ViewTransition#how-does-viewtransition-work","children":[["$r","code",null,{"children":""}]," 如何工作"]}],"。"]}],"\n",["$r","p",null,{"children":"在这篇文章中，让我们看几个如何使用 View Transitions 的示例。"}],"\n",["$r","p",null,{"children":"我们先从这个应用开始，它目前不会为以下任何交互添加动画："}],"\n",["$r","ul",null,{"children":["\n",["$r","li",null,{"children":"点击一个视频查看详情。"}],"\n",["$r","li",null,{"children":"点击“back”返回信息流。"}],"\n",["$r","li",null,{"children":"在列表中输入以过滤视频。"}],"\n"]}],"\n"]}],["$r","Sandpack",null,{"children":[["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/App.js active","children":"import TalkDetails from './Details'; import Home from './Home'; import {useRouter} from './router';\n\nexport default function App() {\n const {url} = useRouter();\n\n // 🚩此版本还没有包含任何动画\n return url === '/' ? : ;\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/Details.js","children":"import { fetchVideo, fetchVideoDetails } from \"./data\";\nimport { Thumbnail, VideoControls } from \"./Videos\";\nimport { useRouter } from \"./router\";\nimport Layout from \"./Layout\";\nimport { use, Suspense } from \"react\";\nimport { ChevronLeft } from \"./Icons\";\n\nfunction VideoInfo({ id }) {\n const details = use(fetchVideoDetails(id));\n return (\n <>\n

{details.title}

{details.description}

\n \n );\n}\n\nfunction VideoInfoFallback() {\n return (\n <>\n

\n \n );\n}\n\nexport default function Details() {\n const { url, navigateBack } = useRouter();\n const videoId = url.split(\"/\").pop();\n const video = use(fetchVideo(videoId));\n\n return (\n {\n navigateBack(\"/\");\n }}\n >\n 返回\n \n }\n >\n

\n \n \n \n }>\n \n \n

\n \n );\n}\n\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/Home.js","children":"import { Video } from \"./Videos\";\nimport Layout from \"./Layout\";\nimport { fetchVideos } from \"./data\";\nimport { useId, useState, use } from \"react\";\nimport { IconSearch } from \"./Icons\";\n\nfunction SearchInput({ value, onChange }) {\n const id = useId();\n return (\n \n );\n}\n\nfunction filterVideos(videos, query) {\n const keywords = query\n .toLowerCase()\n .split(\" \")\n .filter((s) => s !== \"\");\n if (keywords.length === 0) {\n return videos;\n }\n return videos.filter((video) => {\n const words = (video.title + \" \" + video.description)\n .toLowerCase()\n .split(\" \");\n return keywords.every((kw) => words.some((w) => w.includes(kw)));\n });\n}\n\nexport default function Home() {\n const videos = use(fetchVideos());\n const count = videos.length;\n const [searchText, setSearchText] = useState(\"\");\n const foundVideos = filterVideos(videos, searchText);\n return (\n {count} 个视频}>\n \n

\n {foundVideos.length === 0 && (\n

无结果

\n )}\n

\n {foundVideos.map((video) => (\n

\n \n );\n}\n\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/Icons.js","children":"export function ChevronLeft() {\n return (\n \n \n \n \n \n \n );\n}\n\nexport function PauseIcon() {\n return (\n \n \n \n );\n}\n\nexport function PlayIcon() {\n return (\n \n \n \n );\n}\nexport function Heart({liked, animate}) {\n return (\n <>\n \n \n \n\n \n {liked ? (\n \n ) : (\n \n )}\n \n \n );\n}\n\nexport function IconSearch(props) {\n return (\n \n );\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/Layout.js","children":"import {ViewTransition} from 'react'; import { useIsNavPending } from \"./router\";\n\nexport default function Page({ heading, children }) {\n const isPending = useIsNavPending();\n\n return (\n

\n {heading}\n {isPending && }\n

\n {/* 对内容禁用 ViewTransition。 */}\n {/* 内容可以定义自己的 ViewTransition。 */}\n \n

{children}

\n \n

\n );\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/LikeButton.js hidden","children":"import {useState} from 'react';\nimport {Heart} from './Icons';\n\n// 由于我们实际上没有后端，这是一个变通方案。\n// 与本地状态不同，它可以在视频被过滤后仍然保留。\nconst likedVideos = new Set();\n\nexport default function LikeButton({video}) {\n const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));\n const [animate, setAnimate] = useState(false);\n return (\n {\n const nextIsLiked = !isLiked;\n if (nextIsLiked) {\n likedVideos.add(video.id);\n } else {\n likedVideos.delete(video.id);\n }\n setAnimate(true);\n setIsLiked(nextIsLiked);\n }}>\n \n \n );\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/Videos.js hidden","children":"import { useState } from \"react\";\nimport LikeButton from \"./LikeButton\";\nimport { useRouter } from \"./router\";\nimport { PauseIcon, PlayIcon } from \"./Icons\";\nimport { startTransition } from \"react\";\n\nexport function VideoControls() {\n const [isPlaying, setIsPlaying] = useState(false);\n\n return (\n \n startTransition(() => {\n setIsPlaying((p) => !p);\n })\n }\n >\n {isPlaying ? : }\n \n );\n}\n\nexport function Thumbnail({ video, children }) {\n return (\n \n {children}\n \n );\n}\n\nexport function Video({ video }) {\n const { navigate } = useRouter();\n\n return (\n

\n {\n e.preventDefault();\n navigate(`/video/${video.id}`);\n }}\n >\n \n\n

{video.title}

{video.description}

}\n \n );\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/Details.js hidden","children":"import { fetchVideo, fetchVideoDetails } from \"./data\";\nimport { Thumbnail, VideoControls } from \"./Videos\";\nimport { useRouter } from \"./router\";\nimport Layout from \"./Layout\";\nimport { use, Suspense } from \"react\";\nimport { ChevronLeft } from \"./Icons\";\n\nfunction VideoInfo({ id }) {\n const details = use(fetchVideoDetails(id));\n return (\n <>\n

{details.title}

{details.description}

\n \n );\n}\n\nfunction VideoInfoFallback() {\n return (\n <>\n

\n \n \n \n }>\n \n \n

\n \n );\n}\n\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/Home.js hidden","children":"import { Video } from \"./Videos\";\nimport Layout from \"./Layout\";\nimport { fetchVideos } from \"./data\";\nimport { useId, useState, use } from \"react\";\nimport { IconSearch } from \"./Icons\";\n\nfunction SearchInput({ value, onChange }) {\n const id = useId();\n return (\n \n );\n}\n\nfunction filterVideos(videos, query) {\n const keywords = query\n .toLowerCase()\n .split(\" \")\n .filter((s) => s !== \"\");\n if (keywords.length === 0) {\n return videos;\n }\n return videos.filter((video) => {\n const words = (video.title + \" \" + video.description)\n .toLowerCase()\n .split(\" \");\n return keywords.every((kw) => words.some((w) => w.includes(kw)));\n });\n}\n\nexport default function Home() {\n const videos = use(fetchVideos());\n const count = videos.length;\n const [searchText, setSearchText] = useState(\"\");\n const foundVideos = filterVideos(videos, searchText);\n return (\n {count} 个视频}>\n \n

\n {foundVideos.length === 0 && (\n

无结果

\n )}\n

\n {foundVideos.map((video) => (\n

\n \n );\n}\n\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/Icons.js hidden","children":"export function ChevronLeft() {\n return (\n \n \n \n \n \n \n );\n}\n\nexport function PauseIcon() {\n return (\n \n \n \n );\n}\n\nexport function PlayIcon() {\n return (\n \n \n \n );\n}\nexport function Heart({liked, animate}) {\n return (\n <>\n \n \n \n\n \n {liked ? (\n \n ) : (\n \n )}\n \n \n );\n}\n\nexport function IconSearch(props) {\n return (\n \n );\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/Layout.js","children":"import {ViewTransition} from 'react'; import { useIsNavPending } from \"./router\";\n\nexport default function Page({ heading, children }) {\n const isPending = useIsNavPending();\n\n return (\n

\n {heading}\n {isPending && }\n

\n {/* 对内容禁用 ViewTransition。 */}\n {/* 内容可以定义自己的 ViewTransition。 */}\n \n

{children}

\n \n

\n {\n e.preventDefault();\n navigate(`/video/${video.id}`);\n }}\n >\n \n\n

{video.title}

{video.description}

{details.title}

{details.description}

\n \n );\n}\n\nfunction VideoInfoFallback() {\n return (\n <>\n

\n \n \n \n }>\n \n \n

\n {foundVideos.length === 0 && (\n

No results

\n )}\n

\n {foundVideos.map((video) => (\n

\n \n );\n}\n\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/Icons.js hidden","children":"export function ChevronLeft() {\n return (\n \n \n \n \n \n \n );\n}\n\nexport function PauseIcon() {\n return (\n \n \n \n );\n}\n\nexport function PlayIcon() {\n return (\n \n \n \n );\n}\nexport function Heart({liked, animate}) {\n return (\n <>\n \n \n \n\n \n {liked ? (\n \n ) : (\n \n )}\n \n \n );\n}\n\nexport function IconSearch(props) {\n return (\n \n );\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/Layout.js hidden","children":"import {ViewTransition} from 'react'; import { useIsNavPending } from \"./router\";\n\nexport default function Page({ heading, children }) {\n const isPending = useIsNavPending();\n\n return (\n

\n {heading}\n {isPending && }\n

\n {/* 内容禁用 ViewTransition。 */}\n {/* 内容可以定义自己的 ViewTransition。 */}\n \n

{children}

\n \n

\n );\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/LikeButton.js hidden","children":"import {useState} from 'react';\nimport {Heart} from './Icons';\n\n// 由于我们实际上没有后端，这是一个变通方案。\n// 与本地状态不同，这个状态在视频被筛选时仍会保留。\nconst likedVideos = new Set();\n\nexport default function LikeButton({video}) {\n const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));\n const [animate, setAnimate] = useState(false);\n return (\n {\n const nextIsLiked = !isLiked;\n if (nextIsLiked) {\n likedVideos.add(video.id);\n } else {\n likedVideos.delete(video.id);\n }\n setAnimate(true);\n setIsLiked(nextIsLiked);\n }}>\n \n \n );\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/Videos.js active","children":"import { useState, ViewTransition } from \"react\"; import LikeButton from \"./LikeButton\"; import { useRouter } from \"./router\"; import { PauseIcon, PlayIcon } from \"./Icons\"; import { startTransition } from \"react\";\n\nexport function Thumbnail({ video, children }) {\n // 添加一个名称，以便使用共享元素过渡进行动画。\n // 这会使用默认动画，不需要额外的 css。\n return (\n \n \n {children}\n \n \n );\n}\n\nexport function VideoControls() {\n const [isPlaying, setIsPlaying] = useState(false);\n\n return (\n \n startTransition(() => {\n setIsPlaying((p) => !p);\n })\n }\n >\n {isPlaying ? : }\n \n );\n}\n\nexport function Video({ video }) {\n const { navigate } = useRouter();\n\n return (\n

\n {\n e.preventDefault();\n navigate(`/video/${video.id}`);\n }}\n >\n \n\n

{video.title}

{video.description}

{details.title}

{details.description}

\n \n );\n}\n\nfunction VideoInfoFallback() {\n return (\n <>\n

\n \n \n \n }>\n \n \n

\n {foundVideos.length === 0 && (\n

没有结果

\n )}\n

\n {foundVideos.map((video) => (\n

\n \n );\n}\n\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/Icons.js hidden","children":"export function ChevronLeft() {\n return (\n \n \n \n \n \n \n );\n}\n\nexport function PauseIcon() {\n return (\n \n \n \n );\n}\n\nexport function PlayIcon() {\n return (\n \n \n \n );\n}\nexport function Heart({liked, animate}) {\n return (\n <>\n \n \n \n\n \n {liked ? (\n \n ) : (\n \n )}\n \n \n );\n}\n\nexport function IconSearch(props) {\n return (\n \n );\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/Layout.js active","children":"import {ViewTransition} from 'react'; import { useIsNavPending } from \"./router\";\n\nexport default function Page({ heading, children }) {\n const isPending = useIsNavPending();\n return (\n

\n {/* 根据过渡类型使用自定义类。 */}\n \n {heading}\n \n {isPending && }\n

\n {/* 对内容禁用 ViewTransition。 */}\n {/* 内容可以自己定义 ViewTransition。 */}\n \n

{children}

\n \n

\n );\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/LikeButton.js hidden","children":"import {useState} from 'react';\nimport {Heart} from './Icons';\n\n// 一个变通办法，因为我们实际上没有后端。\n// 与本地状态不同，这会在视频被过滤后仍然保留。\nconst likedVideos = new Set();\n\nexport default function LikeButton({video}) {\n const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));\n const [animate, setAnimate] = useState(false);\n return (\n {\n const nextIsLiked = !isLiked;\n if (nextIsLiked) {\n likedVideos.add(video.id);\n } else {\n likedVideos.delete(video.id);\n }\n setAnimate(true);\n setIsLiked(nextIsLiked);\n }}>\n \n \n );\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/Videos.js hidden","children":"import { useState, ViewTransition } from \"react\";\nimport LikeButton from \"./LikeButton\";\nimport { useRouter } from \"./router\";\nimport { PauseIcon, PlayIcon } from \"./Icons\";\nimport { startTransition } from \"react\";\n\nexport function Thumbnail({ video, children }) {\n // 添加一个名称，以便使用共享元素过渡进行动画。\n // 这会使用默认动画，不需要额外的 css。\n return (\n \n \n {children}\n \n \n );\n}\n\nexport function VideoControls() {\n const [isPlaying, setIsPlaying] = useState(false);\n\n return (\n \n startTransition(() => {\n setIsPlaying((p) => !p);\n })\n }\n >\n {isPlaying ? : }\n \n );\n}\n\nexport function Video({ video }) {\n const { navigate } = useRouter();\n\n return (\n

\n {\n e.preventDefault();\n navigate(`/video/${video.id}`);\n }}\n >\n \n\n

{video.title}

{video.description}

{details.title}

{details.description}

\n \n );\n}\n\nfunction VideoInfoFallback() {\n return (\n <>\n

\n \n \n \n }>\n \n \n

\n {foundVideos.length === 0 && (\n

没有结果

\n )}\n

\n {foundVideos.map((video) => (\n

\n \n );\n}\n\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/Icons.js hidden","children":"export function ChevronLeft() {\n return (\n \n \n \n \n \n \n );\n}\n\nexport function PauseIcon() {\n return (\n \n \n \n );\n}\n\nexport function PlayIcon() {\n return (\n \n \n \n );\n}\nexport function Heart({liked, animate}) {\n return (\n <>\n \n \n \n\n \n {liked ? (\n \n ) : (\n \n )}\n \n \n );\n}\n\nexport function IconSearch(props) {\n return (\n \n );\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/Layout.js active","children":"import {ViewTransition} from 'react'; import { useIsNavPending } from \"./router\";\n\nexport default function Page({ heading, children }) {\n const isPending = useIsNavPending();\n return (\n

\n {/* 根据过渡类型使用自定义类。 */}\n \n {heading}\n \n {isPending && }\n

\n {/* 为内容禁用 ViewTransition。 */}\n {/* 内容可以定义自己的 ViewTransition。 */}\n \n

{children}

\n \n

\n );\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/LikeButton.js hidden","children":"import {useState} from 'react';\nimport {Heart} from './Icons';\n\n// 一个变通办法，因为我们实际上没有后端。\n// 不同于本地状态，这会在视频被过滤后仍然保留。\nconst likedVideos = new Set();\n\nexport default function LikeButton({video}) {\n const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));\n const [animate, setAnimate] = useState(false);\n return (\n {\n const nextIsLiked = !isLiked;\n if (nextIsLiked) {\n likedVideos.add(video.id);\n } else {\n likedVideos.delete(video.id);\n }\n setAnimate(true);\n setIsLiked(nextIsLiked);\n }}>\n \n \n );\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/Videos.js hidden","children":"import { useState, ViewTransition } from \"react\";\nimport LikeButton from \"./LikeButton\";\nimport { useRouter } from \"./router\";\nimport { PauseIcon, PlayIcon } from \"./Icons\";\nimport { startTransition } from \"react\";\n\nexport function Thumbnail({ video, children }) {\n // 添加一个名称，以便使用共享元素过渡进行动画。\n // 这会使用默认动画，不需要额外的 css。\n return (\n \n \n {children}\n \n \n );\n}\n\nexport function VideoControls() {\n const [isPlaying, setIsPlaying] = useState(false);\n\n return (\n \n startTransition(() => {\n setIsPlaying((p) => !p);\n })\n }\n >\n {isPlaying ? : }\n \n );\n}\n\nexport function Video({ video }) {\n const { navigate } = useRouter();\n\n return (\n

\n {\n e.preventDefault();\n navigate(`/video/${video.id}`);\n }}\n >\n \n\n

{video.title}

{video.description}

\n \n \n );\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/Home.js hidden","children":"import { Video } from \"./Videos\";\nimport Layout from \"./Layout\";\nimport { fetchVideos } from \"./data\";\nimport { useId, useState, use } from \"react\";\nimport { IconSearch } from \"./Icons\";\n\nfunction SearchInput({ value, onChange }) {\n const id = useId();\n return (\n \n );\n}\n\nfunction filterVideos(videos, query) {\n const keywords = query\n .toLowerCase()\n .split(\" \")\n .filter((s) => s !== \"\");\n if (keywords.length === 0) {\n return videos;\n }\n return videos.filter((video) => {\n const words = (video.title + \" \" + video.description)\n .toLowerCase()\n .split(\" \");\n return keywords.every((kw) => words.some((w) => w.includes(kw)));\n });\n}\n\nexport default function Home() {\n const videos = use(fetchVideos());\n const count = videos.length;\n const [searchText, setSearchText] = useState(\"\");\n const foundVideos = filterVideos(videos, searchText);\n return (\n {count} 个视频}>\n \n

\n {foundVideos.length === 0 && (\n

没有结果

\n )}\n

\n {foundVideos.map((video) => (\n

\n \n );\n}\n\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/Icons.js hidden","children":"export function ChevronLeft() {\n return (\n \n \n \n \n \n \n );\n}\n\nexport function PauseIcon() {\n return (\n \n \n \n );\n}\n\nexport function PlayIcon() {\n return (\n \n \n \n );\n}\nexport function Heart({liked, animate}) {\n return (\n <>\n \n \n \n\n \n {liked ? (\n \n ) : (\n \n )}\n \n \n );\n}\n\nexport function IconSearch(props) {\n return (\n \n );\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/Layout.js hidden","children":"import {ViewTransition} from 'react';\nimport { useIsNavPending } from \"./router\";\n\nexport default function Page({ heading, children }) {\n const isPending = useIsNavPending();\n return (\n

\n {/* 基于过渡类型的自定义类。 */}\n \n {heading}\n \n {isPending && }\n

\n {/* 内容不使用 ViewTransition。 */}\n {/* 内容可以定义自己的 ViewTransition。 */}\n \n

{children}

\n \n

\n );\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/LikeButton.js hidden","children":"import {useState} from 'react';\nimport {Heart} from './Icons';\n\n// 由于我们实际上没有后端，这是一个变通办法。\n// 与本地状态不同，即使视频被筛选掉，它也能保留。\nconst likedVideos = new Set();\n\nexport default function LikeButton({video}) {\n const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));\n const [animate, setAnimate] = useState(false);\n return (\n {\n const nextIsLiked = !isLiked;\n if (nextIsLiked) {\n likedVideos.add(video.id);\n } else {\n likedVideos.delete(video.id);\n }\n setAnimate(true);\n setIsLiked(nextIsLiked);\n }}>\n \n \n );\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/Videos.js hidden","children":"import { useState, ViewTransition } from \"react\";\nimport LikeButton from \"./LikeButton\";\nimport { useRouter } from \"./router\";\nimport { PauseIcon, PlayIcon } from \"./Icons\";\nimport { startTransition } from \"react\";\n\nexport function Thumbnail({ video, children }) {\n // 添加名称，以便使用共享元素过渡进行动画。\n // 这使用默认动画，不需要额外的 css。\n return (\n \n \n {children}\n \n \n );\n}\n\nexport function VideoControls() {\n const [isPlaying, setIsPlaying] = useState(false);\n\n return (\n \n startTransition(() => {\n setIsPlaying((p) => !p);\n })\n }\n >\n {isPlaying ? : }\n \n );\n}\n\nexport function Video({ video }) {\n const { navigate } = useRouter();\n\n return (\n

\n {\n e.preventDefault();\n navigate(`/video/${video.id}`);\n }}\n >\n \n\n

{video.title}

{video.description}

\n {filteredVideos.map((video) => (\n \n

\n ))}\n

\n"}]}],"\n",["$r","p",null,{"children":["要激活 ViewTransition，我们可以使用 ",["$r","code",null,{"children":"useDeferredValue"}],"："]}],"\n",["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"{2}","children":"const [searchText, setSearchText] = useState('');\nconst deferredSearchText = useDeferredValue(searchText);\nconst filteredVideos = filterVideos(videos, deferredSearchText);\n"}]}],"\n",["$r","p",null,{"children":"现在，当你在搜索栏中输入时，项目会播放动画："}],"\n"]}],["$r","Sandpack",null,{"children":[["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/App.js hidden","children":"import { ViewTransition } from \"react\";\nimport Details from \"./Details\";\nimport Home from \"./Home\";\nimport { useRouter } from \"./router\";\n\nexport default function App() {\n const { url } = useRouter();\n\n // 默认慢速淡入淡出动画。\n return (\n \n {url === \"/\" ? :

}\n \n );\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/Details.js hidden","children":"import { use, Suspense, ViewTransition } from \"react\";\nimport { fetchVideo, fetchVideoDetails } from \"./data\";\nimport { Thumbnail, VideoControls } from \"./Videos\";\nimport { useRouter } from \"./router\";\nimport Layout from \"./Layout\";\nimport { ChevronLeft } from \"./Icons\";\n\nfunction VideoDetails({id}) {\n // 从 Suspense 回退内容过渡到实际内容\n return (\n \n \n \n }\n >\n {/* 将内容向上动画 */}\n \n \n \n \n );\n}\n\nfunction VideoInfoFallback() {\n return (\n <>\n

\n \n \n \n \n

\n \n );\n}\n\nfunction VideoInfo({ id }) {\n const details = use(fetchVideoDetails(id));\n return (\n <>\n

{details.title}

{details.description}

\n \n );\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/Home.js","children":"import { useId, useState, use, useDeferredValue, ViewTransition } from \"react\";import { Video } from \"./Videos\";import Layout from \"./Layout\";import { fetchVideos } from \"./data\";import { IconSearch } from \"./Icons\";\n\nfunction SearchList({searchText, videos}) {\n // 使用 useDeferredValue 激活（“何时”）\n const deferredSearchText = useDeferredValue(searchText);\n const filteredVideos = filterVideos(videos, deferredSearchText);\n return (\n

\n {filteredVideos.map((video) => (\n // 为列表中的每一项添加动画（“什么”）\n \n

\n ))}\n

\n {filteredVideos.length === 0 && (\n

没有结果

\n )}\n

\n );\n}\n\nexport default function Home() {\n const videos = use(fetchVideos());\n const count = videos.length;\n const [searchText, setSearchText] = useState('');\n\n return (\n {count} 个视频}>\n \n \n \n );\n}\n\nfunction SearchInput({ value, onChange }) {\n const id = useId();\n return (\n \n );\n}\n\nfunction filterVideos(videos, query) {\n const keywords = query\n .toLowerCase()\n .split(\" \")\n .filter((s) => s !== \"\");\n if (keywords.length === 0) {\n return videos;\n }\n return videos.filter((video) => {\n const words = (video.title + \" \" + video.description)\n .toLowerCase()\n .split(\" \");\n return keywords.every((kw) => words.some((w) => w.includes(kw)));\n });\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/Icons.js hidden","children":"export function ChevronLeft() {\n return (\n \n \n \n \n \n \n );\n}\n\nexport function PauseIcon() {\n return (\n \n \n \n );\n}\n\nexport function PlayIcon() {\n return (\n \n \n \n );\n}\nexport function Heart({liked, animate}) {\n return (\n <>\n \n \n \n\n \n {liked ? (\n \n ) : (\n \n )}\n \n \n );\n}\n\nexport function IconSearch(props) {\n return (\n \n );\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/Layout.js","children":"import {ViewTransition} from 'react'; import { useIsNavPending } from \"./router\";\n\nexport default function Page({ heading, children }) {\n const isPending = useIsNavPending();\n return (\n

\n {/* 根据过渡类型使用自定义类。 */}\n \n {heading}\n \n {isPending && }\n

\n {/* 为内容禁用 ViewTransition。 */}\n {/* 内容可以定义自己的 ViewTransition。 */}\n \n

{children}

\n \n

\n );\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/LikeButton.js hidden","children":"import {useState} from 'react';\nimport {Heart} from './Icons';\n\n// 这是一个变通办法，因为我们实际上没有后端。\n// 与本地状态不同，这种方式在视频被筛选时仍然会保留。\nconst likedVideos = new Set();\n\nexport default function LikeButton({video}) {\n const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));\n const [animate, setAnimate] = useState(false);\n return (\n {\n const nextIsLiked = !isLiked;\n if (nextIsLiked) {\n likedVideos.add(video.id);\n } else {\n likedVideos.delete(video.id);\n }\n setAnimate(true);\n setIsLiked(nextIsLiked);\n }}>\n \n \n );\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/Videos.js","children":"import { useState, ViewTransition } from \"react\"; import LikeButton from \"./LikeButton\"; import { useRouter } from \"./router\"; import { PauseIcon, PlayIcon } from \"./Icons\"; import { startTransition } from \"react\";\n\nexport function Thumbnail({ video, children }) {\n // 添加名称以使用共享元素过渡进行动画。\n return (\n \n \n {children}\n \n \n );\n}\n\n\n\nexport function VideoControls() {\n const [isPlaying, setIsPlaying] = useState(false);\n\n return (\n \n startTransition(() => {\n setIsPlaying((p) => !p);\n })\n }\n >\n {isPlaying ? : }\n \n );\n}\n\nexport function Video({ video }) {\n const { navigate } = useRouter();\n\n return (\n

\n {\n e.preventDefault();\n navigate(`/video/${video.id}`);\n }}\n >\n \n\n

{video.title}

{video.description}

}\n \n );\n}\n"}]}],"\n",["$r","p",null,{"children":["然而，这意味着如果用户返回旧页面，之前的所有状态都会丢失。例如，如果 ",["$r","code",null,{"children":""}]," 页面有一个 ",["$r","code",null,{"children":""}]," 输入框，那么当用户离开页面时，这个 ",["$r","code",null,{"children":""}]," 会被卸载，用户已经输入的所有文本也会丢失。"]}],"\n",["$r","p",null,{"children":["Activity 允许你在用户切换页面时保留这些状态，这样当他们 ফিরে लौट回时就可以从离开的地方继续。做法是把树的一部分包裹在 ",["$r","code",null,{"children":""}]," 中，并切换 ",["$r","code",null,{"children":"mode"}],"："]}],"\n",["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"{6-8}","children":"function App() {\n const { url } = useRouter();\n\n return (\n <>\n \n \n \n {url !== '/' &&

}\n \n );\n}\n"}]}],"\n",["$r","p",null,{"children":"有了这个改动，我们可以进一步改进上面的 View Transitions 示例。之前，当你搜索某个视频、选择其中一个、然后返回时，你的搜索过滤条件会丢失。使用 Activity 后，搜索过滤条件会被恢复，你可以从上次中断的地方继续。"}],"\n",["$r","p",null,{"children":"试着搜索一个视频，选中它，然后点击“back”："}],"\n"]}],["$r","Sandpack",null,{"children":[["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/App.js","children":"import { Activity, ViewTransition } from \"react\"; import Details from \"./Details\"; import Home from \"./Home\"; import { useRouter } from \"./router\";\n\nexport default function App() {\n const { url } = useRouter();\n\n return (\n // View Transitions 知道 Activity 的存在\n \n {/* 在 Activity 中渲染 Home，这样我们就不会丢失状态 */}\n \n \n \n {url !== '/' &&

}\n \n );\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/Details.js hidden","children":"import { use, Suspense, ViewTransition } from \"react\";\nimport { fetchVideo, fetchVideoDetails } from \"./data\";\nimport { Thumbnail, VideoControls } from \"./Videos\";\nimport { useRouter } from \"./router\";\nimport Layout from \"./Layout\";\nimport { ChevronLeft } from \"./Icons\";\n\nfunction VideoDetails({id}) {\n // 从 Suspense 的 fallback 动画切换到内容\n return (\n \n \n \n }\n >\n {/* 将内容向上滑入 */}\n \n \n \n \n );\n}\n\nfunction VideoInfoFallback() {\n return (\n <>\n

\n \n \n \n \n

\n \n );\n}\n\nfunction VideoInfo({ id }) {\n const details = use(fetchVideoDetails(id));\n return (\n <>\n

{details.title}

{details.description}

\n \n );\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/Home.js hidden","children":"import { useId, useState, use, useDeferredValue, ViewTransition } from \"react\";import { Video } from \"./Videos\";import Layout from \"./Layout\";import { fetchVideos } from \"./data\";import { IconSearch } from \"./Icons\";\n\nfunction SearchList({searchText, videos}) {\n // 使用 useDeferredValue 激活（“when”）\n const deferredSearchText = useDeferredValue(searchText);\n const filteredVideos = filterVideos(videos, deferredSearchText);\n return (\n

\n {filteredVideos.length === 0 && (\n

没有结果

\n )}\n

\n {filteredVideos.map((video) => (\n // 为列表中的每一项添加动画（“what”）\n \n

\n ))}\n

\n );\n}\n\nexport default function Home() {\n const videos = use(fetchVideos());\n const count = videos.length;\n const [searchText, setSearchText] = useState('');\n\n return (\n {count} 个视频}>\n \n \n \n );\n}\n\nfunction SearchInput({ value, onChange }) {\n const id = useId();\n return (\n \n );\n}\n\nfunction filterVideos(videos, query) {\n const keywords = query\n .toLowerCase()\n .split(\" \")\n .filter((s) => s !== \"\");\n if (keywords.length === 0) {\n return videos;\n }\n return videos.filter((video) => {\n const words = (video.title + \" \" + video.description)\n .toLowerCase()\n .split(\" \");\n return keywords.every((kw) => words.some((w) => w.includes(kw)));\n });\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/Icons.js hidden","children":"export function ChevronLeft() {\n return (\n \n \n \n \n \n \n );\n}\n\nexport function PauseIcon() {\n return (\n \n \n \n );\n}\n\nexport function PlayIcon() {\n return (\n \n \n \n );\n}\nexport function Heart({liked, animate}) {\n return (\n <>\n \n \n \n\n \n {liked ? (\n \n ) : (\n \n )}\n \n \n );\n}\n\nexport function IconSearch(props) {\n return (\n \n );\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/Layout.js hidden","children":"import {ViewTransition} from 'react'; import { useIsNavPending } from \"./router\";\n\nexport default function Page({ heading, children }) {\n const isPending = useIsNavPending();\n return (\n

\n {/* 基于过渡类型的自定义类。 */}\n \n {heading}\n \n {isPending && }\n

\n {/* 对内容禁用 ViewTransition。 */}\n {/* 内容可以定义自己的 ViewTransition。 */}\n \n

{children}

\n \n

\n );\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/LikeButton.js hidden","children":"import {useState} from 'react';\nimport {Heart} from './Icons';\n\n// 这是一个技巧，因为我们实际上没有后端。\n// 不同于本地状态，它可以在视频被筛选后依然保留。\nconst likedVideos = new Set();\n\nexport default function LikeButton({video}) {\n const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));\n const [animate, setAnimate] = useState(false);\n return (\n {\n const nextIsLiked = !isLiked;\n if (nextIsLiked) {\n likedVideos.add(video.id);\n } else {\n likedVideos.delete(video.id);\n }\n setAnimate(true);\n setIsLiked(nextIsLiked);\n }}>\n \n \n );\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/Videos.js hidden","children":"import { useState, ViewTransition } from \"react\";\nimport LikeButton from \"./LikeButton\";\nimport { useRouter } from \"./router\";\nimport { PauseIcon, PlayIcon } from \"./Icons\";\nimport { startTransition } from \"react\";\n\nexport function Thumbnail({ video, children }) {\n // 添加一个名称，以便使用共享元素过渡进行动画。\n // 这会使用默认动画，不需要额外的 css。\n return (\n \n \n {children}\n \n \n );\n}\n\nexport function VideoControls() {\n const [isPlaying, setIsPlaying] = useState(false);\n\n return (\n \n startTransition(() => {\n setIsPlaying((p) => !p);\n })\n }\n >\n {isPlaying ? : }\n \n );\n}\n\nexport function Video({ video }) {\n const { navigate } = useRouter();\n\n return (\n

\n {\n e.preventDefault();\n navigate(`/video/${video.id}`);\n }}\n >\n \n\n

{video.title}

{video.description}

\n \n \n );\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/data.js hidden","children":"const videos = [\n {\n id: '1',\n title: '第一个视频',\n description: '视频描述',\n image: 'blue',\n },\n {\n id: '2',\n title: '第二个视频',\n description: '视频描述',\n image: 'red',\n },\n {\n id: '3',\n title: '第三个视频',\n description: '视频描述',\n image: 'green',\n },\n {\n id: '4',\n title: '第四个视频',\n description: '视频描述',\n image: 'purple',\n },\n {\n id: '5',\n title: '第五个视频',\n description: '视频描述',\n image: 'yellow',\n },\n {\n id: '6',\n title: '第六个视频',\n description: '视频描述',\n image: 'gray',\n },\n];\n\nlet videosCache = new Map();\nlet videoCache = new Map();\nlet videoDetailsCache = new Map();\nconst VIDEO_DELAY = 1;\nconst VIDEO_DETAILS_DELAY = 1000;\nexport function fetchVideos() {\n if (videosCache.has(0)) {\n return videosCache.get(0);\n }\n const promise = new Promise((resolve) => {\n setTimeout(() => {\n resolve(videos);\n }, VIDEO_DELAY);\n });\n videosCache.set(0, promise);\n return promise;\n}\n\nexport function fetchVideo(id) {\n if (videoCache.has(id)) {\n return videoCache.get(id);\n }\n const promise = new Promise((resolve) => {\n setTimeout(() => {\n resolve(videos.find((video) => video.id === id));\n }, VIDEO_DELAY);\n });\n videoCache.set(id, promise);\n return promise;\n}\n\nexport function fetchVideoDetails(id) {\n if (videoDetailsCache.has(id)) {\n return videoDetailsCache.get(id);\n }\n const promise = new Promise((resolve) => {\n setTimeout(() => {\n resolve(videos.find((video) => video.id === id));\n }, VIDEO_DETAILS_DELAY);\n });\n videoDetailsCache.set(id, promise);\n return promise;\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/router.js hidden","children":"import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, addTransitionType} from \"react\";\n\nexport function Router({ children }) {\n const [isPending, startTransition] = useTransition();\n const [routerState, setRouterState] = useState({pendingNav: () => {}, url: document.location.pathname});\n function navigate(url) {\n startTransition(() => {\n // “nav forward”的过渡类型\n addTransitionType('nav-forward');\n go(url);\n });\n }\n function navigateBack(url) {\n startTransition(() => {\n // “nav backward”的过渡类型\n addTransitionType('nav-back');\n go(url);\n });\n }\n\n function go(url) {\n setRouterState({\n url,\n pendingNav() {\n window.history.pushState({}, \"\", url);\n },\n });\n }\n\n useEffect(() => {\n function handlePopState() {\n // 这不应该产生动画，因为恢复必须是同步的。\n // 即使它是一个过渡。\n startTransition(() => {\n setRouterState({\n url: document.location.pathname + document.location.search,\n pendingNav() {\n // 空操作。URL 已经更新。\n },\n });\n });\n }\n window.addEventListener(\"popstate\", handlePopState);\n return () => {\n window.removeEventListener(\"popstate\", handlePopState);\n };\n }, []);\n const pendingNav = routerState.pendingNav;\n useLayoutEffect(() => {\n pendingNav();\n }, [pendingNav]);\n\n return (\n \n {children}\n \n );\n}\n\nconst RouterContext = createContext({ url: \"/\", params: {} });\n\nexport function useRouter() {\n return use(RouterContext);\n}\n\nexport function useIsNavPending() {\n return use(RouterContext).isPending;\n}\n\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-css","meta":"src/styles.css hidden","children":"@font-face {\n font-family: Optimistic Text;\n src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format(\"woff2\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: Optimistic Text;\n src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format(\"woff2\");\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: Optimistic Text;\n src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format(\"woff2\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: Optimistic Text;\n src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format(\"woff2\");\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n}\n\n* {\n box-sizing: border-box;\n}\n\nhtml {\n background-image: url(https://react.dev/images/meta-gradient-dark.png);\n background-size: 100%;\n background-position: -100%;\n background-color: rgb(64 71 86);\n background-repeat: no-repeat;\n height: 100%;\n width: 100%;\n}\n\nbody {\n font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n padding: 10px 0 10px 0;\n margin: 0;\n display: flex;\n justify-content: center;\n}\n\n#root {\n flex: 1 1;\n height: auto;\n background-color: #fff;\n border-radius: 10px;\n max-width: 450px;\n min-height: 600px;\n padding-bottom: 10px;\n}\n\nh1 {\n margin-top: 0;\n font-size: 22px;\n}\n\nh2 {\n margin-top: 0;\n font-size: 20px;\n}\n\nh3 {\n margin-top: 0;\n font-size: 18px;\n}\n\nh4 {\n margin-top: 0;\n font-size: 16px;\n}\n\nh5 {\n margin-top: 0;\n font-size: 14px;\n}\n\nh6 {\n margin-top: 0;\n font-size: 12px;\n}\n\ncode {\n font-size: 1.2em;\n}\n\nul {\n padding-inline-start: 20px;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n.absolute {\n position: absolute;\n}\n\n.overflow-visible {\n overflow: visible;\n}\n\n.visible {\n overflow: visible;\n}\n\n.fit {\n width: fit-content;\n}\n\n\n/* 布局 */\n.page {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.top-hero {\n height: 200px;\n display: flex;\n justify-content: center;\n align-items: center;\n background-image: conic-gradient(\n from 90deg at -10% 100%,\n #2b303b 0deg,\n #2b303b 90deg,\n #16181d 1turn\n );\n}\n\n.bottom {\n flex: 1;\n overflow: auto;\n}\n\n.top-nav {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 0;\n padding: 0 12px;\n top: 0;\n width: 100%;\n height: 44px;\n color: #23272f;\n font-weight: 700;\n font-size: 20px;\n z-index: 100;\n cursor: default;\n}\n\n.content {\n padding: 0 12px;\n margin-top: 4px;\n}\n\n\n.loader {\n color: #23272f;\n font-size: 3px;\n width: 1em;\n margin-right: 18px;\n height: 1em;\n border-radius: 50%;\n position: relative;\n text-indent: -9999em;\n animation: loading-spinner 1.3s infinite linear;\n animation-delay: 200ms;\n transform: translateZ(0);\n}\n\n@keyframes loading-spinner {\n 0%,\n 100% {\n box-shadow: 0 -3em 0 0.2em,\n 2em -2em 0 0em, 3em 0 0 -1em,\n 2em 2em 0 -1em, 0 3em 0 -1em,\n -2em 2em 0 -1em, -3em 0 0 -1em,\n -2em -2em 0 0;\n }\n 12.5% {\n box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,\n 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,\n -2em 2em 0 -1em, -3em 0 0 -1em,\n -2em -2em 0 -1em;\n }\n 25% {\n box-shadow: 0 -3em 0 -0.5em,\n 2em -2em 0 0, 3em 0 0 0.2em,\n 2em 2em 0 0, 0 3em 0 -1em,\n -2em 2em 0 -1em, -3em 0 0 -1em,\n -2em -2em 0 -1em;\n }\n 37.5% {\n box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,\n 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em,\n -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;\n }\n 50% {\n box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,\n 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em,\n -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;\n }\n 62.5% {\n box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,\n 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,\n -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;\n }\n 75% {\n box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em,\n 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,\n -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;\n }\n 87.5% {\n box-shadow: 0em -3em 0 0, 2em -2em 0 -1em,\n 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,\n -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;\n }\n}\n\n/* LikeButton */\n.like-button {\n outline-offset: 2px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2.5rem;\n height: 2.5rem;\n cursor: pointer;\n border-radius: 9999px;\n border: none;\n outline: none 2px;\n color: #5e687e;\n background: none;\n}\n\n.like-button:focus {\n color: #a6423a;\n background-color: rgba(166, 66, 58, .05);\n}\n\n.like-button:active {\n color: #a6423a;\n background-color: rgba(166, 66, 58, .05);\n transform: scaleX(0.95) scaleY(0.95);\n}\n\n.like-button:hover {\n background-color: #f6f7f9;\n}\n\n.like-button.liked {\n color: #a6423a;\n}\n\n/* 图标 */\n@keyframes circle {\n 0% {\n transform: scale(0);\n stroke-width: 16px;\n }\n\n 50% {\n transform: scale(.5);\n stroke-width: 16px;\n }\n\n to {\n transform: scale(1);\n stroke-width: 0;\n }\n}\n\n.circle {\n color: rgba(166, 66, 58, .5);\n transform-origin: center;\n transition-property: all;\n transition-duration: .15s;\n transition-timing-function: cubic-bezier(.4,0,.2,1);\n}\n\n.circle.liked.animate {\n animation: circle .3s forwards;\n}\n\n.heart {\n width: 1.5rem;\n height: 1.5rem;\n}\n\n.heart.liked {\n transform-origin: center;\n transition-property: all;\n transition-duration: .15s;\n transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n}\n\n.heart.liked.animate {\n animation: scale .35s ease-in-out forwards;\n}\n\n.control-icon {\n color: hsla(0, 0%, 100%, .5);\n filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08));\n}\n\n.chevron-left {\n margin-top: 2px;\n rotate: 90deg;\n}\n\n\n/* 视频 */\n.thumbnail {\n position: relative;\n aspect-ratio: 16 / 9;\n display: flex;\n overflow: hidden;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n border-radius: 0.5rem;\n outline-offset: 2px;\n width: 8rem;\n vertical-align: middle;\n background-color: #ffffff;\n background-size: cover;\n user-select: none;\n}\n\n.thumbnail.blue {\n background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);\n}\n\n.thumbnail.red {\n background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491);\n}\n\n.thumbnail.green {\n background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491);\n}\n\n.thumbnail.purple {\n background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491);\n}\n\n.thumbnail.yellow {\n background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491);\n}\n\n.thumbnail.gray {\n background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491);\n}\n\n.video {\n display: flex;\n flex-direction: row;\n gap: 0.75rem;\n align-items: center;\n}\n\n.video .link {\n display: flex;\n flex-direction: row;\n flex: 1 1 0;\n gap: 0.125rem;\n outline-offset: 4px;\n cursor: pointer;\n}\n\n.video .info {\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin-left: 8px;\n gap: 0.125rem;\n}\n\n.video .info:hover {\n text-decoration: underline;\n}\n\n.video-title {\n font-size: 15px;\n line-height: 1.25;\n font-weight: 700;\n color: #23272f;\n}\n\n.video-description {\n color: #5e687e;\n font-size: 13px;\n}\n\n/* 详情 */\n.details .thumbnail {\n position: relative;\n aspect-ratio: 16 / 9;\n display: flex;\n overflow: hidden;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n border-radius: 0.5rem;\n outline-offset: 2px;\n width: 100%;\n vertical-align: middle;\n background-color: #ffffff;\n background-size: cover;\n user-select: none;\n}\n\n.video-details-title {\n margin-top: 8px;\n}\n\n.video-details-speaker {\n display: flex;\n gap: 8px;\n margin-top: 10px\n}\n\n.back {\n display: flex;\n align-items: center;\n margin-left: -5px;\n cursor: pointer;\n}\n\n.back:hover {\n text-decoration: underline;\n}\n\n.info-title {\n font-size: 1.5rem;\n font-weight: 700;\n line-height: 1.25;\n margin: 8px 0 0 0 ;\n}\n\n.info-description {\n margin: 8px 0 0 0;\n}\n\n.controls {\n cursor: pointer;\n}\n\n.fallback {\n background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat;\n background-size: 800px 104px;\n display: block;\n line-height: 1.25;\n margin: 8px 0 0 0;\n border-radius: 5px;\n overflow: hidden;\n\n animation: 1s linear 1s infinite shimmer;\n animation-delay: 300ms;\n animation-duration: 1s;\n animation-fill-mode: forwards;\n animation-iteration-count: infinite;\n animation-name: shimmer;\n animation-timing-function: linear;\n}\n\n\n.fallback.title {\n width: 130px;\n height: 30px;\n\n}\n\n.fallback.description {\n width: 150px;\n height: 21px;\n}\n\n@keyframes shimmer {\n 0% {\n background-position: -468px 0;\n }\n\n 100% {\n background-position: 468px 0;\n }\n}\n\n.search {\n margin-bottom: 10px;\n}\n.search-input {\n width: 100%;\n position: relative;\n}\n\n.search-icon {\n position: absolute;\n top: 0;\n bottom: 0;\n inset-inline-start: 0;\n display: flex;\n align-items: center;\n padding-inline-start: 1rem;\n pointer-events: none;\n color: #99a1b3;\n}\n\n.search-input input {\n display: flex;\n padding-inline-start: 2.75rem;\n padding-top: 10px;\n padding-bottom: 10px;\n width: 100%;\n text-align: start;\n background-color: rgb(235 236 240);\n outline: 2px solid transparent;\n cursor: pointer;\n border: none;\n align-items: center;\n color: rgb(35 39 47);\n border-radius: 9999px;\n vertical-align: middle;\n font-size: 15px;\n}\n\n.search-input input:hover, .search-input input:active {\n background-color: rgb(235 236 240/ 0.8);\n color: rgb(35 39 47/ 0.8);\n}\n\n/* 首页 */\n.video-list {\n position: relative;\n}\n\n.video-list .videos {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n overflow-y: auto;\n height: 100%;\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-css","meta":"src/animations.css","children":"/* 不需要额外的动画 */\n\n\n\n\n\n\n\n\n\n/* 下面是之前定义的动画 */\n\n\n\n\n\n\n/* 用于让 Suspense 的 fallback 向下滑动的切换动画 */\n::view-transition-old(.slide-down) {\n animation: 150ms ease-out both fade-out, 150ms ease-out both slide-down;\n}\n\n::view-transition-new(.slide-up) {\n animation: 210ms ease-in 150ms both fade-in, 400ms ease-in both slide-up;\n}\n\n/* 通过 transition type 添加的带类名的视图过渡动画 */\n::view-transition-old(.slide-forward) {\n /* 向前滑动时，“旧”页面应向左滑出。 */\n animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,\n 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;\n}\n\n::view-transition-new(.slide-forward) {\n /* 向前滑动时，“新”页面应从右侧滑入。 */\n animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,\n 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;\n}\n\n::view-transition-old(.slide-back) {\n /* 向后滑动时，“旧”页面应向右滑出。 */\n animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,\n 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;\n}\n\n::view-transition-new(.slide-back) {\n /* 向后滑动时，“新”页面应从左侧滑入。 */\n animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,\n 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;\n}\n\n/* 支持上面动画的关键帧。 */\n@keyframes slide-up {\n from {\n transform: translateY(10px);\n }\n to {\n transform: translateY(0);\n }\n}\n\n@keyframes slide-down {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(10px);\n }\n}\n\n@keyframes fade-in {\n from {\n opacity: 0;\n }\n}\n\n@keyframes fade-out {\n to {\n opacity: 0;\n }\n}\n\n@keyframes slide-to-right {\n to {\n transform: translateX(50px);\n }\n}\n\n@keyframes slide-from-right {\n from {\n transform: translateX(50px);\n }\n to {\n transform: translateX(0);\n }\n}\n\n@keyframes slide-to-left {\n to {\n transform: translateX(-50px);\n }\n}\n\n@keyframes slide-from-left {\n from {\n transform: translateX(-50px);\n }\n to {\n transform: translateX(0);\n }\n}\n\n/* 默认的 .slow-fade。 */\n::view-transition-old(.slow-fade) {\n animation-duration: 500ms;\n}\n\n::view-transition-new(.slow-fade) {\n animation-duration: 500ms;\n}\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","meta":"src/index.js hidden","children":"import React, {StrictMode} from 'react';\nimport {createRoot} from 'react-dom/client';\nimport './styles.css';\nimport './animations.css';\n\nimport App from './App';\nimport {Router} from './router';\n\nconst root = createRoot(document.getElementById('root'));\nroot.render(\n \n \n \n \n \n);\n"}]}],["$r","pre",null,{"children":["$r","code",null,{"className":"language-json","meta":"package.json hidden","children":"{\n \"dependencies\": {\n \"react\": \"canary\",\n \"react-dom\": \"canary\",\n \"react-scripts\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test --env=jsdom\",\n \"eject\": \"react-scripts eject\"\n }\n}\n"}]}]]}],["$r","MaxWidth","last",{"children":["\n",["$r","h3",null,{"id":"server-side-rendering-with-activity","children":"带 Activity 的服务端渲染 "}],"\n",["$r","p",null,{"children":"当在使用服务端渲染（SSR）的页面上使用 Activity 时，会有额外的优化。"}],"\n",["$r","p",null,{"children":["如果页面的一部分以 ",["$r","code",null,{"children":"mode=\"hidden\""}]," 渲染，那么它将不会包含在 SSR 响应中。相反，React 会在页面其余部分进行 hydration 的同时，为 Activity 内部的内容安排一次客户端渲染，从而优先处理屏幕上可见的内容。"]}],"\n",["$r","p",null,{"children":["对于以 ",["$r","code",null,{"children":"mode=\"visible\""}]," 渲染的 UI 部分，React 会降低 Activity 内部内容的 hydration 优先级，类似于 Suspense 内容以较低优先级进行 hydration 的方式。如果用户与页面交互，我们会在需要时优先对该边界内进行 hydration。"]}],"\n",["$r","p",null,{"children":"这些都是高级用例，但它们展示了 Activity 所带来的额外收益。"}],"\n",["$r","h3",null,{"id":"future-modes-for-activity","children":"Activity 的未来模式 "}],"\n",["$r","p",null,{"children":"未来，我们可能会为 Activity 添加更多模式。"}],"\n",["$r","p",null,{"children":["例如，一个常见的用例是渲染模态框，其中之前“非活动”的页面会显示在“活动”的模态视图后面。",["$r","code",null,{"children":"hidden"}]," 模式不适用于这个用例，因为它既不可见，也不会包含在 SSR 中。"]}],"\n",["$r","p",null,{"children":"相反，我们正在考虑一种新模式，它会让内容保持可见——并且包含在 SSR 中——但保持未挂载状态并降低更新优先级。这个模式可能还需要“暂停” DOM 更新，因为在模态框打开时看到后台内容不断更新可能会令人分心。"}],"\n",["$r","p",null,{"children":"我们还在考虑为 Activity 提供另一种模式：如果内存使用过多，能够自动销毁隐藏 Activity 的状态。由于组件本身已经未挂载，也许销毁应用中最近最少使用的隐藏部分的状态，而不是消耗过多资源，会更合适。"}],"\n",["$r","p",null,{"children":["这些都是我们仍在探索的方向，我们会随着进展分享更多内容。关于 Activity 当前包含的内容，更多信息请",["$r","a",null,{"href":"/reference/react/Activity","children":"查看文档"}],"。"]}],"\n",["$r","hr",null,{}],"\n",["$r","h1",null,{"id":"features-in-development","children":"开发中的特性 "}],"\n",["$r","p",null,{"children":"我们也在开发一些特性，以帮助解决下面这些常见问题。"}],"\n",["$r","p",null,{"children":"在我们迭代可能的解决方案时，你可能会看到一些我们正在测试的潜在 API，随着我们落地某些 PR，这些内容也会被分享出来。请记住，在我们尝试不同想法的过程中，通常会在试验后更改或移除不同的解决方案。"}],"\n",["$r","p",null,{"children":"如果我们过早分享正在开发的解决方案，这可能会在社区中引起变动和困惑。为了在保持透明与减少混乱之间取得平衡，我们会分享当前正在为之开发解决方案的问题，但不会提前分享我们设想中的具体方案。"}],"\n",["$r","p",null,{"children":"随着这些特性的推进，我们会在博客上发布公告，并附上文档，这样你就可以尝试它们。"}],"\n",["$r","h2",null,{"id":"react-performance-tracks","children":"React 性能轨道 "}],"\n",["$r","p",null,{"children":["我们正在为性能分析器开发一组新的自定义轨道，使用浏览器 API 来",["$r","a",null,{"href":"https://developer.chrome.com/docs/devtools/performance/extension","target":"_blank","rel":"nofollow noopener noreferrer","children":"允许添加自定义轨道"}],"，以提供更多关于你的 React 应用性能的信息。"]}],"\n",["$r","p",null,{"children":"这个特性仍在开发中，所以我们还没有准备好发布文档并将其作为实验性特性完整发布。不过，当你使用 React 的实验版本时，可以抢先预览，它会自动将性能轨道添加到性能分析结果中："}],"\n",["$r","div",null,{"style":{"display":"flex","justifyContent":"center","marginBottom":"1rem"},"children":[["$r","picture",null,{"children":[["$r","source",null,{"srcset":"/images/blog/react-labs-april-2025/perf_tracks.png"}],["$r","img",null,{"className":"w-full light-image","src":"/images/blog/react-labs-april-2025/perf_tracks.webp"}]]}],["$r","picture",null,{"children":[["$r","source",null,{"srcset":"/images/blog/react-labs-april-2025/perf_tracks_dark.png"}],["$r","img",null,{"className":"w-full dark-image","src":"/images/blog/react-labs-april-2025/perf_tracks_dark.webp"}]]}]]}],"\n",["$r","p",null,{"children":"我们计划解决一些已知问题，例如性能问题，以及调度器轨道并不总是能跨越被 Suspense 挂起的树“连接”工作，因此它还不太适合尝试。我们也仍在收集早期采用者的反馈，以改进这些轨道的设计和可用性。"}],"\n",["$r","p",null,{"children":"一旦我们解决这些问题，就会发布实验性文档，并宣布它已准备好尝试。"}],"\n",["$r","hr",null,{}],"\n",["$r","h2",null,{"id":"automatic-effect-dependencies","children":"自动化 Effect 依赖项 "}],"\n",["$r","p",null,{"children":"当我们发布 Hooks 时，我们有三个目标："}],"\n",["$r","ul",null,{"children":["\n",["$r","li",null,{"children":[["$r","strong",null,{"children":"在组件之间共享代码"}],"：Hooks 取代了 render props 和高阶组件等模式，让你可以在不改变组件层级结构的情况下复用有状态逻辑。"]}],"\n",["$r","li",null,{"children":[["$r","strong",null,{"children":"从函数而非生命周期的角度思考"}],"：Hooks 让你可以根据相关的功能片段（例如建立订阅或获取数据）把一个组件拆分成更小的函数，而不是被迫按照生命周期方法来拆分。"]}],"\n",["$r","li",null,{"children":[["$r","strong",null,{"children":"支持提前编译"}],"：Hooks 的设计支持提前编译，并减少由生命周期方法和类的限制所导致的、容易引发意外去优化的陷阱。"]}],"\n"]}],"\n",["$r","p",null,{"children":["自发布以来，Hooks 在",["$r","em",null,{"children":"组件之间共享代码"}],"方面取得了成功。现在，Hooks 已成为组件之间共享逻辑的首选方式，render props 和高阶组件的使用场景也减少了。Hooks 也成功支持了像 Fast Refresh 这样的功能，而这些是类组件无法实现的。"]}],"\n",["$r","h3",null,{"id":"effects-can-be-hard","children":"Effect 可能很难理解 "}],"\n",["$r","p",null,{"children":"不幸的是，一些 Hooks 仍然很难从函数而非生命周期的角度去思考。尤其是 Effects 仍然很难理解，也是我们从开发者那里听到的最常见痛点。去年，我们花了大量时间研究 Effects 是如何被使用的，以及这些使用场景如何简化并更容易理解。"}],"\n",["$r","p",null,{"children":["我们发现，很多时候，困惑来自于在你其实不需要用 Effect 时却使用了它。",["$r","a",null,{"href":"/learn/you-might-not-need-an-effect","children":"你可能不需要 Effect"}]," 这篇指南覆盖了许多不适合使用 Effect 的情况。然而，即使 Effect 是某个问题的正确选择，Effects 仍然可能比类组件生命周期更难理解。"]}],"\n",["$r","p",null,{"children":["我们认为，困惑的原因之一是，开发者往往从 ",["$r","em",null,{"children":"组件"}]," 的角度来理解 Effects（像生命周期一样），而不是从 ",["$r","em",null,{"children":"Effect"}]," 的角度（Effect 本身在做什么）。"]}],"\n",["$r","p",null,{"children":["让我们看一个",["$r","a",null,{"href":"/learn/lifecycle-of-reactive-effects#thinking-from-the-effects-perspective","children":"文档中的示例"}],"："]}],"\n",["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","children":"useEffect(() => {\n // 你的 Effect 连接到由 roomId 指定的房间...\n const connection = createConnection(serverUrl, roomId);\n connection.connect();\n return () => {\n // ...直到它断开连接\n connection.disconnect();\n };\n}, [roomId]);\n"}]}],"\n",["$r","p",null,{"children":["很多用户会把这段代码理解为：“在挂载时，连接到 roomId；每当 ",["$r","code",null,{"children":"roomId"}]," 变化时，就断开旧房间并重新创建连接。”然而，这其实是在从组件的生命周期角度思考，这意味着你需要考虑组件生命周期中的每一种状态，才能正确编写 Effect。从组件视角来使用时，Effect 看起来比类生命周期更难理解，这也是可以理解的。"]}],"\n",["$r","h3",null,{"id":"effects-without-dependencies","children":"不带依赖项的 Effects "}],"\n",["$r","p",null,{"children":"相反，更好的方式是从 Effect 的角度去思考。Effect 并不知道组件生命周期。它只描述如何开始同步，以及如何停止同步。当用户以这种方式思考 Effects 时，他们往往更容易编写这些 Effects，而且即使需要多次启动和停止，它们也更具韧性。"}],"\n",["$r","p",null,{"children":"我们花了一些时间研究为什么人们会从组件视角来理解 Effects，我们认为其中一个原因是依赖数组。因为你必须写它，它就在那里，映入眼帘，提醒你你在对什么“作出反应”，并诱导你进入“当这些值变化时就执行这个”的心智模型。"}],"\n",["$r","p",null,{"children":["当我们发布 Hooks 时，我们就知道可以通过提前编译让它们更易用。借助 React Compiler，在大多数情况下你现在都可以不必自己编写 ",["$r","code",null,{"children":"useCallback"}]," 和 ",["$r","code",null,{"children":"useMemo"}],"。对于 Effects，编译器可以为你插入依赖项："]}],"\n",["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","children":"useEffect(() => {\n const connection = createConnection(serverUrl, roomId);\n connection.connect();\n return () => {\n connection.disconnect();\n };\n}); // 编译器插入的依赖项。\n"}]}],"\n",["$r","p",null,{"children":["通过这段代码，React Compiler 可以为你推导依赖项并自动插入，这样你就不需要看到或编写它们了。结合",["$r","a",null,{"href":"#compiler-ide-extension","children":"IDE 扩展"}],"和",["$r","a",null,{"href":"/reference/react/useEffectEvent","children":["$r","code",null,{"children":"useEffectEvent"}]}],"等特性，我们可以提供 CodeLens，展示编译器在你需要调试时插入了什么，或者在你想通过移除某个依赖项来优化时展示出来。这有助于强化编写 Effects 时正确的心智模型：Effects 可以在任何时候运行，以将你的组件或 Hook 的状态与其他内容同步。"]}],"\n",["$r","p",null,{"children":"我们的希望是，自动插入依赖项不仅更易于编写，也能通过迫使你从 Effect 的作用而不是组件生命周期来思考，从而让它们更容易理解。"}],"\n",["$r","hr",null,{}],"\n",["$r","h2",null,{"id":"compiler-ide-extension","children":"Compiler IDE 扩展 "}],"\n",["$r","p",null,{"children":["在 2025 年晚些时候，",["$r","a",null,{"href":"/blog/2025/10/07/react-compiler-1","children":"我们分享了"}]," React Compiler 的首个稳定版本，并且我们还在持续投入，发布更多改进。"]}],"\n",["$r","p",null,{"children":["我们也已经开始探索如何利用 React Compiler 提供能够提升代码理解和调试的信息。我们开始探索的一个想法，是一个新的、基于 LSP 的 React IDE 扩展，由 React Compiler 提供支持，类似于 ",["$r","a",null,{"href":"https://conf2024.react.dev/talks/5","target":"_blank","rel":"nofollow noopener noreferrer","children":"Lauren Tan 的 React Conf 演讲"}],"中使用的扩展。"]}],"\n",["$r","p",null,{"children":["我们的设想是，可以利用编译器的静态分析，在你的 IDE 中直接提供更多信息、建议和优化机会。例如，我们可以提供针对违反 React 规则代码的诊断信息，悬停提示用于显示组件和 Hooks 是否被编译器优化过，或者提供 CodeLens 来查看",["$r","a",null,{"href":"#automatic-effect-dependencies","children":"自动插入的 Effect 依赖项"}],"。"]}],"\n",["$r","p",null,{"children":"这个 IDE 扩展仍处于早期探索阶段，但我们会在后续更新中分享进展。"}],"\n",["$r","hr",null,{}],"\n",["$r","h2",null,{"id":"fragment-refs","children":"Fragment 引用 "}],"\n",["$r","p",null,{"children":["许多 DOM API，例如事件管理、定位和焦点相关的 API，在使用 React 编写时都很难组合。这常常会导致开发者求助于 Effects、管理多个 Ref，或者使用像 ",["$r","code",null,{"children":"findDOMNode"}]," 这样的 API（已在 React 19 中移除）。"]}],"\n",["$r","p",null,{"children":"我们正在探索为 Fragment 添加 refs，使其指向一组 DOM 元素，而不仅仅是单个元素。我们的希望是，这能简化对多个子元素的管理，并在调用 DOM API 时更容易编写可组合的 React 代码。"}],"\n",["$r","p",null,{"children":"Fragment refs 仍在研究中。等我们更接近完成最终 API 时，会分享更多内容。"}],"\n",["$r","hr",null,{}],"\n",["$r","h2",null,{"id":"gesture-animations","children":"手势动画 "}],"\n",["$r","p",null,{"children":"我们也在研究如何增强 View Transitions，以支持手势动画，例如通过滑动打开菜单，或在照片轮播中滚动浏览。"}],"\n",["$r","p",null,{"children":"手势带来了新的挑战，原因有以下几点："}],"\n",["$r","ul",null,{"children":["\n",["$r","li",null,{"children":[["$r","strong",null,{"children":"手势是连续的"}],"：当你滑动时，动画与手指停留的位置和时间绑定，而不是触发后一直运行到完成。"]}],"\n",["$r","li",null,{"children":[["$r","strong",null,{"children":"手势不会单向完成"}],"：当你松开手指时，手势动画可以继续运行到结束，也可以回到原始状态（例如你只部分打开菜单时），这取决于你滑动了多远。"]}],"\n",["$r","li",null,{"children":[["$r","strong",null,{"children":"手势会颠倒旧状态和新状态"}],"：在动画过程中，你希望正在离开的页面保持“活着”并可交互。这颠倒了浏览器 View Transition 的模型，其中“旧”状态是快照，而“新”状态是实时 DOM。"]}],"\n"]}],"\n",["$r","p",null,{"children":["我们认为我们已经找到了一个效果不错的方法，并可能引入一个用于触发手势过渡的新 API。就目前而言，我们的重点是发布 ",["$r","code",null,{"children":""}],"，之后再回过头来研究手势。"]}],"\n",["$r","h2",null,{"id":"concurrent-stores","children":"并发型 Store "}],"\n",["$r","p",null,{"children":["当我们随着并发渲染发布 React 18 时，我们也发布了 ",["$r","code",null,{"children":"useSyncExternalStore"}],"，这样那些不使用 React state 或 context 的外部 store 库，就可以在 store 更新时强制同步渲染，从而",["$r","a",null,{"href":"https://github.com/reactwg/react-18/discussions/70","target":"_blank","rel":"nofollow noopener noreferrer","children":"支持并发渲染"}],"。"]}],"\n",["$r","p",null,{"children":["不过，使用 ",["$r","code",null,{"children":"useSyncExternalStore"}]," 也是有代价的，因为它会强制退出诸如 transitions 之类的并发特性，并强制现有内容显示 Suspense 回退。"]}],"\n",["$r","p",null,{"children":["现在 React 19 已经发布，我们正在重新审视这个问题领域，以创建一个原语，借助 ",["$r","code",null,{"children":"use"}]," API 充分支持并发外部 store："]}],"\n",["$r","pre",null,{"children":["$r","code",null,{"className":"language-js","children":"const value = use(store);\n"}]}],"\n",["$r","p",null,{"children":"我们的目标是在渲染期间读取外部状态而不会出现撕裂，并且能够与 React 提供的所有并发特性无缝协作。"}],"\n",["$r","p",null,{"children":"这项研究仍处于早期阶段。当我们取得更多进展时，我们会分享更多内容，以及新的 API 会是什么样子。"}],"\n",["$r","hr",null,{}],"\n",["$r","p",null,{"children":["$r","em",null,{"children":["感谢 ",["$r","a",null,{"href":"https://bsky.app/profile/aurorascharff.no","target":"_blank","rel":"nofollow noopener noreferrer","children":"Aurora Scharff"}],"、",["$r","a",null,{"href":"https://bsky.app/profile/danabra.mov","target":"_blank","rel":"nofollow noopener noreferrer","children":"Dan Abramov"}],"、",["$r","a",null,{"href":"https://twitter.com/Eli_White","target":"_blank","rel":"nofollow noopener noreferrer","children":"Eli White"}],"、",["$r","a",null,{"href":"https://bsky.app/profile/no.lol","target":"_blank","rel":"nofollow noopener noreferrer","children":"Lauren Tan"}],"、",["$r","a",null,{"href":"https://github.com/lunaleaps","target":"_blank","rel":"nofollow noopener noreferrer","children":"Luna Wei"}],"、",["$r","a",null,{"href":"https://twitter.com/mattcarrollcode","target":"_blank","rel":"nofollow noopener noreferrer","children":"Matt Carroll"}],"、",["$r","a",null,{"href":"https://jackpope.me","target":"_blank","rel":"nofollow noopener noreferrer","children":"Jack Pope"}],"、",["$r","a",null,{"href":"https://threads.net/someextent","target":"_blank","rel":"nofollow noopener noreferrer","children":"Jason Bonta"}],"、",["$r","a",null,{"href":"https://github.com/jbrown215","target":"_blank","rel":"nofollow noopener noreferrer","children":"Jordan Brown"}],"、",["$r","a",null,{"href":"https://bsky.app/profile/capt.dev","target":"_blank","rel":"nofollow noopener noreferrer","children":"Jordan Eldredge"}],"、",["$r","a",null,{"href":"https://threads.net/z_mofei","target":"_blank","rel":"nofollow noopener noreferrer","children":"Mofei Zhang"}],"、",["$r","a",null,{"href":"https://bsky.app/profile/sebastienlorber.com","target":"_blank","rel":"nofollow noopener noreferrer","children":"Sebastien Lorber"}],"、",["$r","a",null,{"href":"https://bsky.app/profile/sebmarkbage.calyptus.eu","target":"_blank","rel":"nofollow noopener noreferrer","children":"Sebastian Markbåge"}]," 和 ",["$r","a",null,{"href":"https://github.com/yungsters","target":"_blank","rel":"nofollow noopener noreferrer","children":"Tim Yung"}]," 对这篇文章的审阅。"]}]}]]}]]