8000 feat(docs): add container-presentational-pattern & git stash (#105) · chodocs/chodocs@6035475 · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Commit 6035475

Browse files
Chocolate1999Chocolate1999
authored
feat(docs): add container-presentational-pattern & git stash (#105)
1 parent 6d9cf04 commit 6035475

File tree

5 files changed

+147
-8
lines changed

5 files changed

+147
-8
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,4 +34,4 @@ Thank you to all the people who already contributed to my project!
3434

3535
## 📄 License
3636

37-
[MIT License](https://github.com/chodocs/chodocs/blob/main/LICENSE) © 2022-PRESENT [Chocolate](https://github.com/Chocolate1999)
37+
[MIT License](https://github.com/chodocs/chodocs/blob/main/LICENSE) © 2022-PRESENT [Choi Yang](https://github.com/Chocolate1999)

‎docs/.vitepress/config.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export default {
3131
{ text: '🔧 编程工具', link: '/tool/' },
3232
{ text: '✏️ 随笔', link: '/essay/' },
3333
{ text: '🌱 青葱岁月', link: '/green/ch' },
34-
{ text: 'Changelog', link: 'https://github.com/chodocs/chodocs/releases' },
34+
{ text: '🎉 更新日志', link: 'https://github.com/chodocs/chodocs/releases' },
3535
],
3636
},
3737
],

‎docs/.vitepress/sidebar.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export default {
2121
{ text: '代理模式', link: '/patterns/proxy-pattern/' },
2222
{ text: '提供者模式', link: '/patterns/provider-pattern/' },
2323
{ text: '原型模式', link: '/patterns/prototype-pattern/' },
24+
{ text: '容器/演示模式', link: '/patterns/container-presentational-pattern/' },
2425
],
2526
},
2627
{

‎docs/memo/git-command/index.md

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -59,10 +59,6 @@ rebase 命令很强大，`git rebase -i HEAD~[num]` 和 `git pull --rebase` 等
5959
git reflog
6060
```
6161

62-
## 借助工具
63-
64-
vscode `GitLens` 插件挺好用的。
65-
6662
## git commit 提交规范
6763

6864
这里以 coding 工作台为例子，其它代码托管平台可能需要修改一下正则。
@@ -86,7 +82,6 @@ echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc
8682

8783
> 参考阅读 [Commit Message](https://coding.net/help/docs/ci/practice/lint/git-commit.html#install)
8884
89-
9085
第二种：
9186

9287
更花哨一点，使用 [git-cz](https://github.com/streamich/git-cz)
@@ -100,4 +95,28 @@ npx git-cz
10095

10196
npm install -g commitizen
10297
npm install --save-dev git-cz
103-
```
98+
```
99+
100+
## git stash
101+
102+
平常需要切换分支，但有时候又不想要立即 commit 上去，于是可以通过 `git stash` 备份一下，主要的一些命令如下：
103+
104+
备份当前改动
105+
106+
```sh
107+
git stash
108+
```
109+
110+
查看备份列表
111+
112+
```sh
113+
git stash list
114+
```
115+
116+
恢复备份的改动
117+
118+
```sh
119+
git stash pop
120+
```
121+
122+
> 更多内容可参考 [git-stash 用法小结](https://www.cnblogs.com/tocy/p/git-stash-reference.html)

‎docs/patterns/container-presentational-pattern/index.md

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
---
2+
author: "Choi Yang"
3+
---
4+
5+
# 容器/演示模式
6+
7+
> 通过将视图与应用程序逻辑分离来实现关注点分离。
8+
9+
## Demo
10+
11+
因为个人觉得这个模式的大致概念比较清晰，我们直接来看下样例：
12+
13+
<iframe src='https://stackblitz.com/edit/container-presentational-pattern?embed=1&file=src/DogImagesContainer.js'></iframe>
14+
15+
上述示例中，我们通过 api 获取了 6 张狗狗的图片，并进行了渲染展示。
16+
17+
可以发现，我们写了两个组件，分别是 `DogImagesContainer.js` 和 `DogImages.js`，源码如下：
18+
19+
::: code-group
20+
21+
```jsx [DogImagesContainer.js]
22+
import React, { useState, useEffect } from "react";
23+
import DogImages from "./DogImages";
24+
25+
const DogImagesContainer = () => {
26+
const [dogs, setDogs] = useState([]);
27+
28+
useEffect(() => {
29+
const fetchFn = () => {
30+
fetch("https://dog.ceo/api/breed/labrador/images/random/6")
31+
.then((res) => res.json())
32+
.then(({ message }) => setDogs(message));
33+
};
34+
fetchFn();
35+
}, []);
36+
37+
return <DogImages dogs={dogs} />;
38+
};
39+
40+
export default DogImagesContainer;
41+
```
42+
43+
```jsx [DogImages.js]
44+
import React from "react";
45+
46+
export default function DogImages({ dogs }) {
47+
return dogs?.map((dog, i) => <img src={dog} key={i} alt="Dog" />);
48+
}
49+
```
50+
51+
:::
52+
53+
根据设计模式的名称，为了实现分离关注点，我们的组件也应该分两部分：
54+
55+
- Container Components（关心显示给用户什么数据的组件，在本例中，它正在获取狗的图像。）
56+
57+
- Presentational Components（关心数据如何显示给用户的组件。在本例中，它在渲染狗的图像列表。）
58+
59+
> 获取狗的图像属于应用程序逻辑，而拿到数据显示图像属于视图这块的处理。
60+
61+
下面我们来逐一介绍容器组件和演示组件。
62+
63+
## 容器组件
64+
65+
上述例子 `DogImagesContainer.js` 即是一个容器组件，容器组件的主要功能是将数据传递给它们所包含的演示组件当中。
66+
67+
容器组件通常不会关心除演示组件之外的其他组件，因为它们本身不呈现任何东西，所以通常也不包含任何样式。我们在上述代码中也可以看到，`DogImagesContainer.js` 中并没有引用样式代码。
68+
69+
在代码中，我们通过 `fetch` 获取了狗狗图像数据，将数据传递给了演示组件，即：
70+
71+
```js
72+
<DogImages dogs={dogs} />
73+
```
74+
75+
## 演示组件
76+
77+
上述例子 `DogImages.js` 即是一个演示组件，主要功能是通过 `props` 接受数据，将数据以我们希望的方式显示，包括样式。
78+
79+
而对于这个数据，我们只需要接受就行了，无需修改，都是处理好的数据结构。
80+
81+
通常，演示组件通常是无状态的，除非是改这个 ui 而需要添加状态，而从 `props` 中拿到的数据也不会去修改。
82+
83+
## Hooks
84+
85+
在许多情况下，我们可以通过 React Hooks 方式来代替容器/演示模式，通过 Hooks 我们无需容器来提供 `state`。
86+
87+
这样，我们就可以直接去掉 `DogImagesContainer.js` 这个组件了，而是通过 hooks 方式来编写数据获取的逻辑，如下代码所示：
88+
89+
```jsx
90+
export default function useDogImages() {
91+
const [dogs, setDogs] = useState([]);
92+
93+
useEffect(() => {
94+
fetch("https://dog.ceo/api/breed/labrador/images/random/6")
95+
.then((res) => res.json())
96+
.then(({ message }) => setDogs(message));
97+
}, []);
98+
99+
return dogs;
100+
}
101+
```
102+
103+
通过以上代码，我们就可以简化之前的 demo 中的代码，我们直接在演示组件中使用 hook 试试，如下示例：
104+
105+
<iframe src='https://stackblitz.com/edit/container-presentational-pattern-hooks?ctl=1&embed=1&file=src/useDogImages.js'></iframe>
106+
107+
上述示例中，我们使用了 `useDogImages` hook，也做到了逻辑和视图上的分离，显然，这节省了设计模式所需的容器组件。
108+
109+
## 总结
110+
111+
优点：
112+
113+
- 使用容器/演示模式可以做到视图和逻辑上的分离，视图组件只需要负责 UI 的渲染，而容器组件则负责应用程序的状态和数据，各司其职。
114+
- 因为演示组件不会修改数据并且一般是无状态的，我们可以很好的进行复用，例如，基于数据的不同，我们可以实现应用程序换肤效果等。
115+
- 测试演示组件也很容易，毕竟它们是纯函数，我们无需模拟数据的存储，并且知道它们是根据我们传递的数据不同而呈现不同的内容。
116+
117+
不足：
118+
119+
虽然容器/演示模式能够让逻辑和视图关注点分离，但是上文中我们使用 Hooks 也达到了同样的效果，那么其实我们没必要再多写一个容器组件，组件的嵌套多了看起来不够简洁。

0 commit comments

Comments
 (0)
0