@@ -9393,7 +9393,7 @@ export function Router({ children }) {
9393
9393
9394
9394
useEffect (() => {
9395
9395
function handlePopState () {
9396
- // This should not animate because restoration has to be synchronous.
9396
+ // 因为恢复必须是同步的,所以应该没有动画。
9397
9397
// Even though it's a transition.
9398
9398
startTransition (() => {
9399
9399
setRouterState ({
@@ -10270,14 +10270,14 @@ function VideoInfo({ id }) {
10270
10270
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" ;
10271
10271
10272
10272
function SearchList ({searchText, videos}) {
10273
- // Activate with useDeferredValue ("when")
10273
+ // 通过 useDeferredValue来激活(何时)
10274
10274
const deferredSearchText = useDeferredValue (searchText);
10275
10275
const filteredVideos = filterVideos (videos, deferredSearchText);
10276
10276
return (
10277
10277
< div className= " video-list" >
10278
10278
< div className= " videos" >
10279
10279
{filteredVideos .map ((video ) => (
10280
- // Animate each item in list ("what")
10280
+ // 对列表中的每一个子项目进行动画(何地)
10281
10281
< ViewTransition key= {video .id }>
10282
10282
< Video video= {video} / >
10283
10283
< / ViewTransition>
@@ -11459,7 +11459,7 @@ root.render(
11459
11459
11460
11460
如果你想了解更多关于它们如何工作的信息,请查看文档中的[ ` <ViewTransition> ` 如何工作] ( /reference/react/ViewTransition#how-does-viewtransition-work ) 。
11461
11461
11462
- _ 关于我们如何构建视图过渡的更多背景信息 ,请参阅:[ #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 ) 和 [ #32038 ] ( https://github.com/facebook/react/pull/32038 ) ,由 [ @sebmarkbage ] ( https://twitter.com/sebmarkbage ) 完成(感谢 Seb!)。_
11462
+ ** 关于我们如何构建视图过渡的更多背景信息 ,请参阅:[ #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 ) 和 [ #32038 ] ( https://github.com/facebook/react/pull/32038 ) ,由 [ @sebmarkbage ] ( https://twitter.com/sebmarkbage ) 完成(感谢 Seb!)。**
11463
11463
11464
11464
---
11465
11465
@@ -11485,7 +11485,7 @@ _关于我们如何构建视图过渡的更多背景信息,请参阅:[#31975
11485
11485
11486
11486
<Note >
11487
11487
11488
- ** Effects don’t mount when an Activity is hidden. **
11488
+ ** 当 Activity 处于 hidden 状态的时候 Effect 不会启动 **
11489
11489
11490
11490
当 ` <Activity> ` 处于 ` hidden ` 状态时,Effect 会被卸载。从概念上讲,组件被卸载了,但 React 会保存状态以供以后使用。
11491
11491
@@ -11531,7 +11531,7 @@ function App() {
11531
11531
11532
11532
通过这个更改,我们可以改进上面的视图过渡示例。之前,当你搜索视频、选择一个视频并返回时,你的搜索过滤器会丢失。使用 Activity,你的搜索过滤器会被恢复,你可以从离开的地方继续。
11533
11533
11534
- 尝试搜索一个视频,选择它,然后点击"返回" :
11534
+ 尝试搜索一个视频,选择它,然后点击“返回” :
11535
11535
11536
11536
<Sandpack >
11537
11537
@@ -11542,7 +11542,7 @@ export default function App() {
11542
11542
const { url } = useRouter ();
11543
11543
11544
11544
return (
11545
- // View Transitions know about Activity
11545
+ // 视图过渡知道如何处理 Activity
11546
11546
< ViewTransition>
11547
11547
{/* Render Home in Activity so we don't lose state */ }
11548
11548
< Activity mode= {url === ' /' ? ' visible' : ' hidden' }>
@@ -11633,7 +11633,7 @@ function VideoInfo({ id }) {
11633
11633
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" ;
11634
11634
11635
11635
function SearchList ({searchText, videos}) {
11636
- // Activate with useDeferredValue ("when")
11636
+ // 通过 useDeferredValue来激活(何时)
11637
11637
const deferredSearchText = useDeferredValue (searchText);
11638
11638
const filteredVideos = filterVideos (videos, deferredSearchText);
11639
11639
return (
@@ -11643,7 +11643,7 @@ function SearchList({searchText, videos}) {
11643
11643
)}
11644
11644
< div className= " videos" >
11645
11645
{filteredVideos .map ((video ) => (
11646
- // Animate each item in list ("what")
11646
+ // 对列表中的每一个子项目进行动画(何地)
11647
11647
< ViewTransition key= {video .id }>
11648
11648
< Video video= {video} / >
11649
11649
< / ViewTransition>
@@ -12071,7 +12071,7 @@ export function Router({ children }) {
12071
12071
12072
12072
useEffect (() => {
12073
12073
function handlePopState () {
12074
- // This should not animate because restoration has to be synchronous.
12074
+ // 因为恢复必须是同步的,所以应该没有动画。
12075
12075
// Even though it's a transition.
12076
12076
startTransition (() => {
12077
12077
setRouterState ({
@@ -12882,7 +12882,7 @@ export default function App() {
12882
12882
12883
12883
return (
12884
12884
< ViewTransition>
12885
- {/* Render videos in Activity to pre-render them */ }
12885
+ {/* 在视图过渡中渲染视频以预渲染它们 */ }
12886
12886
{videos .map (({id}) => (
12887
12887
< Activity key= {id} mode= {videoId === id ? ' visible' : ' hidden' }>
12888
12888
< Details id= {id}/ >
@@ -14216,7 +14216,7 @@ root.render(
14216
14216
14217
14217
在我们迭代可能的解决方案时,你可能会看到我们正在测试的一些潜在 API,这些 API 基于我们正在合并的 PR 进行分享。请记住,当我们尝试不同的想法时,我们通常会在尝试后更改或删除不同的解决方案。
14218
14218
14219
- 当我们正在开发的解决方案过早分享时 ,可能会在社区中造成混乱和困惑。为了平衡透明度和减少困惑,我们分享了我们当前正在为其开发解决方案的问题 ,而不分享我们心中的特定解决方案。
14219
+ 如果我们过早分享正在开发的解决方案 ,可能会在社区中造成混乱和困惑。为了平衡透明度和减少困惑,我们只分享了当前正在为其开发解决方案的问题 ,而不分享我们心中的特定解决方案。
14220
14220
14221
14221
随着这些功能的进展,我们将在博客上宣布它们,并附上文档,以便你可以尝试它们。
14222
14222
@@ -14237,7 +14237,7 @@ root.render(
14237
14237
</picture >
14238
14238
</div >
14239
14239
14240
- 我们计划解决一些已知问题,如性能问题,以及调度器追踪不总是能在 Suspended 树之间"连接" 工作,所以它还不完全可用。我们还在收集早期采用者的反馈,以改进追踪的设计和可用性。
14240
+ 我们计划解决一些已知问题,如性能问题,以及调度器追踪不总是能在 Suspended 树之间“连接” 工作,所以它还不完全可用。我们还在收集早期采用者的反馈,以改进追踪的设计和可用性。
14241
14241
14242
14242
一旦我们解决了这些问题,我们将发布实验性文档并分享它已准备好供尝试。
14243
14243
@@ -14251,15 +14251,15 @@ root.render(
14251
14251
- ** 以函数而非生命周期的方式思考** :hooks 让你可以根据相关的部分(如设置订阅或获取数据)将一个组件拆分成更小的函数,而不是强制基于生命周期方法进行拆分。
14252
14252
- ** 支持提前编译** :hooks 的设计支持提前编译,减少了由生命周期方法和类的限制导致的无意去优化的陷阱。
14253
14253
14254
- 自发布以来,hooks 在* 在组件之间共享代码* 方面取得了成功。Hooks 现在是在组件之间共享逻辑的首选方式,render props 和高阶组件的使用场景减少了。Hooks 还成功支持了像 Fast Refresh 这样的功能,这在类组件中是不可能实现的。
14254
+ 自发布以来,hooks 在 ** 在组件之间共享代码** 方面取得了成功。Hooks 现在是在组件之间共享逻辑的首选方式,render props 和高阶组件的使用场景减少了。Hooks 还成功支持了像 Fast Refresh 这样的功能,这在类组件中是不可能实现的。
14255
14255
14256
14256
### Effects 可能很难理解 {/* effects-can-be-hard* /}
14257
14257
14258
14258
不幸的是,有些 hooks 仍然很难以函数而非生命周期的方式思考。特别是 Effects 仍然很难理解,是我们从开发者那里听到的最常见的痛点。去年,我们花了大量时间研究 Effects 的使用方式,以及如何简化这些用例并使其更容易理解。
14259
14259
14260
14260
我们发现,困惑通常来自于在不需要的情况下使用 Effect。[ 你可能不需要 Effect] ( /learn/you-might-not-need-an-effect ) 指南涵盖了许多 Effects 不是正确解决方案的情况。然而,即使 Effect 是解决问题的正确选择,Effects 仍然可能比类组件生命周期更难理解。
14261
14261
14262
- 我们认为造成困惑的原因之一是开发者从* 组件* 的角度(像生命周期一样)思考 Effects,而不是从 * Effects* 的角度(Effect 做什么)思考。
14262
+ 我们认为造成困惑的原因之一是开发者从 ** 组件** 的角度(像生命周期一样)思考 Effects,而不是从 ** Effects* * 的角度(Effect 做什么)思考。
14263
14263
14264
14264
让我们看一个[ 文档中的例子] ( /learn/lifecycle-of-reactive-effects#thinking-from-the-effects-perspective ) :
14265
14265
@@ -14275,7 +14275,7 @@ useEffect(() => {
14275
14275
}, [roomId]);
14276
14276
```
14277
14277
14278
- 许多用户会将这段代码理解为" 在挂载时,连接到 roomId。每当 ` roomId ` 改变时,断开与旧房间的连接并重新创建连接" 。然而,这是从组件的生命周期角度思考,这意味着你需要考虑每个组件生命周期状态才能正确编写 Effect。这可能很困难,所以当使用组件角度时,Effects 看起来比类生命周期更难理解是可以理解的。
14278
+ 许多用户会将这段代码理解为“ 在挂载时,连接到 roomId。每当 ` roomId ` 改变时,断开与旧房间的连接并重新创建连接” 。然而,这是从组件的生命周期角度思考,这意味着你需要考虑每个组件生命周期状态才能正确编写 Effect。这可能很困难,所以当使用组件角度时,Effects 看起来比类生命周期更难理解是可以理解的。
14279
14279
14280
14280
### 没有依赖的 Effects {/* effects-without-dependencies* /}
14281
14281
@@ -14331,7 +14331,7 @@ Fragment refs 仍在研究中。当我们接近完成最终 API 时,我们将
14331
14331
14332
14332
- ** 手势是连续的** :当你滑动时,动画与你的手指放置时间相关联,而不是触发并运行到完成。
14333
14333
- ** 手势不一定完成** :当你释放手指时,手势动画可以运行到完成,或者根据你滑动的距离恢复到原始状态(比如当你只是部分打开菜单时)。
14334
- - ** 手势颠倒了旧状态和新状态** :在动画过程中,你希望你正在从中进行动画的页面保持"活跃" 和可交互。这颠倒了浏览器视图过渡模型,在该模型中,"旧" 状态是快照,而"新" 状态是实时 DOM。
14334
+ - ** 手势颠倒了旧状态和新状态** :在动画过程中,你希望你正在从中进行动画的页面保持“活跃” 和可交互。这颠倒了浏览器视图过渡模型,在该模型中,“旧” 状态是快照,而“新” 状态是实时 DOM。
14335
14335
14336
14336
我们相信已经找到了一种行之有效的方法,并可能引入一个新的 API 来触发手势过渡。目前,我们专注于发布 ` <ViewTransition> ` ,之后再重新审视手势相关功能。
14337
14337
@@ -14355,4 +14355,4 @@ const value = use(store);
14355
14355
14356
14356
---
14357
14357
14358
- _ 感谢 [ 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 ) 审阅本文。_
14358
+ ** 感谢 [ 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 ) 审阅本文。**
0 commit comments