Skip to content

Commit

Permalink
docs(en): merging all conflicts
Browse files Browse the repository at this point in the history
  • Loading branch information
docschina-bot committed Oct 8, 2024
2 parents 5729594 + 2b2d0f2 commit 598504a
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 2 deletions.
27 changes: 27 additions & 0 deletions src/content/learn/react-compiler.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,13 @@ title: React Compiler
</YouWillLearn>

<Note>
<<<<<<< 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
</Note>
React Compiler 是一个新的实验性编译器,我们已经开源以获得社区的早期反馈。它是一个仅在构建时使用的工具,可以自动优化你的 React 应用程序。它可以与纯 JavaScript 一起使用,并且了解 [React 规则](/reference/rules),因此你无需重写任何代码即可使用它。
Expand Down Expand Up @@ -226,6 +230,29 @@ 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.

<TerminalBlock>
npm install react-compiler-runtime@experimental
</TerminalBlock>

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*/}

如果你使用 Vite,你可以将插件添加到 vite-plugin-react 中:
Expand Down
37 changes: 35 additions & 2 deletions src/content/reference/react/useActionState.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ In earlier React Canary versions, this API was part of React DOM and called `use
`useActionState` 是一个可以根据某个表单动作的结果更新 state 的 Hook。

```js
const [state, formAction] = useActionState(fn, initialState, permalink?);
const [state, formAction, isPending] = useActionState(fn, initialState, permalink?);
```
</Intro>
Expand All @@ -35,7 +35,11 @@ const [state, formAction] = useActionState(fn, initialState, permalink?);
{/* 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
```js
import { useActionState } from "react";
Expand Down Expand Up @@ -70,10 +74,18 @@ form state 是一个只在表单被提交触发 action 后才会被更新的值
#### 返回值 {/*returns*/}
<<<<<<< HEAD
`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
#### 注意 {/*caveats*/}
Expand Down Expand Up @@ -103,10 +115,18 @@ function MyComponent() {
}
```
<<<<<<< HEAD
`useActionState` 返回一个包含两个值的数组:
1. 该表单的 <CodeStep step={1}>当前 state</CodeStep>,初始值为提供的 <CodeStep step={4}>初始 state</CodeStep>,当表单被提交后则改为传入的 <CodeStep step={3}>action</CodeStep> 的返回值。
2. 传入 `<form>` 标签的 `action` 属性的 <CodeStep step={2}>新 action</CodeStep>。
=======
`useActionState` returns an array with the following items:
1. The <CodeStep step={1}>current state</CodeStep> of the form, which is initially set to the <CodeStep step={4}>initial state</CodeStep> you provided, and after the form is submitted is set to the return value of the <CodeStep step={3}>action</CodeStep> you provided.
2. A <CodeStep step={2}>new action</CodeStep> that you pass to `<form>` as its `action` prop.
3. A <CodeStep step={1}>pending state</CodeStep> that you can utilise whilst your action is processing.
>>>>>>> 2b2d0f2309f49c82cf5bb88ea62fb2e44661c634
表单被提交后,传入的 <CodeStep step={3}>action</CodeStep> 函数会被执行。返回值将会作为该表单的新的 <CodeStep step={1}>当前 state</CodeStep>。
Expand All @@ -132,13 +152,18 @@ 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 (
<form action={formAction}>
<h2>{itemTitle}</h2>
<input type="hidden" name="itemID" value={itemID} />
<<<<<<< HEAD
<button type="submit">加入购物车</button>
{message}
=======
<button type="submit">Add to Cart</button>
{isPending ? "Loading..." : message}
>>>>>>> 2b2d0f2309f49c82cf5bb88ea62fb2e44661c634
</form>
);
}
Expand All @@ -161,7 +186,15 @@ 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
}
}
```
Expand Down

0 comments on commit 598504a

Please sign in to comment.