docs(cn): fix several mistakes and improve coherence for reference/render (#703)

Co-authored-by: QC-L <[email protected]>

Author: Neo42

beta/src/pages/apis/render.md

@@ -3,11 +3,12 @@ title: render()
 translators:
   - liu-jin-yi
   - QC-L
+  - Neo42
 ---
 
 <Intro>
 
-`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(<App />, container);
@@ -18,19 +19,19 @@ render(<App />, container, callback);
 
 ## 渲染根组件 {/*rendering-the-root-component*/}
 
-如需调用 `render`，需要编写一段 JSX 代码以及一个 DOM 容器：
+如需调用 `render`，你需要编写一段 JSX 代码以及一个 DOM 容器：
 
 <APIAnatomy>
 
-<AnatomyStep title="React element">
+<AnatomyStep title="React 元素">
 
 需要渲染的 UI 界面。
 
 </AnatomyStep>
 
-<AnatomyStep title="DOM container">
+<AnatomyStep title="DOM 容器">
 
-用于渲染 UI 界面的 DOM 节点。该容器不能被修改，只能修改它的子节点。
+用于渲染 UI 界面的 DOM 节点。容器本身不会被修改，只有其子节点会被修改。
 
 </AnatomyStep>
 
@@ -41,7 +42,7 @@ render(<App />, container);
 
 </APIAnatomy>
 
-在完全由 React 构建的应用程序中，你需要在你的应用程序的入口文件执行该操作（渲染 "root" 组件）。
+在完全使用 React 构建的应用程序中，你需要在应用程序的最顶层执行一次该操作——渲染“根”组件。
 
 <Sandpack>
 
@@ -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` 函数。
 
 <Sandpack>
 
@@ -97,8 +98,8 @@ render(
 export function Navigation() {
   return (
     <ul>
-      <NavLink href="/">Home</NavLink>
-      <NavLink href="/about">About</NavLink>
+      <NavLink href="/">首页</NavLink>
+      <NavLink href="/about">关于</NavLink>
     </ul>
   );
 }
@@ -114,9 +115,9 @@ function NavLink({ href, children }) {
 export function Comments() {
   return (
     <>
-      <h2>Comments</h2>
+      <h2>评论</h2>
       <Comment text="你好！" author="Sophie" />
-      <Comment text="你是谁？" author="Sunil" />
+      <Comment text="你好吗？" author="Sunil" />
     </>
   );
 }
@@ -137,9 +138,9 @@ nav ul li { display: inline-block; margin-right: 20px; }
 
 <br />
 
-## 更新已渲染的 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)。请仔细观察在输入框中输入内容后的效果：
 
 <Sandpack>
 
@@ -161,7 +162,7 @@ setInterval(() => {
 export default function App({counter}) {
   return (
     <>
-      <h1>Hello, world! {counter}</h1>
+      <h1>你好，世界! {counter}</h1>
       <input placeholder="在这里输入一些东西" />
     </>
   );
@@ -170,22 +171,22 @@ export default function App({counter}) {
 
 </Sandpack>
 
-你可以使用 [`unmountComponentAtNode()`](TODO) 来销毁已渲染的 DOM 树。
+你可以使用 [`unmountComponentAtNode()`](TODO) 来销毁已被渲染的组件树。
 
 <br />
 
 ## 何时不使用它 {/*when-not-to-use-it*/}
 
 * 如果你的应用程序使用服务器渲染，并会在服务器上生成 HTML，请使用 [`hydrate`](TODO) 函数，而非 `render` 函数。
-* 如果你的应用程序完全基于 React 构建，你大概率不需要多次使用 `render` 函数。如果你想在 DOM 树的其他位置渲染内容（例如，modal 或者 tooltip），那么请使用 [`createPortal`](TODO) 来代替。
+* 如果你的应用程序完全基于 React 构建，那么你其实不需要多次使用 `render` 函数。如果你想在 DOM 树的其他位置渲染内容（例如，modal 或者 tooltip），那么请使用 [`createPortal`](TODO) 来代替。
 
 <br />
 
 
-## 行为细节 {/*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 />` ，并且 `MyComponent` 是一个类组件，`render` 函数将返回该类的实例。在其他情况下，它将返回 `null`。
+如果你渲染了一个 `<MyComponent />` ，并且 `MyComponent` 是一个类组件，那么 `render` 函数就会返回该类的实例。在其他情况下，它将返回 `null`。