React native redux 开发总结

2016-08-02  本文已影响67人  jinjiantong

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的空界面

上一篇下一篇

猜你喜欢

热点阅读