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

论坛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!

22 回复

感觉很厉害的样子

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 实现的就非常好

@ilovedesert001 no,真的没有入侵性,关键看你怎么使用,我提了一个关键字,渐进性的使用,当你要使用到里面的全部功能时,才会变化较大,但是支持你局部使用, 现已更新到1.1.26版本了,支持computed属性,下一个版本支持$$emit, $$on, 我自己写了一个非常有趣的demo演示基础api,但是由于工作较忙还没有推到git,写的时候就知道react的hook功能了,其实巧合的这个项目最初就叫react-hook,但是看到react的hook后改名为react-control-center了,等我把引导项目推到git,你会知道管理状态还可以这样轻松和好玩,我基于creat-react-app和antd-pro都有加入cc,写了很多有趣的例子,一定会推到git的,现在git的文档已经非常非常老了,那个图也不太能完全概括cc的核心工作流程了,后期支持在cc实例里定义$$test函数,会有更多有趣的玩法,在console只需要输入cc.test()_,自动帮你跑玩所有的ui测试用例,当然computed和emit等功能灵感从vue来,但是在cc使用完全感觉不到别扭,因为cc接管了你的引用且模块化的划分他们,能够精准的计算出需要更新的组件,渲染性能也会非常高效

自顶一手,期望更多人使用和提修改意见,目前已近完成了所有想要的基础功能了,会先用在公司的内部项目上,一个2年前的基于react15 webpack1.13 redux 搭建的项目,成功的让cc运行在其中,新的功能模块完全基于cc实现,如下图所示,这个目录的渲染全部被cc接管,布局组件layout和业务组件component全部会和cc打通,纯的视图组件后面会放到pure-componnet文件夹下 image.png 实例项目已经推到git https://github.com/fantasticsoul/rcc-simple-demo, 基于react-creat-app改造而来,后面会再发布一个基于antd-pro改造而来的项目,我自己用起来无比爽快已经了,暂别redux,拥抱cc,也是不错的选择哦,你会拥有更棒的状态管理和组件通信体验

顶一顶,期待建议

就问你没有 dev-tools 怎么用

@Binaryify 目前暂时没有dev-tool,cc已经store绑定到window.sss下,cc顶层函数绑定到window.cc下,你运行https://github.com/fantasticsoul/rcc-simple-demo起来后,可以打开console,输入sss回车直接查看状态,输入cc直接呼叫方法改变视图,后期会引入immutable.js让cc拥有回放或者时间旅行功能,不过目前不考虑这些,重要的稳定核心api,刚刚又发布了一个重大版本,支持cc类观察多个模块的数据变化了,不过数据需要从this.$$propState里获取,在最新rcc-simple-demo里已做演示

我已经开始使用 apollo 了

@justjavac 你可以把 https://github.com/fantasticsoul/rcc-simple-demo 跑起来后,花个10分钟了解一下,和apollojs完全是两个不同维度的东西哦

@fantasticsoul 文档看着太难受了

gitgub的md没有gitee强大,有些标签没有识别出来,/(ㄒoㄒ)/~~

老哥,你的文档真的写的太差了,回复别人也是一大段一大段的回复,md里敲两个回车就换行了呀…

感觉和阿里的 dva 有点像

@dkvirus 看起来像,其实非常不一样,尝试着运行一下 https://github.com/fantasticsoul/rcc-simple-demo,就知道区别了

@cctv1005s 嗯,有待继续改进,期待你运行https://github.com/fantasticsoul/rcc-simple-demo,就知道cc的强大之处了,git仓库的md又重新整理了一下,简洁了许多

回到顶部