Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(en): merge reactjs.org/main into zh-hans.reactjs.org/main @ ee094926 #1605

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

docs(en): merge reactjs.org/main into zh-hans.reactjs.org/main @ ee094926 #1605

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ee09492
[compiler] Move React 17/18 section to its own subheading (#7230)
poteto Oct 17, 2024
2dc103f
docs(en): merging all conflicts
docschina-bot Oct 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions src/content/learn/react-compiler.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,36 @@ export default function App() {

当你对编译器的推出更有信心时，你也可以将覆盖范围扩展到其他目录，并逐渐将其推出到整个应用程序。

<<<<<<< HEAD
#### 新项目 {/*new-projects*/}
=======
### Using React Compiler with React 17 or 18 {/*using-react-compiler-with-react-17-or-18*/}

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],
],
};
};
```

#### New projects {/*new-projects*/}
>>>>>>> ee094926d54eef5cec54c9299842eeb822c7859b

如果你正在启动一个新项目，你可以在整个代码库上启用编译器，这是默认行为。

Expand Down Expand Up @@ -224,6 +253,7 @@ module.exports = function () {

`babel-plugin-react-compiler` 应该在其他 Babel 插件之前运行，因为编译器需要输入源信息进行声音分析。

<<<<<<< HEAD
React Compiler 与 React 19 RC 配合使用效果最佳。如果你无法升级，可以安装额外的 `react-compiler-runtime` 包来编译代码并在 19 之前的版本上运行。 但请注意，支持的最低版本是 17。

<TerminalBlock>
Expand All @@ -247,6 +277,8 @@ module.exports = function () {
};
```

=======
>>>>>>> ee094926d54eef5cec54c9299842eeb822c7859b
### Vite {/*usage-with-vite*/}

如果你使用 Vite，你可以将插件添加到 vite-plugin-react 中：
Expand Down Expand Up @@ -392,13 +424,17 @@ React Native 通过 Metro 使用 Babel，因此请参考 [使用 Babel](#usage-w

你也可以通过申请成为成员，在 React Compiler 工作组中提供反馈意见。请查看 [README](https://github.com/reactwg/react-compiler) 以获取更多加入详情。

<<<<<<< HEAD
### `(0 , _c) is not a function` error {/*0--_c-is-not-a-function-error*/}

如果你没有使用 React 19 RC 及更高版本，则会发生这种情况。要解决此问题，请先 [将你的项目升级到 React 19 RC](https://react.dev/blog/2024/04/25/react-19-upgrade-guide)。

如果你无法升级到 React 19，你可以尝试根据 [工作组](https://github.com/reactwg/react-compiler/discussions/6) 描述的缓存功能的用户空间实现。但是，请注意这并不建议，你应尽快升级到React 19。

### 我如何知道我的组件已被优化？ {/*how-do-i-know-my-components-have-been-optimized*/}
=======
### How do I know my components have been optimized? {/*how-do-i-know-my-components-have-been-optimized*/}
>>>>>>> ee094926d54eef5cec54c9299842eeb822c7859b

[React 开发工具](/learn/react-developer-tools)（v5.0 及以上版本）对 React Compiler 有内置支持，并会在已被编译器优化的组件旁边显示“Memo ✨”徽章。

Expand Down
Loading