diff --git a/.DS_Store b/.DS_Store index f39478d..a728db4 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/Chapter1 - iOS/1.69.md b/Chapter1 - iOS/1.69.md index 27211e5..056bcbb 100644 --- a/Chapter1 - iOS/1.69.md +++ b/Chapter1 - iOS/1.69.md @@ -7,3 +7,68 @@ 样式布局方面增加了 flexbox,这样子布局在移动端会非常方便,非常简单, + + +## 经验小结 + +最近在做企业内部工具,在提 MR 进行 Code review 的时候,reviewer 提了这样一个问题。将 `{this.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 ( +
+ //*** +
+ ) + } + + render() { + return ( +
+ + {this.renderOverview()} + + {/* ... */} +
+ ) + } +} + +``` + +和 Reviewer 聊过后,她好像自己对这些东西不是很熟悉,比如 `` 这种形式需要改造为纯函数,且如果纯函数不能通过这种小写的方式去写,不然 React 在内部渲染会认为是一个**html 标签**。效果如下 +![渲染为标签](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/20200205-ReactPureComponent) + +最佳实践就是:自定义组件大写开头,小写开头会被认为是 html 标签。createElement(ComponentVariable),createElement('renderOverview')。只是渲染,不需要内部改变 state 的话,纯函数非常适合做 UI 渲染,状态的事情由 redux 解决,最后通过 props 处理。 + diff --git a/Chapter1 - iOS/1.74.md b/Chapter1 - iOS/1.74.md index 9712c4b..e00c293 100644 --- a/Chapter1 - iOS/1.74.md +++ b/Chapter1 - iOS/1.74.md @@ -1,4 +1,4 @@ -# 带你打造一套 APM 监控系统 +## 带你打造一套 APM 监控系统 > APM 是 Application Performance Monitoring 的缩写,监视和管理软件应用程序的性能和可用性。应用性能管理对一个应用的持续稳定运行至关重要。所以这篇文章就从一个 iOS App 的性能管理的纬度谈谈如何精确监控以及数据如何上报等技术点 diff --git a/Chapter2 - Web FrontEnd/2.40.md b/Chapter2 - Web FrontEnd/2.40.md index 9638baf..e6877d2 100644 --- a/Chapter2 - Web FrontEnd/2.40.md +++ b/Chapter2 - Web FrontEnd/2.40.md @@ -827,4 +827,15 @@ app.listen(33855) 一些原则,一言以蔽之:该工具只做数据的查看、Mock 等工作,不做线上数据的干扰和生产。 -主要实现方式:通过 deviceID、ip 地址等与设备产生连接,将一切可以标准化的流程都抽象、自动化、比如性能调试和效率工具都整合到一起。 \ No newline at end of file +主要实现方式:通过 deviceID、ip 地址等与设备产生连接,将一切可以标准化的流程都抽象、自动化、比如性能调试和效率工具都整合到一起。 + + + +## 九、 Electron 落地篇 + +1. App 包体积大小是一个工程治理的一个永恒话题,伴随着 App 每一次版本发布的生命周期,App 包大小的意义就不再赘述,这里讲讲【App 包体积】这个命题如何与 Electron 结合起来。 + + App 包体积的治理方案可以查看 [App瘦身之道](./../ Chapter1\ -\ iOS/1.60.md) 这篇文章。目的是通过 Electron 这个技术打造有赞自己的移动潘多拉魔盒,囊括必要的各种能力,所以【App 包体积】这个命题可以结合 Electron,将包大小检测能力作为魔盒的能力之一。 + + + diff --git a/Chapter7 - Geek Talk/7.10.md b/Chapter7 - Geek Talk/7.10.md index 80b2e15..6be57a0 100644 --- a/Chapter7 - Geek Talk/7.10.md +++ b/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 关闭终端查找资料模式。 diff --git a/assets/20200205-ReactPureComponent b/assets/20200205-ReactPureComponent new file mode 100644 index 0000000..b078274 Binary files /dev/null and b/assets/20200205-ReactPureComponent differ