wechat-weapp-redux
wechat-weapp-redux copied to clipboard
有几条个人观点想表达一下
貌似你是第一个想做Redux集成的, 看到其他几个issues, 有点想法, 不妥之处请批评.
- 这个Redux binding实现需要decouple, 上下文里期望global.getApp(), 测试不好写.
- 需不需要subscribe store不应该仅仅依赖有无传进mapState函数, 是不是要考虑App和Page的life-cycle?
- Provider在微信小程序情况下, 似乎没什么太大作用, 似乎只是引入了一个变量
之前在找weapp redux方案, 也看到过你的项目, 觉得不是我想要的, 所以这两天也自己写了一下connect实现 redux-weapp, 希望一起交流一下.
- global.getApp()确实不太好,但是用这个能帮助用户(使用这个binding库的人)屏蔽使用这个binding的细节,用户不用太关心在页面怎么去搞这个store。
- subscribe会在onload被监听,会在unload的时候remove,其他的生命周期,我觉得不用管。
- Provider的实质作用确实只是提供一个变量,但是它同时也是负责提供一个store插入的位置的标准格式,方便之后page的connect正确工作。
实际上这些代码是模仿react-redux的,因为react-redux我用了很长时间,觉得挺好使的,所以才直接模仿过来的。但是目前我并没有在大项目上使用。所以没办法做具体的完善。不过近期会开始弄一下。
👍
@xixilive 能请教一下,你目前怎么在小程序引入第三方库吗? 看了很多第三方的方案,都很大的改变了小程序原本的结构(文件组织结构和代码),目前还是想看看有没有更简单的办法。
我觉得开发时实时build就好了, AppA/Page代码里require bundle, 不需要复杂方案, 毕竟小程序本身就强调轻量级, 我目前还没有开始做具体的项目, 只是在了解小程序.
关于第2点,如果使用的是ui状态也放到redux下管理的话,tab 管理的那几个页不必要的setData会极为频繁。建议就是增加onShow/onHide的过滤处理
关于第二点,是否存在优化的必要,有待测试,推测 onHide 状态下的组件对于 setData 应该是不敏感的吧~
还有必要优化的~,https://mp.weixin.qq.com/debug/wxadoc/dev/framework/performance/tips.html
- 后台态页面进行 setData 当页面进入后台态(用户不可见),不应该继续去进行setData,后台态页面的渲染用户是无法感受的,另外后台态页面去setData也会抢占前台页面的执行。
不好意思最近都特别忙,所以一直没有更新代码。之后我会加上。
https://github.com/charleyw/wechat-weapp-redux/issues/10#issuecomment-341643770 如果不在onHide处理, 多个page使用redux, Android奔溃率提高很多, 修改参考:
/**
* 页面切换不会触发_onUnload, 会导致上一页面继续setData, 浪费性能,
* 如果存在多个页面Android机容易卡死
*/
const {
onShow: _onShow,
onHide: _onHide,
ready: _ready,
detached: _detached,
} = pageConfig
function onShow(options) {
this.store = app.store;
if (!this.store) {
warning("Store对象不存在!")
}
if(shouldSubscribe){
this.unsubscribe = this.store.subscribe(handleChange.bind(this, options));
handleChange.call(this, options)
}
if (typeof _onShow === 'function') {
_onShow.call(this, options)
}
if (typeof _ready === 'function') {
_ready.call(this, options)
}
}
function onHide() {
if (typeof _onHide === 'function') {
_onHide.call(this)
}
if (typeof _detached === 'function') {
_detached.call(this)
}
typeof this.unsubscribe === 'function' && this.unsubscribe()
}
/**
* 兼容Component情况
*/
const ready = onShow
const detached = onHide
return assign({}, pageConfig, mapDispatch(app.store.dispatch), {onShow, onHide, ready, detached})
#10 (comment) 如果不在onHide处理, 多个page使用redux, Android奔溃率提高很多, 修改参考:
/** * 页面切换不会触发_onUnload, 会导致上一页面继续setData, 浪费性能, * 如果存在多个页面Android机容易卡死 */ const { onShow: _onShow, onHide: _onHide, ready: _ready, detached: _detached, } = pageConfig function onShow(options) { this.store = app.store; if (!this.store) { warning("Store对象不存在!") } if(shouldSubscribe){ this.unsubscribe = this.store.subscribe(handleChange.bind(this, options)); handleChange.call(this, options) } if (typeof _onShow === 'function') { _onShow.call(this, options) } if (typeof _ready === 'function') { _ready.call(this, options) } } function onHide() { if (typeof _onHide === 'function') { _onHide.call(this) } if (typeof _detached === 'function') { _detached.call(this) } typeof this.unsubscribe === 'function' && this.unsubscribe() } /** * 兼容Component情况 */ const ready = onShow const detached = onHide return assign({}, pageConfig, mapDispatch(app.store.dispatch), {onShow, onHide, ready, detached})
你可以提个PR,我给你合了。我现在的工作基本上没办法维护这个项目了。