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

论坛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 回复

感觉很厉害的样子

6

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完全是两个不同维度的东西哦

1

@fantasticsoul 文档看着太难受了

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

@justjavac 准备开始一步一步写教程了，期待反馈 知乎：https://zhuanlan.zhihu.com/p/55011313 掘金:https://juejin.im/post/5c3ee445f265da6126386416

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

感觉和阿里的 dva 有点像

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

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

回到顶部