Skip to content

Commit c0c447a

Browse files
committed
docs: add Chinese translation for part-two
1 parent f50d713 commit c0c447a

File tree

2 files changed

+23
-26
lines changed

2 files changed

+23
-26
lines changed

part-one-zh_CN.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -275,7 +275,7 @@ function render(element, target, callback) {
275275

276276
我们完成了教程的第一部分。我知道仅通过阅读代码很难理解其中的某些概念。开始的时候感觉很混沌,但是继续尝试,最终它会变得清晰。刚开始学习 Fiber 架构的时候,我什么都不懂。我感到极为沮丧,但我在上述代码的每一部分都使用了 `console.log()` 并试图理解它的实现,然后出现了“芜湖 芜湖”的时刻,它最终帮助我构建了 [redocx](https://github.com/nitin42/redocx)。它是有点难以理解,但你终将会明白。
277277

278-
如果您仍然有任何疑问,我在 Twitter 上的 [@NTulswani](https://twitter.com/NTulswani)
278+
如果你仍然有任何疑问,我在 Twitter 上的 [@NTulswani](https://twitter.com/NTulswani)
279279

280280
[更多渲染器的实际示例](https://github.com/facebook/react/tree/master/packages/react-reconciler#practical-examples)
281281

part-two-zh_CN.md

Lines changed: 22 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
# Part-II
1+
# 第二部分
22

33
在上一节中,我们构建了一个 React 协调器,并了解了它如何管理渲染器的生命周期。
44

5-
In part two, we'll create a public interface to the reconciler. We will design our component API and will also build a custom version
6-
of `createElement` method.
5+
在第二部分,我们我们将为调度器创建一个公共接口。我们将设计我们组件的 API,然后将创建一个自定义版本的 `createElement` 方法。
76

87
## 组件
98

@@ -42,7 +41,7 @@ class Text {
4241
}
4342

4443
appendChild(child) {
45-
// 用于附加子节点的 API
44+
// 用于添加子节点的 API
4645
// 注意:这在不同的宿主环境中会有所不同。例如:在浏览器中,你可以使用 document.appendChild(child)
4746
if (typeof child === 'string') {
4847
// 添加字符串并渲染文本节点
@@ -63,14 +62,13 @@ export default Text;
6362

6463
例子 -
6564

66-
```
65+
```js
6766
this.adder.addText(__someText__)
6867
```
6968

7069
**`appendChild`**
7170

72-
This method appends the child nodes using the platform specific function for `docx` i.e `appendChild`. Remember we used this in our reconciler's `appendInitialChild` method to check whether the
73-
parent instance has a method called `appendChild` or not !?
71+
此方法使用 `docx` 的特定平台方法(即 `appendChild`)添加子节点。请记住,我们在调度器的 `appendInitialChild` 方法中检查父实例是否存在 `appendChild` 方法!?
7472

7573
```js
7674
appendInitialChild(parentInstance, child) {
@@ -82,15 +80,15 @@ appendInitialChild(parentInstance, child) {
8280
}
8381
```
8482

85-
Along with `appendChild` method, you can also add `removeChild` method to remove child nodes. Since our host target does not provide a mutative API for removing child nodes, we are not using this method.
83+
除了 `appendChild` 方法,你还可以添加 `removeChild` 方法来删​​除子节点。由于我们的宿主目标不提供用于删除子节点的可变 API,因此我们没有使用此方法。
8684

87-
> For this tutorial, the scope is kept limited for `Text` component. In a more practical example, you might want to validate the nesting of components too.
85+
> 在本教程,`Text` 组件不允许嵌套其它的组件。在更实际的示例中,你可能需要验证组件的嵌套。
8886
89-
#### Note
87+
#### 注意
9088

91-
- Do not track the children inside an array in your class component API. Instead, directly append them using specific host API, as React provides all the valuable information about the child (which was removed or added)
89+
- 不要在类组件 API 中使用数组追踪子组件。相反,直接使用特定的宿主 API 添加它们,因为 React 提供了有关子节点(已删除或添加)的所有有价值的信息。
9290

93-
This is correct
91+
这是正确的
9492

9593
```js
9694
class MyComponent {
@@ -101,7 +99,7 @@ class MyComponent {
10199

102100
appendChild(child) {
103101
some_platform_api.add(child)
104-
// In browser, you may use something like: document.appendChild(child)
102+
// 在浏览器中,我们可能会使用 document.appendChild(child)
105103
}
106104
}
107105
```
@@ -123,7 +121,7 @@ class MyComponent {
123121

124122
renderChildren() {
125123
for (let i = 0; i < this.children.length; i++) {
126-
// do something with this.children[i]
124+
// this.children[i] 进行一些操作
127125
}
128126
}
129127

@@ -133,22 +131,22 @@ class MyComponent {
133131
}
134132
```
135133

136-
- If you're rendering target does not provide a mutate method like `appendChild` and instead only lets you replace the whole "scene" at once, you might want to use the "persistent" renderer mode instead. Here's an [example host config for persistent renderer](https://github.com/facebook/react/blob/master/packages/react-native-renderer/src/ReactFabricHostConfig.js).
134+
- 如果你的渲染目标没有提供像 `appendChild` 这样的可变方法,而是只允许你一次替换整个“场景”,你可能需要使用“持久(persistent)”渲染器模式来代替。这是一个[持久渲染器的示例宿主配置](https://github.com/facebook/react/blob/master/packages/react-native-renderer/src/ReactFabricHostConfig.js)
137135

138136
## createElement
139137

140-
This is similar to the `React.createElement()` for DOM as a target.
138+
这类似于将 DOM 作为目标的 `React.createElement()`
141139

142140
**`createElement.js`**
143141

144142
```js
145143
import { Text, WordDocument } from '../components/index'
146144

147145
/**
148-
* Creates an element for a document
149-
* @param {string} type Element type
150-
* @param {Object} props Component props
151-
* @param {Object} root Root instance
146+
* 为文档创建一个元素
147+
* @param {string} type 元素类型
148+
* @param {Object} props 组件属性
149+
* @param {Object} root 根节点实例
152150
*/
153151
function createElement(type, props, root) {
154152
const COMPONENTS = {
@@ -162,11 +160,10 @@ function createElement(type, props, root) {
162160

163161
export { createElement }
164162
```
163+
我认为你可以很容易地理解在 `createElement` 方法中发生了什么。它需要传入元素类型、组件属性和根节点实例。
165164

166-
I think you can easily understand what's happening inside the `createElement` method. It takes an element, props, and the root instance.
167-
168-
Depending upon the type of element, we return an instance based on it else we return `undefined`.
165+
根据元素的类型,我们返回它的实例,否则我们返回 `undefined`
169166

170-
We're done with the part two of our tutorial. We created the API for our two components (`Document` and `Text`) and a `createElement` method to create an element. In the next part, we will create a render method to flush everything to the host environment.
167+
我们完成了教程的第二部分。我们为我们的两个组件(`Document` `Text`)构建了 API,并构建了一个用于创建元素的 `createElement` 方法。在下一部分中,我们将构建一个渲染方法来将所有内容渲染到宿主环境中。
171168

172-
[Continue to Part-III](./part-three.md)
169+
[继续第三部分](./part-three.md)

0 commit comments

Comments
 (0)