feat: React 纯函数

Chapter1 - iOS/1.69.md

@@ -7,3 +7,68 @@
 
 样式布局方面增加了 flexbox，这样子布局在移动端会非常方便，非常简单，
 
+
+
+## 经验小结
+
+最近在做企业内部工具，在提 MR 进行 Code review 的时候，reviewer 提了这样一个问题。将 `{this.renderOverview()}` 改为 `<renderOverview />` 这种写法，界面上更加直观些。我觉得公用组件或者页面这样做是可以的，但是页面上的某个部分 UI，其他页面不需要用到，所以不需要抽取出来。所以这个 code review 我没接受，跟她讲了一番，我维持了现状。
+
+背景是这样的，React + Redux 实现界面编写，Redux 负责状态的管理，页面一般是需要负责渲染和交互的，所以在代码编写上通过 Redux 的 `@connect` 将 state 绑定到当前页面的 `props` 上，因此界面的展示全部由 props 完成。页面的交互逻辑由各个组件内部 `dispatch` `action` 到 `reducer` 中进行运算。运算后的结果继续以 props 绑定到当前的页面上。代码如下
+
+
+```Javascript
+@connect(({ skynet }) => ({
+  ...skynet,
+}), dispatch => ({
+  getXXXLogDetail (***) {
+    return dispatch({
+      type: ListPre('***'),
+      payload: ***
+    })
+  }
+}))
+
+export default class Detail extends Component {
+  state = {
+    showDispatchPanel: false
+  }
+
+  get id() {
+    const { match } = this.props
+    return match.params.id
+  }
+
+  componentDidMount() {
+    const { getSkyLogDetail } = this.props
+    getXXXLogDetail({ groupHash: this.id})
+  }
+
+  s() {
+    const { skyLogDetail: { groupDTO = {} } } = this.props
+    // ...
+    return (
+        <div className={style.crashOverview}>
+          //***
+        </div>
+    )
+  }
+
+  render() {
+    return (
+      <div>
+        <Card className={style.container} bordered={false}>
+          {this.renderOverview()}
+        </Card>
+        {/* ... */}
+      </div >
+    )
+  }
+}
+
+```
+
+和 Reviewer 聊过后，她好像自己对这些东西不是很熟悉，比如 `<RenderOverView />` 这种形式需要改造为纯函数，且如果纯函数不能通过这种小写的方式去写，不然 React 在内部渲染会认为是一个**html 标签**。效果如下
+![渲染为标签](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/20200205-ReactPureComponent)
+
+最佳实践就是：自定义组件大写开头，小写开头会被认为是 html 标签。createElement(ComponentVariable)，createElement('renderOverview')。只是渲染，不需要内部改变 state 的话，纯函数非常适合做 UI 渲染，状态的事情由 redux 解决，最后通过 props 处理。
+

Chapter1 - iOS/1.74.md

@@ -1,4 +1,4 @@
-# 带你打造一套 APM 监控系统
+## 带你打造一套 APM 监控系统
 
 > APM 是 Application Performance Monitoring 的缩写，监视和管理软件应用程序的性能和可用性。应用性能管理对一个应用的持续稳定运行至关重要。所以这篇文章就从一个 iOS App 的性能管理的纬度谈谈如何精确监控以及数据如何上报等技术点
 

Chapter2 - Web FrontEnd/2.40.md

@@ -828,3 +828,14 @@ app.listen(33855)
 一些原则，一言以蔽之：该工具只做数据的查看、Mock 等工作，不做线上数据的干扰和生产。
 
 主要实现方式：通过 deviceID、ip 地址等与设备产生连接，将一切可以标准化的流程都抽象、自动化、比如性能调试和效率工具都整合到一起。
+
+
+
+## 九、 Electron 落地篇
+
+1. App 包体积大小是一个工程治理的一个永恒话题，伴随着 App 每一次版本发布的生命周期，App 包大小的意义就不再赘述，这里讲讲【App 包体积】这个命题如何与 Electron 结合起来。
+
+   App 包体积的治理方案可以查看 [App瘦身之道](./../ Chapter1\ -\ iOS/1.60.md) 这篇文章。目的是通过 Electron 这个技术打造有赞自己的移动潘多拉魔盒，囊括必要的各种能力，所以【App 包体积】这个命题可以结合 Electron，将包大小检测能力作为魔盒的能力之一。
+
+   
+

Chapter7 - Geek Talk/7.10.md

@@ -134,16 +134,16 @@ alias python3='/usr/local/Cellar/python/3.7.4/bin/python3'
 alias disableHomebrewUpdate="export HOMEBREW_NO_AUTO_UPDATE=true"
 
 
-# 终端科学上网相关的设置（开关开启后稍微有点延迟）
+# 终端查找资料相关的设置（开关开启后稍微有点延迟）
 
 function proxy_off(){
     unset ALL_PROXY
-    echo -e "已关闭代理"
+    echo -e "已关闭学习模式"
 }
 
 function proxy_on(){
     export ALL_PROXY=socks5://127.0.0.1:1081
-    echo -e "已开启代理"
+    echo -e "已开启学习模式"
 }
 
  
@@ -297,25 +297,25 @@ export HOMEBREW_NO_AUTO_UPDATE=true
 
 
 
-## 七、 Mac 终端如何科学上网
+## 七、 Mac 终端如何查找资料
 
-强烈安利一个我用过最快速、最便宜也就是性价比最高的科学上网工具。[链接](https://su.ybutech.com/aff.php?aff=362) 个人使用的也就是一年120元不到，一个月 60G 流量足够了，打开一些网站秒开。
+强烈安利一个我用过最快速、最便宜也就是性价比最高的查找资料工具。[链接](https://su.ybutech.com/aff.php?aff=362) 个人使用的也就是一年120元不到，一个月 60G 流量足够了，打开一些网站秒开。
 
-另外很多开发都需要终端下载一些资源，但是终端走的通道和浏览器不一样，所以浏览器可以科学上网，终端还是不可以，所以可以在 `.zshrc` 或者 `.bash_profile` 下加下面的脚本
+另外很多开发都需要终端下载一些资源，但是终端走的通道和浏览器不一样，所以浏览器可以查找资料，终端还是不可以，所以可以在 `.zshrc` 或者 `.bash_profile` 下加下面的脚本
 
 ```shell
 function proxy_off(){
     unset ALL_PROXY
-    echo -e "已关闭代理"
+    echo -e "已关闭学习模式"
 }
 
 function proxy_on(){
     export ALL_PROXY=socks5://127.0.0.1:1081
-    echo -e "已开启代理"
+    echo -e "已开启学习模式"
 }
 ```
 
-使用 proxy_on 开启终端科学上网模式、proxy_off 关闭终端科学上网模式。
+使用 proxy_on 开启终端查找资料模式、proxy_off 关闭终端查找资料模式。