From a147fbd85b8b26fbd90425231b1a13ce9c7e217c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hao=20Jiang=20=E1=9B=8B?= <22409868+Neo42@users.noreply.github.com> Date: Mon, 3 Jan 2022 18:01:20 +0800 Subject: [PATCH 1/5] Update render.md --- beta/src/pages/reference/render.md | 43 +++++++++++++++--------------- 1 file changed, 22 insertions(+), 21 deletions(-) diff --git a/beta/src/pages/reference/render.md b/beta/src/pages/reference/render.md index d1af797587..799a7c7cad 100644 --- a/beta/src/pages/reference/render.md +++ b/beta/src/pages/reference/render.md @@ -3,34 +3,35 @@ title: render() translators: - liu-jin-yi - QC-L + - Neo42 --- -`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); -render(, container, callback); +render(, container, callback);方法· ``` ## 渲染根组件 {/*rendering-the-root-component*/} -如需调用 `render`，需要编写一段 JSX 代码以及一个 DOM 容器： +如果想调用 `render`，你需要编写一段 JSX 代码以及一个 DOM 容器： - + 需要渲染的 UI 界面。 - + -用于渲染 UI 界面的 DOM 节点。该容器不能被修改，只能修改它的子节点。 +用于渲染 UI 界面的 DOM 节点。容器本身不会被修改，只有其子节点会被修改。 @@ -41,7 +42,7 @@ render(, container); -在完全由 React 构建的应用程序中，你需要在你的应用程序的入口文件执行该操作（渲染 "root" 组件）。 +在完全使用 React 构建的应用程序中，你需要在应用程序的最顶层执行一次该操作——渲染“根”组件。 @@ -65,7 +66,7 @@ export default function App() { ## 渲染多个根组件 {/*rendering-multiple-roots*/} -不管你用 ["哪种方式"](/learn/add-react-to-a-website) 使用 React，你都需为每个由 React 管理的顶层 UI 组件调用 `render` 函数进行渲染。 +如果你在多个地方都撒了 React ["碎片"](/learn/add-react-to-a-website)，那么你就得为每个由 React 管理的顶层 UI 组件调用 `render` 函数进行渲染。 @@ -97,8 +98,8 @@ render( export function Navigation() { return ( ); } @@ -114,9 +115,9 @@ function NavLink({ href, children }) { export function Comments() { return ( <> -

Comments

+

评论

- + ); } @@ -137,9 +138,9 @@ nav ul li { display: inline-block; margin-right: 20px; }
-## 更新已渲染的 DOM {/*updating-the-rendered-tree*/} +## 更新已渲染的组件树 {/*updating-the-rendered-tree*/} -你可以在同一 DOM 节点上多次调用 `render`。只要组件树结构与之前渲染的内容一致，React 就会 [保留该状态](/learn/preserving-and-resetting-state) 。请仔细观察在输入框中输入内容后的效果： +你可以在同一 DOM 节点上多次调用 `render`。只要组件树结构与之前渲染的内容一致，React 就会 [保留 state](/learn/preserving-and-resetting-state)。请仔细观察在输入框中输入内容后的效果： @@ -161,7 +162,7 @@ setInterval(() => { export default function App({counter}) { return ( <> -

Hello, world! {counter}

+

你好，世界! {counter}

); @@ -170,22 +171,22 @@ export default function App({counter}) { -你可以使用 [`unmountComponentAtNode()`](TODO) 来销毁已渲染的 DOM 树。 +你可以使用 [`unmountComponentAtNode()`](TODO) 来销毁已被渲染的组件树。
## 何时不使用它 {/*when-not-to-use-it*/} * 如果你的应用程序使用服务器渲染，并会在服务器上生成 HTML，请使用 [`hydrate`](TODO) 函数，而非 `render` 函数。 -* 如果你的应用程序完全基于 React 构建，你大概率不需要多次使用 `render` 函数。如果你想在 DOM 树的其他位置渲染内容（例如，modal 或者 tooltip），那么请使用 [`createPortal`](TODO) 来代替。 +* 如果你的应用程序完全基于 React 构建，你大概不需要多次使用 `render` 函数。如果你想在 DOM 树的其他位置渲染内容（例如，modal 或者 tooltip），那么请使用 [`createPortal`](TODO) 来代替。
-## 行为细节 {/*behavior-in-detail*/} +## 细节特性 {/*behavior-in-detail*/} -在你第一次调用 `render` 时，`container` 内的任何已有 DOM 元素都会被替换。如果你再次调用 `render` 时，React 将会通过与先前渲染的组件树 ["匹配"](/learn/preserving-and-resetting-state) 的方式，来决定 DOM 的哪些部分可以重用，哪些需要重新创建。重复调用 `render` 与调用 `setState` 效果类似。无论哪种情况，React 都会避免不必要的 DOM 更新。 +在你第一次调用 `render` 时，`container` 内任何已有的 DOM 元素都会被替换。如果你再次调用 render 的话，React 会为了体现最新的 JSX 而进行必要的 DOM 更新。React 会通过将 DOM 与先前渲染的组件树进行“匹配”的方式，来决定 DOM 的哪些部分可以复用、哪些部分需要重新创建。重复调用 render 与调用 setState 相似——在这两种情况下，React 都会避免不必要的 DOM 更新。 -你可以将一个回调函数，作为 `render` 的第三个参数。React 会在你的组件在 DOM 中出现后，调用它。 +你可以将一个回调函数作为第三个参数传递给 render。React 会在你的组件在 DOM 中出现后调用它。 -如果需要渲染 `` ，并且 `MyComponent` 是一个类组件，`render` 函数将返回该类的实例。在其他情况下，它将返回 `null`。 \ No newline at end of file +如果你渲染了一个 `` ，并且 `MyComponent` 是一个类组件，那么 `render` 函数就会返回该类的实例。在其他情况下，它将返回 `null`。 From 72ee9c16d3c69df5acab274b2e23e8d159f33228 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hao=20Jiang=20=E1=9B=8B?= <22409868+Neo42@users.noreply.github.com> Date: Mon, 3 Jan 2022 18:11:19 +0800 Subject: [PATCH 2/5] Update render.md --- 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 799a7c7cad..e3fb7a63f5 100644 --- a/beta/src/pages/reference/render.md +++ b/beta/src/pages/reference/render.md @@ -19,7 +19,7 @@ render(, container, callback);方法· ## 渲染根组件 {/*rendering-the-root-component*/} -如果想调用 `render`，你需要编写一段 JSX 代码以及一个 DOM 容器： +如需调用 `render`，你需要编写一段 JSX 代码以及一个 DOM 容器： From a3c9cbd617bd7a1208e24bd53aed186ef7e70c67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hao=20Jiang=20=E1=9B=8B?= <22409868+Neo42@users.noreply.github.com> Date: Mon, 3 Jan 2022 18:22:56 +0800 Subject: [PATCH 3/5] Update render.md --- beta/src/pages/reference/render.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/beta/src/pages/reference/render.md b/beta/src/pages/reference/render.md index e3fb7a63f5..0ad978735e 100644 --- a/beta/src/pages/reference/render.md +++ b/beta/src/pages/reference/render.md @@ -66,7 +66,7 @@ export default function App() { ## 渲染多个根组件 {/*rendering-multiple-roots*/} -如果你在多个地方都撒了 React ["碎片"](/learn/add-react-to-a-website)，那么你就得为每个由 React 管理的顶层 UI 组件调用 `render` 函数进行渲染。 +如果你在多个地方都撒了 React ["碎片"](/learn/add-react-to-a-website)，那么你就得为每个由 React 管理的顶层 UI 组件调用 `render` 函数。 @@ -178,14 +178,14 @@ 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) 来代替。
## 细节特性 {/*behavior-in-detail*/} -在你第一次调用 `render` 时，`container` 内任何已有的 DOM 元素都会被替换。如果你再次调用 render 的话，React 会为了体现最新的 JSX 而进行必要的 DOM 更新。React 会通过将 DOM 与先前渲染的组件树进行“匹配”的方式，来决定 DOM 的哪些部分可以复用、哪些部分需要重新创建。重复调用 render 与调用 setState 相似——在这两种情况下，React 都会避免不必要的 DOM 更新。 +在你第一次调用 `render` 时，`container` 内任何已有的 DOM 元素都会被替换。如果你再次调用 render 的话，React 会为了体现最新的 JSX 而进行必要的 DOM 更新。React 会通过将 DOM 与先前渲染的组件树进行“匹配”的方式来决定 DOM 的哪些部分可以复用、哪些部分需要重新创建。重复调用 render 与调用 setState 相似——在这两种情况下，React 都会避免不必要的 DOM 更新。 你可以将一个回调函数作为第三个参数传递给 render。React 会在你的组件在 DOM 中出现后调用它。 From 2ea5dbc3a3fc9d7b00b666b3389d5a42cf6e422c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hao=20Jiang=20=E1=9B=8B?= <22409868+Neo42@users.noreply.github.com> Date: Mon, 3 Jan 2022 18:23:29 +0800 Subject: [PATCH 4/5] Update render.md --- 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 0ad978735e..3f524ca24e 100644 --- a/beta/src/pages/reference/render.md +++ b/beta/src/pages/reference/render.md @@ -12,7 +12,7 @@ translators: ```js render(, container); -render(, container, callback);方法· +render(, container, callback); ``` From dd2a7581b428f84a03220d010268323385f6876c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hao=20Jiang=20=E1=9B=8B?= <22409868+Neo42@users.noreply.github.com> Date: Mon, 3 Jan 2022 18:39:16 +0800 Subject: [PATCH 5/5] Update render.md --- 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 3f524ca24e..596e7157e9 100644 --- a/beta/src/pages/reference/render.md +++ b/beta/src/pages/reference/render.md @@ -66,7 +66,7 @@ export default function App() { ## 渲染多个根组件 {/*rendering-multiple-roots*/} -如果你在多个地方都撒了 React ["碎片"](/learn/add-react-to-a-website)，那么你就得为每个由 React 管理的顶层 UI 组件调用 `render` 函数。 +如果你在多个地方都散布了 React ["碎片"](/learn/add-react-to-a-website)，那么你就得为每个由 React 管理的顶层 UI 组件调用 `render` 函数。