diff --git a/beta/src/pages/reference/render.md b/beta/src/pages/reference/render.md
index cc230c548f..d1af797587 100644
--- a/beta/src/pages/reference/render.md
+++ b/beta/src/pages/reference/render.md
@@ -1,10 +1,13 @@
---
title: render()
+translators:
+ - liu-jin-yi
+ - QC-L
---
-`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);
@@ -13,21 +16,21 @@ render(, container, callback);
-## Rendering the root component {/*rendering-the-root-component*/}
+## 渲染根组件 {/*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 节点。该容器不能被修改,只能修改它的子节点。
@@ -38,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" 组件)。
@@ -52,7 +55,7 @@ render(, document.getElementById('root'));
```js App.js
export default function App() {
- return
Hello, world!
;
+ return
你好,世界!
;
}
```
@@ -60,16 +63,16 @@ export default function App() {
-## Rendering multiple roots {/*rendering-multiple-roots*/}
+## 渲染多个根组件 {/*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.
+不管你用 ["哪种方式"](/learn/add-react-to-a-website) 使用 React,你都需为每个由 React 管理的顶层 UI 组件调用 `render` 函数进行渲染。
```html public/index.html
-
This paragraph is not rendered by React (open index.html to verify).
-
-
+
+
>
);
}
@@ -134,9 +137,9 @@ nav ul li { display: inline-block; margin-right: 20px; }
-## Updating the rendered tree {/*updating-the-rendered-tree*/}
+## 更新已渲染的 DOM {/*updating-the-rendered-tree*/}
-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) 。请仔细观察在输入框中输入内容后的效果:
@@ -159,7 +162,7 @@ export default function App({counter}) {
return (
<>
Hello, world! {counter}
-
+
>
);
}
@@ -167,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 {/*when-not-to-use-it*/}
+## 何时不使用它 {/*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 {/*behavior-in-detail*/}
+## 行为细节 {/*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.
+你可以将一个回调函数,作为 `render` 的第三个参数。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