diff --git a/beta/src/pages/apis/render.md b/beta/src/pages/apis/render.md index d1af797587..596e7157e9 100644 --- a/beta/src/pages/apis/render.md +++ b/beta/src/pages/apis/render.md @@ -3,11 +3,12 @@ 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); @@ -18,19 +19,19 @@ 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 (
    - Home - About + 首页 + 关于
); } @@ -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`。