Skip to content

Commit b369632

Browse files
committed
docs: add Chinese translation for part-three
1 parent c0c447a commit b369632

File tree

1 file changed

+72
-0
lines changed

1 file changed

+72
-0
lines changed

part-three-zh_CN.md

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
# 第三部分
2+
3+
这是我们教程的最后一部分。我们已经完成了所有繁重的工作,创建了一个 React 调度器,为我们的调度器创建了一个公共接口,设计了组件 API。
4+
5+
现在我们只需要创建一个 `render` 方法来将所有内容渲染到宿主环境中。
6+
7+
## render
8+
9+
```js
10+
11+
import fs from 'fs';
12+
import { createElement } from '../utils/createElement';
13+
import { WordRenderer } from './renderer';
14+
15+
// 渲染组件
16+
async function render(element, filePath) {
17+
const container = createElement('ROOT');
18+
19+
const node = WordRenderer.createContainer(container);
20+
21+
WordRenderer.updateContainer(element, node, null);
22+
23+
const stream = fs.createWriteStream(filePath);
24+
25+
await new Promise((resolve, reject) => {
26+
container.doc.generate(stream, Events(filePath, resolve, reject));
27+
});
28+
}
29+
30+
function Events(filePath, resolve, reject) {
31+
return {
32+
finalize: () => {
33+
console.log(`✨ Word document created at ${path.resolve(filePath)}.`);
34+
resolve();
35+
},
36+
error: () => {
37+
console.log('An error occurred while generating the document.');
38+
reject();
39+
},
40+
};
41+
}
42+
43+
export default render;
44+
45+
```
46+
47+
让我们看看这里发生了什么!
48+
49+
**`container`**
50+
51+
这是根节点实例(还记得我们调度器中的 `rootContainerInstance` 吗?)。
52+
53+
**`WordRenderer.createContainer`**
54+
55+
这个方法接受一个 `root` 容器并返回当前的 Fiber(已完成的 Fiber)。记住 Fiber 是一个包含相关组件输入和输出信息的 JavaScript 对象。
56+
57+
**`WordRenderer.updateContainer`**
58+
59+
这个函数接收元素、根容器、父组件、回调函数并执行一次顶层更新。
60+
这是根据当前 Fiber 和优先级(取决于上下文)调度更新来实现的。
61+
62+
最后,我们渲染所有子节点并通过创建写入流来生成 word 文档。
63+
64+
仍有疑惑?查看 [常见问题](./faq.md)
65+
66+
恭喜!你已成功完成本教程。本教程的完整源代码已在此代码库 ([src](./src)) 中提供。如果你想阅读整个源代码,请按照以下顺序 -
67+
68+
[`reconciler`](./src/reconciler/index.js) => [`components`](./src/components/) => [`createElement`](./src/utils/createElement.js) => [`render method`](./src/render/index.js)
69+
70+
如果你喜欢阅读本教程,请 watch 或 star 这个代码库,并在 [Twitter](http://twitter.com/NTulswani) 上关注我以获取更新。
71+
72+
感谢你阅读本教程!

0 commit comments

Comments
 (0)