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 处理。
+