diff --git a/public/images/tutorial/react-starter-code-codesandbox.png b/public/images/tutorial/react-starter-code-codesandbox.png old mode 100644 new mode 100755 index d65f161bcc..b01e182978 Binary files a/public/images/tutorial/react-starter-code-codesandbox.png and b/public/images/tutorial/react-starter-code-codesandbox.png differ diff --git a/src/components/DocsFooter.tsx b/src/components/DocsFooter.tsx index 09c061abf9..c341b0dfa0 100644 --- a/src/components/DocsFooter.tsx +++ b/src/components/DocsFooter.tsx @@ -80,7 +80,7 @@ function FooterLink({ />
- {type} + {type === 'Previous' ? 'Previous' : 'Next'} {title} diff --git a/src/components/Icon/IconArrowSmall.tsx b/src/components/Icon/IconArrowSmall.tsx index 4a3d3ad02f..a70717c9dc 100644 --- a/src/components/Icon/IconArrowSmall.tsx +++ b/src/components/Icon/IconArrowSmall.tsx @@ -19,6 +19,7 @@ export const IconArrowSmall = memo< const classes = cn(className, { 'rotate-180': displayDirection === 'left', 'rotate-180 rtl:rotate-0': displayDirection === 'start', + 'rtl:rotate-180': displayDirection === 'end', 'rotate-90': displayDirection === 'down', }); return ( diff --git a/src/components/Icon/IconExperimental.tsx b/src/components/Icon/IconExperimental.tsx index 0bba612ebc..c0f69e3f95 100644 --- a/src/components/Icon/IconExperimental.tsx +++ b/src/components/Icon/IconExperimental.tsx @@ -6,7 +6,7 @@ import {memo} from 'react'; export const IconExperimental = memo< JSX.IntrinsicElements['svg'] & {title?: string; size?: 's' | 'md'} ->(function IconCanary( +>(function IconExperimental( {className, title, size} = { className: undefined, title: undefined, diff --git a/src/components/MDX/Challenges/Navigation.tsx b/src/components/MDX/Challenges/Navigation.tsx index 736db093c6..b4d8c0924c 100644 --- a/src/components/MDX/Challenges/Navigation.tsx +++ b/src/components/MDX/Challenges/Navigation.tsx @@ -108,7 +108,7 @@ export function Navigation({ onClick={handleScrollLeft} aria-label="Scroll left" className={cn( - 'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-l border-gray-20 border-r rtl:rotate-180', + 'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-l rtl:rounded-r rtl:rounded-l-none border-gray-20 border-r rtl:border-l rtl:border-r-0', { 'text-primary dark:text-primary-dark': canScrollLeft, 'text-gray-30': !canScrollLeft, @@ -120,7 +120,7 @@ export function Navigation({ onClick={handleScrollRight} aria-label="Scroll right" className={cn( - 'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-e rtl:rotate-180', + 'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-e', { 'text-primary dark:text-primary-dark': canScrollRight, 'text-gray-30': !canScrollRight, diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx index 6a776fbb8a..c0b2b84322 100644 --- a/src/components/MDX/MDXComponents.tsx +++ b/src/components/MDX/MDXComponents.tsx @@ -37,6 +37,7 @@ import {finishedTranslations} from 'utils/finishedTranslations'; import ErrorDecoder from './ErrorDecoder'; import {IconCanary} from '../Icon/IconCanary'; +import {IconExperimental} from 'components/Icon/IconExperimental'; function CodeStep({children, step}: {children: any; step: number}) { return ( @@ -130,7 +131,7 @@ const ExperimentalBadge = ({title}: {title: string}) => ( className={ 'text-base font-display px-1 py-0.5 font-bold bg-gray-10 dark:bg-gray-60 text-gray-60 dark:text-gray-10 rounded' }> - diff --git a/src/components/MDX/Sandpack/ClearButton.tsx b/src/components/MDX/Sandpack/ClearButton.tsx new file mode 100644 index 0000000000..868f9fb660 --- /dev/null +++ b/src/components/MDX/Sandpack/ClearButton.tsx @@ -0,0 +1,22 @@ +/* + * Copyright (c) Facebook, Inc. and its affiliates. + */ + +import * as React from 'react'; +import {IconClose} from '../../Icon/IconClose'; +export interface ClearButtonProps { + onClear: () => void; +} + +export function ClearButton({onClear}: ClearButtonProps) { + return ( + + ); +} diff --git a/src/components/MDX/Sandpack/NavigationBar.tsx b/src/components/MDX/Sandpack/NavigationBar.tsx index bf2c3186c3..d115868dd1 100644 --- a/src/components/MDX/Sandpack/NavigationBar.tsx +++ b/src/components/MDX/Sandpack/NavigationBar.tsx @@ -17,7 +17,8 @@ import { useSandpackNavigation, } from '@codesandbox/sandpack-react/unstyled'; import {OpenInCodeSandboxButton} from './OpenInCodeSandboxButton'; -import {ResetButton} from './ResetButton'; +import {ReloadButton} from './ReloadButton'; +import {ClearButton} from './ClearButton'; import {DownloadButton} from './DownloadButton'; import {IconChevron} from '../../Icon/IconChevron'; import {Listbox} from '@headlessui/react'; @@ -95,7 +96,7 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) { // Note: in a real useEvent, onContainerResize would be omitted. }, [isMultiFile, onContainerResize]); - const handleReset = () => { + const handleClear = () => { /** * resetAllFiles must come first, otherwise * the previous content will appear for a second @@ -103,13 +104,13 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) { * * Plus, it should only prompt if there's any file changes */ - if ( - sandpack.editorState === 'dirty' && - confirm('Reset all your edits too?') - ) { + if (sandpack.editorState === 'dirty' && confirm('Clear all your edits?')) { sandpack.resetAllFiles(); } + refresh(); + }; + const handleReload = () => { refresh(); }; @@ -188,7 +189,8 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) { className="px-3 flex items-center justify-end text-start" translate="yes"> - + + {activeFile.endsWith('.tsx') && ( void; +} + +export function ReloadButton({onReload}: ReloadButtonProps) { + return ( + + ); +} diff --git a/src/components/MDX/Sandpack/ResetButton.tsx b/src/components/MDX/Sandpack/ResetButton.tsx deleted file mode 100644 index 7d99ffea0d..0000000000 --- a/src/components/MDX/Sandpack/ResetButton.tsx +++ /dev/null @@ -1,21 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import {IconRestart} from '../../Icon/IconRestart'; -export interface ResetButtonProps { - onReset: () => void; -} - -export function ResetButton({onReset}: ResetButtonProps) { - return ( - - ); -} diff --git a/src/content/blog/2025/04/21/react-compiler-rc.md b/src/content/blog/2025/04/21/react-compiler-rc.md index ecbbb87471..2ebbf3baeb 100644 --- a/src/content/blog/2025/04/21/react-compiler-rc.md +++ b/src/content/blog/2025/04/21/react-compiler-rc.md @@ -57,23 +57,23 @@ During the RC period, we encourage all React users to try the compiler and provi As noted in the Beta announcement, React Compiler is compatible with React 17 and up. If you are not yet on React 19, you can use React Compiler by specifying a minimum target in your compiler config, and adding `react-compiler-runtime` as a dependency. You can find docs on this [here](https://react.dev/learn/react-compiler#using-react-compiler-with-react-17-or-18). ## Migrating from eslint-plugin-react-compiler to eslint-plugin-react-hooks {/*migrating-from-eslint-plugin-react-compiler-to-eslint-plugin-react-hooks*/} -If you have already installed eslint-plugin-react-compiler, you can now remove it and use `eslint-plugin-react-hooks@6.0.0-rc.1`. Many thanks to [@michaelfaith](https://bsky.app/profile/michael.faith) for contributing to this improvement! +If you have already installed eslint-plugin-react-compiler, you can now remove it and use `eslint-plugin-react-hooks@rc`. Many thanks to [@michaelfaith](https://bsky.app/profile/michael.faith) for contributing to this improvement! To install: npm -{`npm install --save-dev eslint-plugin-react-hooks@6.0.0-rc.1`} +{`npm install --save-dev eslint-plugin-react-hooks@rc`} pnpm -{`pnpm add --save-dev eslint-plugin-react-hooks@6.0.0-rc.1`} +{`pnpm add --save-dev eslint-plugin-react-hooks@rc`} yarn -{`yarn add --dev eslint-plugin-react-hooks@6.0.0-rc.1`} +{`yarn add --dev eslint-plugin-react-hooks@rc`} ```js 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 9f5a00318e..15847dfa24 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 @@ -2521,7 +2521,7 @@ export default function App() { const { url } = useRouter(); // Define a default animation of .slow-fade. - // See animations.css for the animation definiton. + // See animations.css for the animation definition. return ( {url === '/' ? :
} @@ -11465,7 +11465,19 @@ root.render( ## Activity {/*activity*/} +<<<<<<< HEAD 在[过去](/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022#offscreen)的[更新](/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024#offscreen-renamed-to-activity)中，我们分享了我们正在研究一个 API，允许组件在视觉上被隐藏并降低优先级，相比卸载或使用 CSS 隐藏，这种方式能以更低的性能成本保留 UI 状态。 +======= + + +**`` is now available in React’s Canary channel.** + +[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels) + + + +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. +>>>>>>> a5181c291f01896735b65772f156cfde34df20ee 现在我们准备分享这个 API 及其工作原理，这样你就可以开始在实验性 React 版本中测试它了。 diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index 581046a8c0..9354dc9c36 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -20,6 +20,11 @@ October 2-4, 2025. Alicante, Spain. [Website](https://reactalicante.es/) - [Twitter](https://x.com/ReactAlicante) - [Bluesky](https://bsky.app/profile/reactalicante.es) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w) +### RenderCon Kenya 2025 {/*rendercon-kenya-2025*/} +October 04, 2025. Nairobi, Kenya + +[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA) + ### React Conf 2025 {/*react-conf-2025*/} October 7-8, 2025. Henderson, Nevada, USA and free livestream diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md index 479ae50d4b..78d48093aa 100644 --- a/src/content/community/meetups.md +++ b/src/content/community/meetups.md @@ -58,6 +58,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet * [Manchester](https://www.meetup.com/Manchester-React-User-Group/) * [React.JS Girls London](https://www.meetup.com/ReactJS-Girls-London/) * [React Advanced London](https://guild.host/react-advanced-london) +* [React Native Liverpool](https://www.meetup.com/react-native-liverpool/) * [React Native London](https://guild.host/RNLDN) ## Finland {/*finland*/} @@ -137,6 +138,9 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet ## Portugal {/*portugal*/} * [Lisbon](https://www.meetup.com/JavaScript-Lisbon/) +## Scotland (UK) {/*scotland-uk*/} +* [Edinburgh](https://www.meetup.com/react-edinburgh/) + ## Spain {/*spain*/} * [Barcelona](https://www.meetup.com/ReactJS-Barcelona/) diff --git a/src/content/community/videos.md b/src/content/community/videos.md index 3fad95786e..1fca603074 100644 --- a/src/content/community/videos.md +++ b/src/content/community/videos.md @@ -8,6 +8,75 @@ Videos dedicated to the discussion of React and the React ecosystem. +## React Conf 2024 {/*react-conf-2024*/} + +At React Conf 2024, Meta CTO [Andrew "Boz" Bosworth](https://www.threads.net/@boztank) shared a welcome message to kick off the conference: + + + +### React 19 Keynote {/*react-19-keynote*/} + +In the Day 1 keynote, we shared vision for React starting with React 19 and the React Compiler. Watch the full keynote from [Joe Savona](https://twitter.com/en_JS), [Lauren Tan](https://twitter.com/potetotes), [Andrew Clark](https://twitter.com/acdlite), [Josh Story](https://twitter.com/joshcstory), [Sathya Gunasekaran](https://twitter.com/_gsathya), and [Mofei Zhang](https://twitter.com/zmofei): + + + + +### React Unpacked: A Roadmap to React 19 {/*react-unpacked-a-roadmap-to-react-19*/} + +React 19 introduced new features including Actions, `use()`, `useOptimistic` and more. For a deep dive on using new features in React 19, see [Sam Selikoff's](https://twitter.com/samselikoff) talk: + + + +### What's New in React 19 {/*whats-new-in-react-19*/} + +[Lydia Hallie](https://twitter.com/lydiahallie) gave a visual deep dive of React 19's new features: + + + +### React 19 Deep Dive: Coordinating HTML {/*react-19-deep-dive-coordinating-html*/} + +[Josh Story](https://twitter.com/joshcstory) provided a deep dive on the document and resource streaming APIs in React 19: + + + +### React for Two Computers {/*react-for-two-computers*/} + +[Dan Abramov](https://bsky.app/profile/danabra.mov) imagined an alternate history where React started server-first: + + + +### Forget About Memo {/*forget-about-memo*/} + +[Lauren Tan](https://twitter.com/potetotes) gave a talk on using the React Compiler in practice: + + + +### React Compiler Deep Dive {/*react-compiler-deep-dive*/} + +[Sathya Gunasekaran](https://twitter.com/_gsathya) and [Mofei Zhang](https://twitter.com/zmofei) provided a deep dive on how the React Compiler works: + + + +### And more... {/*and-more-2024*/} + +**We also heard talks from the community on Server Components:** +* [Enhancing Forms with React Server Components](https://www.youtube.com/embed/0ckOUBiuxVY&t=25280s) by [Aurora Walberg Scharff](https://twitter.com/aurorascharff) +* [And Now You Understand React Server Components](https://www.youtube.com/embed/pOo7x8OiAec) by [Kent C. Dodds](https://twitter.com/kentcdodds) +* [Real-time Server Components](https://www.youtube.com/embed/6sMANTHWtLM) by [Sunil Pai](https://twitter.com/threepointone) + +**Talks from React frameworks using new features:** + +* [Vanilla React](https://www.youtube.com/embed/ZcwA0xt8FlQ) by [Ryan Florence](https://twitter.com/ryanflorence) +* [React Rhythm & Blues](https://www.youtube.com/embed/rs9X5MjvC4s) by [Lee Robinson](https://twitter.com/leeerob) +* [RedwoodJS, now with React Server Components](https://www.youtube.com/embed/sjyY4MTECUU) by [Amy Dutton](https://twitter.com/selfteachme) +* [Introducing Universal React Server Components in Expo Router](https://www.youtube.com/embed/djhEgxQf3Kw) by [Evan Bacon](https://twitter.com/Baconbrix) + +**And Q&As with the React and React Native teams:** +- [React Q&A](https://www.youtube.com/embed/T8TZQ6k4SLE&t=27518s) hosted by [Michael Chan](https://twitter.com/chantastic) +- [React Native Q&A](https://www.youtube.com/embed/0ckOUBiuxVY&t=27935s) hosted by [Jamon Holmgren](https://twitter.com/jamonholmgren) + +You can watch all of the talks at React Conf 2024 at [conf2024.react.dev](https://conf2024.react.dev/talks). + ## React Conf 2021 {/*react-conf-2021*/} ### React 18 Keynote {/*react-18-keynote*/} @@ -16,13 +85,13 @@ In the keynote, we shared our vision for the future of React starting with React Watch the full keynote from [Andrew Clark](https://twitter.com/acdlite), [Juan Tejada](https://twitter.com/_jstejada), [Lauren Tan](https://twitter.com/potetotes), and [Rick Hanlon](https://twitter.com/rickhanlonii) here: - + ### React 18 for Application Developers {/*react-18-for-application-developers*/} For a demo of upgrading to React 18, see [Shruti Kapoor](https://twitter.com/shrutikapoor08)’s talk here: - + ### Streaming Server Rendering with Suspense {/*streaming-server-rendering-with-suspense*/} @@ -32,7 +101,7 @@ Streaming server rendering lets you generate HTML from React components on the s For a deep dive, see [Shaundai Person](https://twitter.com/shaundai)’s talk here: - + ### The first React working group {/*the-first-react-working-group*/} @@ -40,7 +109,7 @@ For React 18, we created our first Working Group to collaborate with a panel of For an overview of this work, see [Aakansha' Doshi](https://twitter.com/aakansha1216)'s talk: - + ### React Developer Tooling {/*react-developer-tooling*/} @@ -48,19 +117,19 @@ To support the new features in this release, we also announced the newly formed For more information and a demo of new DevTools features, see [Brian Vaughn](https://twitter.com/brian_d_vaughn)’s talk: - + ### React without memo {/*react-without-memo*/} Looking further into the future, [Xuan Huang (黄玄)](https://twitter.com/Huxpro) shared an update from our React Labs research into an auto-memoizing compiler. Check out this talk for more information and a demo of the compiler prototype: - + ### React docs keynote {/*react-docs-keynote*/} [Rachel Nabors](https://twitter.com/rachelnabors) kicked off a section of talks about learning and designing with React with a keynote about our investment in React's new docs ([now shipped as react.dev](/blog/2023/03/16/introducing-react-dev)): - + ### And more... {/*and-more*/} diff --git a/src/content/learn/build-a-react-app-from-scratch.md b/src/content/learn/build-a-react-app-from-scratch.md index 735e0e69a3..6ce14887bd 100644 --- a/src/content/learn/build-a-react-app-from-scratch.md +++ b/src/content/learn/build-a-react-app-from-scratch.md @@ -122,7 +122,11 @@ React 生态系统中包含许多用于解决这些问题的工具。我们列 ### 提高应用程序性能 {/*improving-application-performance*/} +<<<<<<< HEAD 由于你选择的构建工具仅支持单页应用程序（SPA），你需要实现其他 [渲染模式](https://www.patterns.dev/vanilla/rendering-patterns) 如服务器端渲染（SSR）、静态站点生成（SSG）和/或 React 服务器组件（RSC）。即使你一开始不需要这些功能，将来也可能有一些路由会从 SSR、SSG 或 RSC 中受益。 +======= +Since the build tool you select only supports single page apps (SPAs), you'll need to implement other [rendering patterns](https://www.patterns.dev/vanilla/rendering-patterns) like server-side rendering (SSR), static site generation (SSG), and/or React Server Components (RSC). Even if you don't need these features at first, in the future there may be some routes that would benefit SSR, SSG or RSC. +>>>>>>> a5181c291f01896735b65772f156cfde34df20ee * **单页面应用程序 (SPA)** 加载单个 HTML 页面，并在用户与应用程序交互时动态更新页面。SPA 更容易入门，但初始加载时间可能较慢。SPA 是大多数构建工具的默认架构。 diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md index 937d5c9175..1878521319 100644 --- a/src/content/learn/manipulating-the-dom-with-refs.md +++ b/src/content/learn/manipulating-the-dom-with-refs.md @@ -213,7 +213,11 @@ li { 一种可能的解决方案是用一个 ref 引用其父元素，然后用 DOM 操作方法如 [`querySelectorAll`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelectorAll) 来寻找它的子节点。然而，这种方法很脆弱，如果 DOM 结构发生变化，可能会失效或报错。 +<<<<<<< HEAD 另一种解决方案是**将函数传递给 `ref` 属性**。这称为 [`ref` 回调](/reference/react-dom/components/common#ref-callback)。当需要设置 ref 时，React 将传入 DOM 节点来调用你的 ref 回调，并在需要清除它时传入 `null` 。这使你可以维护自己的数组或 [Map](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map)，并通过其索引或某种类型的 ID 访问任何 ref。 +======= +Another solution is to **pass a function to the `ref` attribute.** This is called a [`ref` callback.](/reference/react-dom/components/common#ref-callback) React will call your ref callback with the DOM node when it's time to set the ref, and call the cleanup function returned from the callback when it's time to clear it. This lets you maintain your own array or a [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), and access any ref by its index or some kind of ID. +>>>>>>> a5181c291f01896735b65772f156cfde34df20ee 此示例展示了如何使用此方法滚动到长列表中的任意节点： @@ -249,13 +253,13 @@ export default function CatFriends() {
    {catList.map((cat) => (
  • { const map = getMap(); map.set(cat, node); @@ -265,7 +269,7 @@ export default function CatFriends() { }; }} > - +
    • ))}
@@ -275,11 +279,22 @@ export default function CatFriends() { } function setupCatList() { - const catList = []; - for (let i = 0; i < 10; i++) { - catList.push("https://loremflickr.com/320/240/cat?lock=" + i); + const catCount = 10; + const catList = new Array(catCount) + for (let i = 0; i < catCount; i++) { + let imageUrl = ''; + if (i < 5) { + imageUrl = "https://placecats.com/neo/320/240"; + } else if (i < 8) { + imageUrl = "https://placecats.com/millie/320/240"; + } else { + imageUrl = "https://placecats.com/bella/320/240"; + } + catList[i] = { + id: i, + imageUrl, + }; } - return catList; } @@ -878,12 +893,30 @@ export default function CatFriends() { ); } -const catList = []; -for (let i = 0; i < 10; i++) { - catList.push({ +const catCount = 10; +const catList = new Array(catCount); +for (let i = 0; i < catCount; i++) { + const bucket = Math.floor(Math.random() * catCount) % 2; + let imageUrl = ''; + switch (bucket) { + case 0: { + imageUrl = "https://placecats.com/neo/250/200"; + break; + } + case 1: { + imageUrl = "https://placecats.com/millie/250/200"; + break; + } + case 2: + default: { + imageUrl = "https://placecats.com/bella/250/200"; + break; + } + } + catList[i] = { id: i, - imageUrl: 'https://loremflickr.com/250/200/cat?lock=' + i - }); + imageUrl, + }; } ``` @@ -963,7 +996,7 @@ export default function CatFriends() { behavior: 'smooth', block: 'nearest', inline: 'center' - }); + }); }}> 下一步 @@ -995,12 +1028,30 @@ export default function CatFriends() { ); } -const catList = []; -for (let i = 0; i < 10; i++) { - catList.push({ +const catCount = 10; +const catList = new Array(catCount); +for (let i = 0; i < catCount; i++) { + const bucket = Math.floor(Math.random() * catCount) % 2; + let imageUrl = ''; + switch (bucket) { + case 0: { + imageUrl = "https://placecats.com/neo/250/200"; + break; + } + case 1: { + imageUrl = "https://placecats.com/millie/250/200"; + break; + } + case 2: + default: { + imageUrl = "https://placecats.com/bella/250/200"; + break; + } + } + catList[i] = { id: i, - imageUrl: 'https://loremflickr.com/250/200/cat?lock=' + i - }); + imageUrl, + }; } ``` diff --git a/src/content/learn/react-compiler/installation.md b/src/content/learn/react-compiler/installation.md index 22684cf3fa..5c58cf2d04 100644 --- a/src/content/learn/react-compiler/installation.md +++ b/src/content/learn/react-compiler/installation.md @@ -176,6 +176,7 @@ React Compiler 包含一条 ESLint 规则，可帮助识别无法优化的代码 npm install -D eslint-plugin-react-hooks@rc +<<<<<<< HEAD 然后在你的 ESLint 配置中启用编译器规则： ```js {3} @@ -186,6 +187,9 @@ module.exports = { }, }; ``` +======= +If you haven't already configured eslint-plugin-react-hooks, follow the [installation instructions in the readme](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/README.md#installation). The compiler rule is enabled by default in the latest RC, so no additional configuration is needed. +>>>>>>> a5181c291f01896735b65772f156cfde34df20ee ESLint 规则将会： - 识别对 [React 规则](/reference/rules) 的违反情况 diff --git a/src/content/learn/react-compiler/introduction.md b/src/content/learn/react-compiler/introduction.md index 48b56d30b0..1cc685610b 100644 --- a/src/content/learn/react-compiler/introduction.md +++ b/src/content/learn/react-compiler/introduction.md @@ -50,7 +50,26 @@ const ExpensiveComponent = memo(function ExpensiveComponent({ data, onClick }) { }); ``` +<<<<<<< HEAD ### 在使用 React 编译器之后 {/*after-react-compiler*/} +======= + + + +This manual memoization has a subtle bug that breaks memoization: + +```js [[2, 1, "() => handleClick(item)"]] + handleClick(item)} /> +``` + +Even though `handleClick` is wrapped in `useCallback`, the arrow function `() => handleClick(item)` creates a new function every time the component renders. This means that `Item` will always receive a new `onClick` prop, breaking memoization. + +React Compiler is able to optimize this correctly with or without the arrow function, ensuring that `Item` only re-renders when `props.onClick` changes. + + + +### After React Compiler {/*after-react-compiler*/} +>>>>>>> a5181c291f01896735b65772f156cfde34df20ee 使用 React 编译器，你可以编写相同的代码而无需手动进行记忆化： @@ -74,7 +93,11 @@ function ExpensiveComponent({ data, onClick }) { __[在 React 编译器游乐场中查看此示例](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAogB4AOCmYeAbggMIQC2Fh1OAFMEQCYBDHAIA0RQowA2eOAGsiAXwCURYAB1iROITA4iFGBERgwCPgBEhAogF4iCStVoMACoeO1MAcy6DhSgG4NDSItHT0ACwFMPkkmaTlbIi48HAQWFRsAPlUQ0PFMKRlZFLSWADo8PkC8hSDMPJgEHFhiLjzQgB4+eiyO-OADIwQTM0thcpYBClL02xz2zXz8zoBJMqJZBABPG2BU9Mq+BQKiuT2uTJyomLizkoOMk4B6PqX8pSUFfs7nnro3qEapgFCAFEA)__ +<<<<<<< HEAD React 编译器会自动应用等效的优化，确保你的应用只在必要时重新渲染。 +======= +React Compiler automatically applies the optimal memoization, ensuring your app only re-renders when necessary. +>>>>>>> a5181c291f01896735b65772f156cfde34df20ee #### React 编译器添加了哪种类型的记忆化？ {/*what-kind-of-memoization-does-react-compiler-add*/} @@ -154,7 +177,11 @@ Next.js 用户可以通过使用 [v15.3.1](https://github.com/vercel/next.js/rel ## 关于 useMemo、useCallback 和 React.memo 我应该怎么做？ {/*what-should-i-do-about-usememo-usecallback-and-reactmemo*/} +<<<<<<< HEAD 如果你正在使用 React 编译器，可以移除 [`useMemo`](/reference/react/useMemo)、[`useCallback`](/reference/react/useCallback) 和 [`React.memo`](/reference/react/memo)。React 编译器能够比使用这些 Hook 更精确和细致地添加自动记忆化功能。如果你选择保留手动记忆化，React 编译器会分析它们，并判断你的手动记忆化是否与其自动推断出的记忆化一致。如果不一致，编译器将选择放弃优化该组件。 +======= +React Compiler adds automatic memoization more precisely and granularly than is possible with [`useMemo`](/reference/react/useMemo), [`useCallback`](/reference/react/useCallback), and [`React.memo`](/reference/react/memo). If you choose to keep manual memoization, React Compiler will analyze them and determine if your manual memoization matches its automatically inferred memoization. If there isn't a match, the compiler will choose to bail out of optimizing that component. +>>>>>>> a5181c291f01896735b65772f156cfde34df20ee 这样做是出于谨慎考虑，因为手动记忆化常见的反模式是为了保证程序的正确性。这意味着你的应用依赖于对特定值进行记忆化才能正常运行。例如，为了防止无限循环，你可能会记忆某些值来阻止 `useEffect` 被触发。这违反了 React 的规则，但因为编译器自动移除手动记忆化可能会有潜在危险，所以会直接放弃优化。你应该手动移除自己的手动记忆化代码，并验证应用是否仍能按预期运行。 diff --git a/src/content/learn/reusing-logic-with-custom-hooks.md b/src/content/learn/reusing-logic-with-custom-hooks.md index 8a60040358..bdb90094a9 100644 --- a/src/content/learn/reusing-logic-with-custom-hooks.md +++ b/src/content/learn/reusing-logic-with-custom-hooks.md @@ -1419,10 +1419,36 @@ function SaveButton() { #### React 会为数据获取提供内置解决方案么？ {/*will-react-provide-any-built-in-solution-for-data-fetching*/} +<<<<<<< HEAD 我们仍然在规划细节，但是期望未来可以像这样写数据获取： ```js {1,4,6} import { use } from 'react'; // 还不可用！ +======= +Today, with the [`use`](/reference/react/use#streaming-data-from-server-to-client) API, data can be read in render by passing a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) to `use`: + +```js {1,4,11} +import { use, Suspense } from "react"; + +function Message({ messagePromise }) { + const messageContent = use(messagePromise); + return

Here is the message: {messageContent}

; +} + +export function MessageContainer({ messagePromise }) { + return ( + ⌛Downloading message...

}> + + + ); +} +``` + +We're still working out the details, but we expect that in the future, you'll write data fetching like this: + +```js {1,4,6} +import { use } from 'react'; +>>>>>>> a5181c291f01896735b65772f156cfde34df20ee function ShippingForm({ country }) { const cities = use(fetch(`/api/cities?country=${country}`)); diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 642391edc6..13ffc19ae8 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -283,9 +283,15 @@ body { ![CodeSandbox 的初始代码](../images/tutorial/react-starter-code-codesandbox.png) +<<<<<<< HEAD 1. _Files_ 部分列出了一些文件：`App.js`、`index.js`、`styles.css` 和 `public` 文件夹。 2. _code editor_ 部分可以看到你所选中文件的源码。 3. _browser_ 部分可以预览代码的实时结果。 +======= +1. The _Files_ section with a list of files like `App.js`, `index.js`, `styles.css` in `src` folder and a folder called `public` +1. The _code editor_ where you'll see the source code of your selected file +1. The _browser_ section where you'll see how the code you've written will be displayed +>>>>>>> a5181c291f01896735b65772f156cfde34df20ee `App.js` 文件里面的内容应该是这样的： diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index b24f0963e7..2e6efaab78 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -32,14 +32,20 @@ TypeScript 是一种向 JavaScript 代码添加类型定义的常用方法。Typ 使用下面命令安装最新版本的 React 类型定义： -npm install @types/react @types/react-dom +npm install --save-dev @types/react @types/react-dom 然后在 `tsconfig.json` 中设置以下编译器选项： +<<<<<<< HEAD 1. 必须在 [`lib`](https://www.typescriptlang.org/tsconfig/#lib) 中包含 `dom`（注意：如果没有指定 `lib` 选项，默认情况下会包含 `dom`）。 1. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) 必须设置为一个有效的选项。对于大多数应用程序，`preserve` 应该足够了。 如果你正在发布一个库，请查阅 [`jsx` 文档](https://www.typescriptlang.org/tsconfig/#jsx) 以选择合适的值。 +======= +1. `dom` must be included in [`lib`](https://www.typescriptlang.org/tsconfig/#lib) (Note: If no `lib` option is specified, `dom` is included by default). +2. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) must be set to one of the valid options. `preserve` should suffice for most applications. + If you're publishing a library, consult the [`jsx` documentation](https://www.typescriptlang.org/tsconfig/#jsx) on what value to choose. +>>>>>>> a5181c291f01896735b65772f156cfde34df20ee ## 在 React 组件中使用 TypeScript {/*typescript-with-react-components*/} diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md index 356637bcdc..b17b1a40b0 100644 --- a/src/content/reference/react-dom/components/form.md +++ b/src/content/reference/react-dom/components/form.md @@ -38,7 +38,7 @@ To create interactive controls for submitting information, render the [built-in `
` supports all [common element props.](/reference/react-dom/components/common#common-props) -[`action`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action): a URL or function. When a URL is passed to `action` the form will behave like the HTML form component. When a function is passed to `action` the function will handle the form submission. The function passed to `action` may be async and will be called with a single argument containing the [form data](https://developer.mozilla.org/en-US/docs/Web/API/FormData) of the submitted form. The `action` prop can be overridden by a `formAction` attribute on a `