From d5127ccd2f96a2076ba314dfdce82cba4ba7adbb Mon Sep 17 00:00:00 2001 From: liujinyi Date: Wed, 3 Nov 2021 20:27:21 +0800 Subject: [PATCH 01/17] [Beta]: tramslation reference render.md done --- beta/src/pages/reference/render.md | 48 ++++++++++++++++-------------- 1 file changed, 25 insertions(+), 23 deletions(-) diff --git a/beta/src/pages/reference/render.md b/beta/src/pages/reference/render.md index b1356a7e24..59854f2156 100644 --- a/beta/src/pages/reference/render.md +++ b/beta/src/pages/reference/render.md @@ -1,11 +1,13 @@ --- title: render() layout: API +translators: + - liu-jin-yi --- -`render` renders a piece of [JSX](/learn/writing-markup-with-jsx) ("React element") into a browser DOM container node. It instructs React to change the DOM inside of the `container` so that it matches the passed JSX. +“render”可以将一段 [JSX](/learn/writing-markup-with-jsx)（“React 元素”）渲染到浏览器 DOM 容器节点中。它可以让 React 改变“container”内的 DOM ，使其与传递的 JSX 相匹配。 ```js render(, container); @@ -14,21 +16,21 @@ render(, container, callback); -## Rendering the root component +## 渲染根组件 -To call `render`, you need a piece of JSX and a DOM container: +想要调用“render”，你需要一段 JSX 和一个 DOM 容器： -The UI you want to render. +你想渲染的 UI 界面。 -The DOM node you want to render your UI into. The container itself isn’t modified, only its children are. +你如果想把你的 UI 界面渲染到 DOM 节点中去。那么容器是不能被修改的，只能修改它的子节点。 @@ -39,7 +41,7 @@ render(, container); -In apps fully built with React, you will do this once at the top level of your app--to render the "root" component. +在完全由 React 构建的应用程序中，你将在你的应用程序的顶层做一次这样的工作 —— 渲染"root"组件。 @@ -53,7 +55,7 @@ render(, document.getElementById('root')); ```js App.js export default function App() { - return

Hello, world!

; + return

你好，世界！

; } ``` @@ -61,16 +63,16 @@ export default function App() {
-## Rendering multiple roots +## 渲染多个根组件 -If you use ["sprinkles"](/learn/add-react-to-a-website) of React here and there, call `render` for each top-level piece of UI managed by React. +不管你在哪里使用 React 的 ["sprinkles"](/learn/add-react-to-a-website) ，你都应该为每个由 React 管理的顶层 UI 组件调用“render”进行渲染。 ```html public/index.html
-

This paragraph is not rendered by React (open index.html to verify).

+

这一段没有被 React 渲染（可以打开 index.html 来验证）。

``` @@ -113,8 +115,8 @@ export function Comments() { return ( <>

Comments

- - + + ); } @@ -135,9 +137,9 @@ nav ul li { display: inline-block; margin-right: 20px; }
-## Updating the rendered tree +## 更新已渲染的 DOM -You can call `render` more than once on the same DOM node. As long as the component tree structure matches up with what was previously rendered, React will [preserve the state](/learn/preserving-and-resetting-state). Notice how you can type in the input: +你可以在同一个 DOM 节点上多次调用“render”。只要组件树结构与之前渲染的内容一致，React 就会 [保留这个状态](/learn/preserving-and-resetting-state) 。请注意你书写代码的方式： @@ -160,7 +162,7 @@ export default function App({counter}) { return ( <>

Hello, world! {counter}

- + ); } @@ -168,22 +170,22 @@ export default function App({counter}) { -You can destroy the rendered tree with [`unmountComponentAtNode()`](TODO). +你可以使用 [“unmountComponentAtNode()”](TODO) 销毁已渲染的 DOM 树。
-## When not to use it +## 何时不使用它 -* If your app uses server rendering and generates HTML on the server, use [`hydrate`](TODO) instead of `render`. -* If your app is fully built with React, you shouldn't need to use `render` more than once. If you want to render something in a different part of the DOM tree (for example, a modal or a tooltip), use [`createPortal`](TODO) instead. +* 如果你的应用程序使用服务器渲染并在服务器上生成 HTML ，请使用 [“hydrate”](TODO) 而不是“render”。 +* 如果你的应用程序是完全用 React 构建的，你应该不需要多次使用“render”。如果你想在 DOM 树的不同部分渲染一些东西（例如，modal 或者 tooltip），那么请使用 [“createPortal”](TODO) 来代替。
-## Behavior in detail +## 使用细节 -The first time you call `render`, any existing DOM elements inside `container` are replaced. If you call `render` again, React will update the DOM as necessary to reflect the latest JSX. React will decide which parts of the DOM can be reused and which need to be recreated by ["matching it up"](/learn/preserving-and-resetting-state) with the previously rendered tree. Calling `render` repeatedly is similar to calling `setState`--in both cases, React avoids unnecessary DOM updates. +在你第一次调用“render”时，“container”内的任何现有 DOM 元素都会被替换。如果你再次调用“render”，React 将会通过 ["匹配"](/learn/preserving-and-resetting-state) 与先前渲染的组件树来决定 DOM 的哪些部分可以重用，哪些需要重新创建。重复调用“render”与调用“setState” —— 在这两种情况下，React 都会避免不必要的 DOM 更新。 -You can pass a callback as the third argument. React will call it after your component is in the DOM. +你可以传递一个回调函数作为第三个参数。React 会在你的组件出现在 DOM 中后调用它。 -If you render ``, and `MyComponent` is a class component, `render` will return the instance of that class. In all other cases, it will return `null`. +如果你渲染 `` ，并且“MyComponent”是一个类组件，“render”将返回该类的实例。在其他情况下，它将返回“null”。 \ No newline at end of file From ddb3ec1064800aa024cb15069013f862ceaf2b76 Mon Sep 17 00:00:00 2001 From: liu-jin-yi <45869971+liu-jin-yi@users.noreply.github.com> Date: Thu, 25 Nov 2021 22:14:23 +0800 Subject: [PATCH 02/17] Update beta/src/pages/reference/render.md Co-authored-by: QiChang Li --- beta/src/pages/reference/render.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/reference/render.md b/beta/src/pages/reference/render.md index dae5eb5d0c..89988ce708 100644 --- a/beta/src/pages/reference/render.md +++ b/beta/src/pages/reference/render.md @@ -6,7 +6,7 @@ translators: -“render”可以将一段 [JSX](/learn/writing-markup-with-jsx)（“React 元素”）渲染到浏览器 DOM 容器节点中。它可以让 React 改变“container”内的 DOM ，使其与传递的 JSX 相匹配。 +`render` 函数会将 [JSX](/learn/writing-markup-with-jsx)（“React 元素”）渲染到浏览器 DOM 容器节点中。它可以让 React 改变 `container` 中 DOM，使其与传递的 JSX 相匹配。 ```js render(, container); From 95cccbb57b40ad8789e13206cd4f7aa953f62857 Mon Sep 17 00:00:00 2001 From: liu-jin-yi <45869971+liu-jin-yi@users.noreply.github.com> Date: Thu, 25 Nov 2021 22:14:32 +0800 Subject: [PATCH 03/17] Update beta/src/pages/reference/render.md Co-authored-by: QiChang Li --- beta/src/pages/reference/render.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/reference/render.md b/beta/src/pages/reference/render.md index 89988ce708..61caf5ecdc 100644 --- a/beta/src/pages/reference/render.md +++ b/beta/src/pages/reference/render.md @@ -17,7 +17,7 @@ render(, container, callback); ## 渲染根组件 {/*rendering-the-root-component*/} -想要调用“render”，你需要一段 JSX 和一个 DOM 容器： +如需调用 `render`，需要编写一段 JSX 代码以及一个 DOM 容器： From 0443114a2e56562e86e815a8e48a942c19dc5923 Mon Sep 17 00:00:00 2001 From: liu-jin-yi <45869971+liu-jin-yi@users.noreply.github.com> Date: Thu, 25 Nov 2021 22:15:21 +0800 Subject: [PATCH 04/17] Update beta/src/pages/reference/render.md Co-authored-by: QiChang Li --- beta/src/pages/reference/render.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/reference/render.md b/beta/src/pages/reference/render.md index 61caf5ecdc..b2a24279f7 100644 --- a/beta/src/pages/reference/render.md +++ b/beta/src/pages/reference/render.md @@ -23,7 +23,7 @@ render(, container, callback); -你想渲染的 UI 界面。 +需要渲染的 UI 界面。 From 372bd2f5ae786a1c948953192eab1c370d82a5c7 Mon Sep 17 00:00:00 2001 From: liu-jin-yi <45869971+liu-jin-yi@users.noreply.github.com> Date: Thu, 25 Nov 2021 22:16:01 +0800 Subject: [PATCH 05/17] Update beta/src/pages/reference/render.md Co-authored-by: QiChang Li --- beta/src/pages/reference/render.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/reference/render.md b/beta/src/pages/reference/render.md index b2a24279f7..300eed8c65 100644 --- a/beta/src/pages/reference/render.md +++ b/beta/src/pages/reference/render.md @@ -29,7 +29,7 @@ render(, container, callback); -你如果想把你的 UI 界面渲染到 DOM 节点中去。那么容器是不能被修改的，只能修改它的子节点。 +用于渲染 UI 界面的 DOM 节点。该容器不能被修改，只能修改它的子节点。 From e157edd998dbe7868c9295eec03dfb1ac488a975 Mon Sep 17 00:00:00 2001 From: liu-jin-yi <45869971+liu-jin-yi@users.noreply.github.com> Date: Thu, 25 Nov 2021 22:16:30 +0800 Subject: [PATCH 06/17] Update beta/src/pages/reference/render.md Co-authored-by: QiChang Li --- beta/src/pages/reference/render.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/reference/render.md b/beta/src/pages/reference/render.md index 300eed8c65..b93dc763ff 100644 --- a/beta/src/pages/reference/render.md +++ b/beta/src/pages/reference/render.md @@ -40,7 +40,7 @@ render(, container); -在完全由 React 构建的应用程序中，你将在你的应用程序的顶层做一次这样的工作 —— 渲染"root"组件。 +在完全由 React 构建的应用程序中，你需要在你的应用程序的入口文件执行该操作（渲染 "root" 组件）。 From 0403b2d38db0673f2afbc36d07f0d4e065ca8b7c Mon Sep 17 00:00:00 2001 From: liu-jin-yi <45869971+liu-jin-yi@users.noreply.github.com> Date: Thu, 25 Nov 2021 22:17:18 +0800 Subject: [PATCH 07/17] Update beta/src/pages/reference/render.md Co-authored-by: QiChang Li --- beta/src/pages/reference/render.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/reference/render.md b/beta/src/pages/reference/render.md index b93dc763ff..1b426dc2a2 100644 --- a/beta/src/pages/reference/render.md +++ b/beta/src/pages/reference/render.md @@ -64,7 +64,7 @@ export default function App() { ## 渲染多个根组件 {/*rendering-multiple-roots*/} -不管你在哪里使用 React 的 ["sprinkles"](/learn/add-react-to-a-website) ，你都应该为每个由 React 管理的顶层 UI 组件调用“render”进行渲染。 +不管你用 ["哪种方式"](/learn/add-react-to-a-website) 使用 React，你都需为每个由 React 管理的顶层 UI 组件调用 `render` 函数进行渲染。 From fc1d8f55b58ac3f0b65454709c05a42949b69154 Mon Sep 17 00:00:00 2001 From: liu-jin-yi <45869971+liu-jin-yi@users.noreply.github.com> Date: Thu, 25 Nov 2021 22:18:42 +0800 Subject: [PATCH 08/17] Update beta/src/pages/reference/render.md Co-authored-by: QiChang Li --- beta/src/pages/reference/render.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/reference/render.md b/beta/src/pages/reference/render.md index 1b426dc2a2..844a698df1 100644 --- a/beta/src/pages/reference/render.md +++ b/beta/src/pages/reference/render.md @@ -138,7 +138,7 @@ nav ul li { display: inline-block; margin-right: 20px; } ## 更新已渲染的 DOM {/*updating-the-rendered-tree*/} -你可以在同一个 DOM 节点上多次调用“render”。只要组件树结构与之前渲染的内容一致，React 就会 [保留这个状态](/learn/preserving-and-resetting-state) 。请注意你书写代码的方式： +你可以在同一 DOM 节点上多次调用 `render`。只要组件树结构与之前渲染的内容一致，React 就会 [保留该状态](/learn/preserving-and-resetting-state) 。请仔细观察在输入框中输入内容后的效果： From 2f09ef6774c6f85274a85e5deae878b014d5efcc Mon Sep 17 00:00:00 2001 From: liu-jin-yi <45869971+liu-jin-yi@users.noreply.github.com> Date: Thu, 25 Nov 2021 22:18:58 +0800 Subject: [PATCH 09/17] Update beta/src/pages/reference/render.md Co-authored-by: QiChang Li --- beta/src/pages/reference/render.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/reference/render.md b/beta/src/pages/reference/render.md index 844a698df1..d96cfa65ef 100644 --- a/beta/src/pages/reference/render.md +++ b/beta/src/pages/reference/render.md @@ -169,7 +169,7 @@ export default function App({counter}) { -你可以使用 [“unmountComponentAtNode()”](TODO) 销毁已渲染的 DOM 树。 +你可以使用 [`unmountComponentAtNode()`](TODO) 来销毁已渲染的 DOM 树。
From bf495ad4a56647cb85d5d596ed6c913d4114ac50 Mon Sep 17 00:00:00 2001 From: liu-jin-yi <45869971+liu-jin-yi@users.noreply.github.com> Date: Thu, 25 Nov 2021 22:19:28 +0800 Subject: [PATCH 10/17] Update beta/src/pages/reference/render.md Co-authored-by: QiChang Li --- beta/src/pages/reference/render.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/reference/render.md b/beta/src/pages/reference/render.md index d96cfa65ef..90c810a4f9 100644 --- a/beta/src/pages/reference/render.md +++ b/beta/src/pages/reference/render.md @@ -175,7 +175,7 @@ export default function App({counter}) { ## 何时不使用它 {/*when-not-to-use-it*/} -* 如果你的应用程序使用服务器渲染并在服务器上生成 HTML ，请使用 [“hydrate”](TODO) 而不是“render”。 +* 如果你的应用程序使用服务器渲染，并会在服务器上生成 HTML，请使用 [`hydrate`](TODO) 函数，而非 `render` 函数。 * 如果你的应用程序是完全用 React 构建的，你应该不需要多次使用“render”。如果你想在 DOM 树的不同部分渲染一些东西（例如，modal 或者 tooltip），那么请使用 [“createPortal”](TODO) 来代替。
From faff25f3da215582716243448a07faf6156af34f Mon Sep 17 00:00:00 2001 From: liu-jin-yi <45869971+liu-jin-yi@users.noreply.github.com> Date: Thu, 25 Nov 2021 22:20:11 +0800 Subject: [PATCH 11/17] Update beta/src/pages/reference/render.md Co-authored-by: QiChang Li --- beta/src/pages/reference/render.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/reference/render.md b/beta/src/pages/reference/render.md index 90c810a4f9..4ab72cd1e3 100644 --- a/beta/src/pages/reference/render.md +++ b/beta/src/pages/reference/render.md @@ -176,7 +176,7 @@ export default function App({counter}) { ## 何时不使用它 {/*when-not-to-use-it*/} * 如果你的应用程序使用服务器渲染，并会在服务器上生成 HTML，请使用 [`hydrate`](TODO) 函数，而非 `render` 函数。 -* 如果你的应用程序是完全用 React 构建的，你应该不需要多次使用“render”。如果你想在 DOM 树的不同部分渲染一些东西（例如，modal 或者 tooltip），那么请使用 [“createPortal”](TODO) 来代替。 +* 如果你的应用程序完全基于 React 构建，你大概率不需要多次使用 `render` 函数。如果你想在 DOM 树的其他位置渲染内容（例如，modal 或者 tooltip），那么请使用 [`createPortal`](TODO) 来代替。
From f71ffbf84bb90606cd92fc4a2da48ab0cb500884 Mon Sep 17 00:00:00 2001 From: liu-jin-yi <45869971+liu-jin-yi@users.noreply.github.com> Date: Thu, 25 Nov 2021 22:21:10 +0800 Subject: [PATCH 12/17] Update beta/src/pages/reference/render.md Co-authored-by: QiChang Li --- beta/src/pages/reference/render.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/reference/render.md b/beta/src/pages/reference/render.md index 4ab72cd1e3..6ad8c362f9 100644 --- a/beta/src/pages/reference/render.md +++ b/beta/src/pages/reference/render.md @@ -181,7 +181,7 @@ export default function App({counter}) {
-## 使用细节 {/*behavior-in-detail*/} +## 行为细节 {/*behavior-in-detail*/} 在你第一次调用“render”时，“container”内的任何现有 DOM 元素都会被替换。如果你再次调用“render”，React 将会通过 ["匹配"](/learn/preserving-and-resetting-state) 与先前渲染的组件树来决定 DOM 的哪些部分可以重用，哪些需要重新创建。重复调用“render”与调用“setState” —— 在这两种情况下，React 都会避免不必要的 DOM 更新。 From 7822a0a853bf05b56a02b6717209dfac4a33347e Mon Sep 17 00:00:00 2001 From: liu-jin-yi <45869971+liu-jin-yi@users.noreply.github.com> Date: Thu, 25 Nov 2021 22:21:55 +0800 Subject: [PATCH 13/17] Update beta/src/pages/reference/render.md Co-authored-by: QiChang Li --- beta/src/pages/reference/render.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/reference/render.md b/beta/src/pages/reference/render.md index 6ad8c362f9..458a0dee2f 100644 --- a/beta/src/pages/reference/render.md +++ b/beta/src/pages/reference/render.md @@ -183,7 +183,7 @@ export default function App({counter}) { ## 行为细节 {/*behavior-in-detail*/} -在你第一次调用“render”时，“container”内的任何现有 DOM 元素都会被替换。如果你再次调用“render”，React 将会通过 ["匹配"](/learn/preserving-and-resetting-state) 与先前渲染的组件树来决定 DOM 的哪些部分可以重用，哪些需要重新创建。重复调用“render”与调用“setState” —— 在这两种情况下，React 都会避免不必要的 DOM 更新。 +在你第一次调用 `render` 时，`container` 内的任何已有 DOM 元素都会被替换。如果你再次调用 `render` 时，React 将会通过与先前渲染的组件树 ["匹配"](/learn/preserving-and-resetting-state) 的方式，来决定 DOM 的哪些部分可以重用，哪些需要重新创建。重复调用 `render` 与调用 `setState` 效果类似。无论哪种情况，React 都会避免不必要的 DOM 更新。 你可以传递一个回调函数作为第三个参数。React 会在你的组件出现在 DOM 中后调用它。 From 6db8456beeb7598e59c4eb9957ae9a1e79be724e Mon Sep 17 00:00:00 2001 From: liu-jin-yi <45869971+liu-jin-yi@users.noreply.github.com> Date: Thu, 25 Nov 2021 22:22:27 +0800 Subject: [PATCH 14/17] Update beta/src/pages/reference/render.md Co-authored-by: QiChang Li --- beta/src/pages/reference/render.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/reference/render.md b/beta/src/pages/reference/render.md index 458a0dee2f..6861910c3f 100644 --- a/beta/src/pages/reference/render.md +++ b/beta/src/pages/reference/render.md @@ -185,6 +185,6 @@ export default function App({counter}) { 在你第一次调用 `render` 时，`container` 内的任何已有 DOM 元素都会被替换。如果你再次调用 `render` 时，React 将会通过与先前渲染的组件树 ["匹配"](/learn/preserving-and-resetting-state) 的方式，来决定 DOM 的哪些部分可以重用，哪些需要重新创建。重复调用 `render` 与调用 `setState` 效果类似。无论哪种情况，React 都会避免不必要的 DOM 更新。 -你可以传递一个回调函数作为第三个参数。React 会在你的组件出现在 DOM 中后调用它。 +你可以将一个回调函数，作为 `render` 的第三个参数。React 会在你的组件在 DOM 中出现后，调用它。 如果你渲染 `` ，并且“MyComponent”是一个类组件，“render”将返回该类的实例。在其他情况下，它将返回“null”。 \ No newline at end of file From 4e836e1ba9562f51e3c457fc5df1d88168a2f2cb Mon Sep 17 00:00:00 2001 From: liu-jin-yi <45869971+liu-jin-yi@users.noreply.github.com> Date: Thu, 25 Nov 2021 22:23:24 +0800 Subject: [PATCH 15/17] Update beta/src/pages/reference/render.md Co-authored-by: QiChang Li --- beta/src/pages/reference/render.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/reference/render.md b/beta/src/pages/reference/render.md index 6861910c3f..1d267c87d5 100644 --- a/beta/src/pages/reference/render.md +++ b/beta/src/pages/reference/render.md @@ -187,4 +187,4 @@ export default function App({counter}) { 你可以将一个回调函数，作为 `render` 的第三个参数。React 会在你的组件在 DOM 中出现后，调用它。 -如果你渲染 `` ，并且“MyComponent”是一个类组件，“render”将返回该类的实例。在其他情况下，它将返回“null”。 \ No newline at end of file +如果需要渲染 `` ，并且 `MyComponent` 是一个类组件，`render` 函数将返回该类的实例。在其他情况下，它将返回 `null`。 \ No newline at end of file From 52bd7f9d63402d7e14ec9445ca8ade4c50098d0f Mon Sep 17 00:00:00 2001 From: liu-jin-yi <45869971+liu-jin-yi@users.noreply.github.com> Date: Thu, 25 Nov 2021 22:23:55 +0800 Subject: [PATCH 16/17] Update beta/src/pages/reference/render.md Co-authored-by: QiChang Li --- beta/src/pages/reference/render.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/reference/render.md b/beta/src/pages/reference/render.md index 1d267c87d5..3d578050c7 100644 --- a/beta/src/pages/reference/render.md +++ b/beta/src/pages/reference/render.md @@ -71,7 +71,7 @@ export default function App() { ```html public/index.html
-

这一段没有被 React 渲染（可以打开 index.html 来验证）。

+

这一段没有被 React 渲染（可以查看 index.html 进行验证）。

``` From 4f6dd7bfa5ba2ad501901e07fd7b42db82f31884 Mon Sep 17 00:00:00 2001 From: QiChang Li Date: Fri, 26 Nov 2021 00:24:24 +0800 Subject: [PATCH 17/17] Update beta/src/pages/reference/render.md --- beta/src/pages/reference/render.md | 1 + 1 file changed, 1 insertion(+) diff --git a/beta/src/pages/reference/render.md b/beta/src/pages/reference/render.md index 3d578050c7..d1af797587 100644 --- a/beta/src/pages/reference/render.md +++ b/beta/src/pages/reference/render.md @@ -2,6 +2,7 @@ title: render() translators: - liu-jin-yi + - QC-L ---