最近五天疯狂coding,准备开源一个状态管理框架react-control-center
发布于 10 天前 作者 fantasticsoul 740 次浏览 来自 分享

论坛react用户多吗?在cnodejs处女宣布我的状态管理框架react-control-center准备开源了!做开源好累,api文档等都要精心维护,目前核心api都已经稳定了。 个人项目用起来还是挺happy的,经过一步步抽象,准备开源出来,也许有人问有了redux,有了mobx,为什么还需要react-controller-center,因为我作为redux用户, 还是觉得redux对代码的入侵挺大,在cc(react-control-center的简称)的世界里,一切数据都从state取,cc自动帮你广播你的状态到其他cc实例,引入cc对你现有的代码是0改动(如果你不需要启用cc的高级功能),你可以对已有项目渐进式的交给cc处理,局部替换,无论你的项目是否已经严重的redux化,cc并不会影响redux的工作, 好了说了这么多,在未来的几天内会公布一个示例代码工程,引导大家逐步了解cc和使用cc. … 此贴 to be continued!

8 回复

感觉很厉害的样子

redux 用着用着, mobx 觉得够用了。

mobx 用着用着 ,apollo-graphql 已经有状态管理了。

所以最后发现,还是 angular 稳定~

typescript rxjs (用service + apollo 实现状态管理)看似门槛高,实则是最终解决方案。

angular: 我在三年后等你。

@zuohuadong 嗯,我是redux重度使用者,知道它的痛点,也一直关注mobx,我觉得cc对现有的react状态管理框架是零入侵的,可以和redux,可以轻量的使用来实现组件间通信,也可以重度成dispatch, store, reducer的类redux模式,但是代码可以组织得更灵活、更优雅,等我写好示例代码工程,推到git,大家就明白了. 简单地说:

@cc.register('BooList',{sharedStateKeys:['color']})
export class BooList extends React.Components{
	constructor(props, context){
		super(props, context);
		this.state = {color:'red'};
	}
	changeMyState=()=>{
		const color = this.state.color === 'red' ? 'blue' : 'red';
		this.setState({color});
	}
	render(){
		return <button onClick={this.changeMyState}>click</button>
	}
}

export class BooList extends React.Components{
	constructor(props, context){
		super(props, context);
		this.state = {color:'red'};
	}
	changeMyState=()=>{
		const color = this.state.color === 'red' ? 'blue' : 'red';
		this.setState({color});
	}
	render(){
		return <button onClick={this.changeMyState}>click</button>
	}
}

以上两个类都能正常工作,可是被cc化的类,它的所有实例能够自动共享state里的sharedKey的值,并被cc触发更新
代码仅仅是加上一行注解,表示这个类要被cc控制,所以对现有要使用cc的代码改动是非常非常小的,有可能你只需要局部的几个类注册到cc而已,而不是想使用cc提供的一套类redux的编程体验!注意cc和redux最大的不同是,redux state从props向下派发,数据从props取,cc实例一起状态都从state取,共享的state就算组件被销毁,一但重新初始化也会被注入回来!cc有自己的store维护所有共享的状态

当然这是cc最最基础的功能,更多更多强大的功能等我上实例代码和教程工程到git

感谢开源,辛苦啦

所以 react 社区变得太快~ 跟不上

对于一些大型应用,我觉得还是得 angular 全家桶

自顶一手,新增单例模式的CCClass,为CCInstance新增storedStateKeys功能,新增生命周期函数 $$beforeSetState $$beforeBroadcast $$afterSetState, 一边写一遍脑海一遍闪现更多好玩的东东^_^

你这个入侵性感觉更大了, 看一下最新版本的 react hook mobx lite 实现的就非常好

回到顶部