React native redux 开发总结
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的空界面