美文网首页
React native redux 开发总结

React native redux 开发总结

作者: jinjiantong | 来源:发表于2016-08-02 16:50 被阅读67次

    1.关于state
    state是往下传递的
    父组件拥有所有子组件的所有state信息,但父组件不要改变他,每个组件管理自己的state
    父组件往子组件传递消息或触发事件通过state
    子组件监听自己所关心的state部分

    export default connect(state => ({
    state:state.myState,
    fatherState:state.fatherState
    })
    state 只在reducer里修改 组件里避免修改他的结构
    state 结构要清晰,直观的描述

    父组件的state变化导致所有的子组件刷新
    可以在shouldComponentUpdate 监听变化 决定是否刷新 提高效率

    this.setState 不会立刻刷新界面

    2.关于组件
    render 方法里尽量避免逻辑请求
    render 方法莫名的调用很多次,可在shouldComponentUpdate 里监听变化决定是否刷新 例如:给自己的数据源加个版本号 再shouldComponentUpdate方法里通过版本号的变化来决定是否刷新

    可以利用组件内state 分担reduce的state的臃肿

    组件的高度复用
    reactnative 组件化:
    显示组件:如自己封装的 listView ,scrollView,alertView
    业务组件: 如自己封装的 登录,注册,显示列表

    所有组件尽量不走action,reduce 尽量不维护state
    原因:每个复用的组件公用一个state 导致数据源无法区分
    可以通过加ID的方式区分数据源,很多情况下比较麻烦

    封装业务组件的时候尽量业务逻辑和显示分开写
    比如:loginModel.js 写逻辑部分 loginShow.js 写显示部分
    这样的好处是 调用组件的人可以轻松决定是否调用业务部分还是显示部分,有很大的灵活性

    布局:

    Paste_Image.png

    小技巧:实现上面布局 左有控件设置宽度 中间放一个flex:1的空界面

    相关文章

      网友评论

          本文标题:React native redux 开发总结

          本文链接:https://www.haomeiwen.com/subject/zopjdttx.html