# React Native 总结

## 学习方面

学过 React.js 之后你再去学习 React Native 会很简单，一些核心的东西理解之后会很简单。比如 React 中的单向数据流、虚拟 Dom、diff 算法、数据变动的批量更新机制、diff 之后的 UI 渲染。


样式布局方面增加了 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 处理。