From bb38630bc9c4aed40b72eaa171caf7e410a9e393 Mon Sep 17 00:00:00 2001 From: lauren Date: Mon, 7 Oct 2024 19:14:43 -0400 Subject: [PATCH 1/3] Add react-compiler-runtime instructions to compiler docs (#7213) For users of React < 19, there is a new react-compiler-runtime package that can be used to provide a "polyfill" for runtime APIs needed for compiled code. This PR adds docs for that. --- src/content/learn/react-compiler.md | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md index 2920e86434..5afaa4cf58 100644 --- a/src/content/learn/react-compiler.md +++ b/src/content/learn/react-compiler.md @@ -20,8 +20,6 @@ These docs are still a work in progress. More documentation is available in the React Compiler is a new experimental compiler that we've open sourced to get early feedback from the community. It still has rough edges and is not yet fully ready for production. - -React Compiler requires React 19 RC. If you are unable to upgrade to React 19, you may try a userspace implementation of the cache function as described in the [Working Group](https://github.com/reactwg/react-compiler/discussions/6). However, please note that this is not recommended and you should upgrade to React 19 when possible. React Compiler is a new experimental compiler that we've open sourced to get early feedback from the community. It is a build-time only tool that automatically optimizes your React app. It works with plain JavaScript, and understands the [Rules of React](/reference/rules), so you don't need to rewrite any code to use it. @@ -226,6 +224,29 @@ module.exports = function () { `babel-plugin-react-compiler` should run first before other Babel plugins as the compiler requires the input source information for sound analysis. +React Compiler works best with React 19 RC. If you are unable to upgrade, you can install the extra `react-compiler-runtime` package which will allow the compiled code to run on versions prior to 19. However, note that the minimum supported version is 17. + + +npm install react-compiler-runtime@experimental + + +You should also add the correct `target` to your compiler config, where `target` is the major version of React you are targeting: + +```js {3} +// babel.config.js +const ReactCompilerConfig = { + target: '18' // '17' | '18' | '19' +}; + +module.exports = function () { + return { + plugins: [ + ['babel-plugin-react-compiler', ReactCompilerConfig], + ], + }; +}; +``` + ### Vite {/*usage-with-vite*/} If you use Vite, you can add the plugin to vite-plugin-react: From 2b2d0f2309f49c82cf5bb88ea62fb2e44661c634 Mon Sep 17 00:00:00 2001 From: Jake Saterlay <41985955+JakeSaterlay@users.noreply.github.com> Date: Tue, 8 Oct 2024 09:57:10 +0100 Subject: [PATCH 2/3] `useActionState` pending example (#6989) Co-authored-by: Sebastian "Sebbie" Silbermann --- src/content/reference/react/useActionState.md | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/content/reference/react/useActionState.md b/src/content/reference/react/useActionState.md index 6f5924e3de..52fba47e7a 100644 --- a/src/content/reference/react/useActionState.md +++ b/src/content/reference/react/useActionState.md @@ -20,7 +20,7 @@ In earlier React Canary versions, this API was part of React DOM and called `use `useActionState` is a Hook that allows you to update state based on the result of a form action. ```js -const [state, formAction] = useActionState(fn, initialState, permalink?); +const [state, formAction, isPending] = useActionState(fn, initialState, permalink?); ``` @@ -35,7 +35,7 @@ const [state, formAction] = useActionState(fn, initialState, permalink?); {/* TODO T164397693: link to actions documentation once it exists */} -Call `useActionState` at the top level of your component to create component state that is updated [when a form action is invoked](/reference/react-dom/components/form). You pass `useActionState` an existing form action function as well as an initial state, and it returns a new action that you use in your form, along with the latest form state. The latest form state is also passed to the function that you provided. +Call `useActionState` at the top level of your component to create component state that is updated [when a form action is invoked](/reference/react-dom/components/form). You pass `useActionState` an existing form action function as well as an initial state, and it returns a new action that you use in your form, along with the latest form state and whether the Action is still pending. The latest form state is also passed to the function that you provided. ```js import { useActionState } from "react"; @@ -71,10 +71,11 @@ If used with a Server Action, `useActionState` allows the server's response from #### Returns {/*returns*/} -`useActionState` returns an array with exactly two values: +`useActionState` returns an array with the following values: 1. The current state. During the first render, it will match the `initialState` you have passed. After the action is invoked, it will match the value returned by the action. 2. A new action that you can pass as the `action` prop to your `form` component or `formAction` prop to any `button` component within the form. +3. The `isPending` flag that tells you whether there is a pending Transition. #### Caveats {/*caveats*/} @@ -104,10 +105,11 @@ function MyComponent() { } ``` -`useActionState` returns an array with exactly two items: +`useActionState` returns an array with the following items: 1. The current state of the form, which is initially set to the initial state you provided, and after the form is submitted is set to the return value of the action you provided. 2. A new action that you pass to `
` as its `action` prop. +3. A pending state that you can utilise whilst your action is processing. When the form is submitted, the action function that you provided will be called. Its return value will become the new current state of the form. @@ -133,13 +135,13 @@ import { useActionState, useState } from "react"; import { addToCart } from "./actions.js"; function AddToCartForm({itemID, itemTitle}) { - const [message, formAction] = useActionState(addToCart, null); + const [message, formAction, isPending] = useActionState(addToCart, null); return (

{itemTitle}

- {message} + {isPending ? "Loading..." : message}
); } @@ -162,6 +164,10 @@ export async function addToCart(prevState, queryData) { if (itemID === "1") { return "Added to cart"; } else { + // Add a fake delay to make waiting noticeable. + await new Promise(resolve => { + setTimeout(resolve, 2000); + }); return "Couldn't add to cart: the item is sold out."; } } From 55a43473c2d2fa72f76310b383b2991d7f3ee4c7 Mon Sep 17 00:00:00 2001 From: Xleine Date: Fri, 11 Oct 2024 09:22:30 +0800 Subject: [PATCH 3/3] fix: pr conflict & new translate --- src/content/learn/react-compiler.md | 14 ++---- src/content/reference/react/useActionState.md | 43 ++++--------------- 2 files changed, 12 insertions(+), 45 deletions(-) diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md index 958f3cb654..2d5856f3d1 100644 --- a/src/content/learn/react-compiler.md +++ b/src/content/learn/react-compiler.md @@ -19,16 +19,10 @@ title: React Compiler -<<<<<<< HEAD -React Compiler 是一个新的实验性编译器，我们已经开源，以便从社区中获得早期反馈。它仍然存在一些问题，还没有完全准备好投入生产。 - -React Compiler 需要 React 19 RC。如果你无法升级到 React 19，你可以尝试 userspace 实现缓存功能，如 [工作组](https://github.com/reactwg/react-compiler/discussions/6) 中所述。但请注意，这并不推荐，你应尽可能升级到 React 19。 -======= -React Compiler is a new experimental compiler that we've open sourced to get early feedback from the community. It still has rough edges and is not yet fully ready for production. ->>>>>>> 2b2d0f2309f49c82cf5bb88ea62fb2e44661c634 +React Compiler 是一个新的实验性编译器，我们已经将其开源，以便从社区中获得早期反馈。它仍然存在一些问题，所以还没有完全准备好投入生产。 -React Compiler 是一个新的实验性编译器，我们已经开源以获得社区的早期反馈。它是一个仅在构建时使用的工具，可以自动优化你的 React 应用程序。它可以与纯 JavaScript 一起使用，并且了解 [React 规则](/reference/rules)，因此你无需重写任何代码即可使用它。 +React Compiler 是一个新的实验性编译器，我们已经将其开源，以便从社区中获得早期反馈。它是一个仅在构建时使用的工具，可以自动优化你的 React 应用程序。它可以与纯 JavaScript 一起使用，并且了解 [React 规则](/reference/rules)，因此你无需重写任何代码即可使用它。 编译器还包括一个 [ESLint 插件](#installing-eslint-plugin-react-compiler)，可以在你的编辑器中直接显示编译器的分析结果。该插件独立运行，即使你的应用程序中没有使用编译器也可以使用。我们建议所有 React 开发人员使用这个 ESLint 插件来帮助提高代码库的质量。 @@ -230,13 +224,13 @@ module.exports = function () { `babel-plugin-react-compiler` 应该在其他 Babel 插件之前运行，因为编译器需要输入源信息进行声音分析。 -React Compiler works best with React 19 RC. If you are unable to upgrade, you can install the extra `react-compiler-runtime` package which will allow the compiled code to run on versions prior to 19. However, note that the minimum supported version is 17. +React Compiler 与 React 19 RC 配合使用效果最佳。如果你无法升级，可以安装额外的 `react-compiler-runtime` 包来编译代码并在 19 之前的版本上运行。 但请注意，支持的最低版本是 17。 npm install react-compiler-runtime@experimental -You should also add the correct `target` to your compiler config, where `target` is the major version of React you are targeting: +你还应该在编译器配置中添加正确的 `target`，值为你所使用的 React 大版本。 ```js {3} // babel.config.js diff --git a/src/content/reference/react/useActionState.md b/src/content/reference/react/useActionState.md index a400ec81f3..f10220f4be 100644 --- a/src/content/reference/react/useActionState.md +++ b/src/content/reference/react/useActionState.md @@ -35,11 +35,7 @@ const [state, formAction, isPending] = useActionState(fn, initialState, permalin {/* TODO T164397693: link to actions documentation once it exists */} -<<<<<<< HEAD -在组件的顶层调用 `useActionState` 即可创建一个随 [表单动作被调用](/reference/react-dom/components/form) 而更新的 state。在调用 `useActionState` 时在参数中传入现有的表单动作函数以及一个初始状态，它就会返回一个新的 action 函数和一个 form state 以供在 form 中使用。这个新的 form state 也会作为参数传入提供的表单动作函数。 -======= -Call `useActionState` at the top level of your component to create component state that is updated [when a form action is invoked](/reference/react-dom/components/form). You pass `useActionState` an existing form action function as well as an initial state, and it returns a new action that you use in your form, along with the latest form state and whether the Action is still pending. The latest form state is also passed to the function that you provided. ->>>>>>> 2b2d0f2309f49c82cf5bb88ea62fb2e44661c634 +在组件的顶层调用 `useActionState` 即可创建一个随 [表单动作被调用](/reference/react-dom/components/form) 而更新的 state。在调用 `useActionState` 时在参数中传入现有的表单动作函数以及一个初始状态，无论 Action 是否在 pending 中，它都会返回一个新的 action 函数和一个 form state 以供在 form 中使用。这个新的 form state 也会作为参数传入提供的表单动作函数。 ```js import { useActionState } from "react"; @@ -74,18 +70,11 @@ form state 是一个只在表单被提交触发 action 后才会被更新的值 #### 返回值 {/*returns*/} -<<<<<<< HEAD -`useActionState` 返回一个包含两个值的数组： +`useActionState` 返回一个包含以下值的数组： 1. 当前的 state。第一次渲染期间，该值为传入的 `initialState` 参数值。在 action 被调用后该值会变为 action 的返回值。 2. 一个新的 action 函数用于在你的 `form` 组件的 `action` 参数或表单中任意一个 `button` 组件的 `formAction` 参数中传递。 -======= -`useActionState` returns an array with the following values: - -1. The current state. During the first render, it will match the `initialState` you have passed. After the action is invoked, it will match the value returned by the action. -2. A new action that you can pass as the `action` prop to your `form` component or `formAction` prop to any `button` component within the form. -3. The `isPending` flag that tells you whether there is a pending Transition. ->>>>>>> 2b2d0f2309f49c82cf5bb88ea62fb2e44661c634 +3. 一个 `isPending` 标识，用于表明是否有正在 pending 的 Transition。 #### 注意 {/*caveats*/} @@ -115,18 +104,11 @@ function MyComponent() { } ``` -<<<<<<< HEAD -`useActionState` 返回一个包含两个值的数组： +`useActionState` 返回一个包含以下值的数组： 1. 该表单的 当前 state，初始值为提供的 初始 state，当表单被提交后则改为传入的 action 的返回值。 2. 传入 `
` 标签的 `action` 属性的 新 action。 -======= -`useActionState` returns an array with the following items: - -1. The current state of the form, which is initially set to the initial state you provided, and after the form is submitted is set to the return value of the action you provided. -2. A new action that you pass to `` as its `action` prop. -3. A pending state that you can utilise whilst your action is processing. ->>>>>>> 2b2d0f2309f49c82cf5bb88ea62fb2e44661c634 +3. 一个 pending state，可以在处理 action 的过程中使用它。 表单被提交后，传入的 action 函数会被执行。返回值将会作为该表单的新的 当前 state。 @@ -157,13 +139,8 @@ function AddToCartForm({itemID, itemTitle}) {

{itemTitle}

-<<<<<<< HEAD - {message} -======= - - {isPending ? "Loading..." : message} ->>>>>>> 2b2d0f2309f49c82cf5bb88ea62fb2e44661c634 + {isPending ? "加载中……" : message}
); } @@ -186,15 +163,11 @@ export async function addToCart(prevState, queryData) { if (itemID === "1") { return "已加入购物车"; } else { -<<<<<<< HEAD - return "无法加入购物车：商品已售罄"; -======= - // Add a fake delay to make waiting noticeable. + // 认为添加延迟以使等待更明显。 await new Promise(resolve => { setTimeout(resolve, 2000); }); - return "Couldn't add to cart: the item is sold out."; ->>>>>>> 2b2d0f2309f49c82cf5bb88ea62fb2e44661c634 + return "无法加入购物车：商品已售罄"; } } ```