-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
28 lines (28 loc) · 11 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html><html lang=""><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>concent · power your react</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="power your react"/><meta property="og:title" content="concent · power your react"/><meta property="og:type" content="website"/><meta property="og:url" content="https://concentjs.github.io/concent-site/concent-site/"/><meta property="og:description" content="power your react"/><meta property="og:image" content="https://concentjs.github.io/concent-site/concent-site/img/undraw_online.svg"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://concentjs.github.io/concent-site/concent-site/img/undraw_tweetstorm.svg"/><link rel="shortcut icon" href="/concent-site/img/favicon.ico"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"/><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><link rel="stylesheet" href="/concent-site/css/main.css"/><script src="/concent-site/js/codetabs.js"></script></head><body><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/concent-site/"><img class="logo" src="/concent-site/img/logo.png" alt="concent"/><h2 class="headerTitleWithLogo">concent</h2></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/concent-site/docs/doc-intro-what-is-concent" target="_self">Docs</a></li><li class=""><a href="/concent-site/docs/api-top-run" target="_self">API</a></li><li class=""><a href="/concent-site/docs/release-v1-1-26" target="_self">ChangeLog</a></li><li class=""><a href="https://github.com/concentjs/concent" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div><div class="homeContainer" style="background-size:cover;background-position:center center;background-image:url(/concent-site/img/bg1.jpg)"><div class="homeSplashFade"><div class="wrapper homeWrapper"><div class="inner"><h2 class="projectTitle" style="color:#fff"><a href="https://github.com/concentjs/concent" style="font-size:80px;color:#fff" target="blink">concent</a><small style="opacity:0.8">一个可靠且简单的react状态管理框架</small><small style="opacity:0.8">让ui与业务逻辑分离得更优雅、更容易维护与扩展</small></h2><div class="section promoSection"><div class="promoRow"><div class="pluginRowBlock"><div class="pluginWrapper buttonWrapper"><a class="button" href="docs/doc-intro-what-is-concent" target="blink">concent是什么</a></div><div class="pluginWrapper buttonWrapper"><a class="button" href="docs/api-top-run" target="blink">api文档</a></div><div class="pluginWrapper buttonWrapper"><a class="button" href="https://stackblitz.com/edit/cc-multi-ways-to-wirte-code" target="blink">渐进式重构</a></div></div></div></div></div></div></div></div><div class="mainContainer"><div class="container paddingBottom paddingTop"><div class="wrapper"><div class="gridBlock"><div class="blockElement fourByGridBlock imageAlignTop"><div class="blockImage"><img src="/concent-site/img/icon/00.png"/></div><div class="blockContent"><h2><div><span><p>0入侵成本接入</p>
</span></div></h2><div><span><p>concent不需要在app顶层包裹类似Provider的组件来向整个app注入store，你只需要将你的react类注册成到concent里，就接入了状态管理，setState会将状态写入到store</p>
</span></div></div></div><div class="blockElement fourByGridBlock imageAlignTop"><div class="blockImage"><img src="/concent-site/img/icon/01.png"/></div><div class="blockContent"><h2><div><span><p>核心api少且简单，功能强大</p>
</span></div></h2><div><span><p>顶层的核心api只有2个：run、register，run用于载入你的store定义，register负责将你的react组件注册为cc组件</p>
</span></div></div></div><div class="blockElement fourByGridBlock imageAlignTop"><div class="blockImage"><img src="/concent-site/img/icon/02.png"/></div><div class="blockContent"><h2><div><span><p>提供全局模块化的单一数据源</p>
</span></div></h2><div><span><p>concent的模块由state、reducer、watch、computed和init 5个部分组成，允许你按需定义，让你的ui视图与业务逻辑彻底解耦，代码组织结构同时兼顾优雅与简单</p>
</span></div></div></div><div class="blockElement fourByGridBlock imageAlignTop"><div class="blockImage"><img src="/concent-site/img/icon/03.png"/></div><div class="blockContent"><h2><div><span><p>状态的连接方式多样，消费粒度灵活</p>
</span></div></h2><div><span><p>每一个cc类可以观察自己所属模块的指定key的状态变化，同时也可以通过定义connect观察其他任意模块的任意key的状态变化</p>
</span></div></div></div><div class="blockElement fourByGridBlock imageAlignTop"><div class="blockImage"><img src="/concent-site/img/icon/04.png"/></div><div class="blockContent"><h2><div><span><p>支持多种方式提交变更状态</p>
</span></div></h2><div><span><p>除了最传统的setState，concent还允许用户调用dispatch(type:string, payload:object)以及invoke(fn:function, payload:object)去修改状态</p>
</span></div></div></div><div class="blockElement fourByGridBlock imageAlignTop"><div class="blockImage"><img src="/concent-site/img/icon/05.png"/></div><div class="blockContent"><h2><div><span><p>对组件扩展了很多强大的特性</p>
</span></div></h2><div><span><p>模块里定义的computed和watch属于模块级别的定义，concent还允许用户在类里定义类级别的$$watch、$$computed，以满足不同场景的个性化需求，同时所有cc实例都拥有$$emit&$$on能力。</p>
</span></div></div></div><div class="blockElement fourByGridBlock imageAlignTop"><div class="blockImage"><img src="/concent-site/img/icon/06.png"/></div><div class="blockContent"><h2><div><span><p>更友好的函数式组件支持</p>
</span></div></h2><div><span><p>concent提供CcFragment，让你临时的插入一个视图片断来消费多个模块的数据，还提供connectDumb函数包裹你的函数组件连接store</p>
</span></div></div></div><div class="blockElement fourByGridBlock imageAlignTop"><div class="blockImage"><img src="/concent-site/img/icon/07.png"/></div><div class="blockContent"><h2><div><span><p>渲染性能出众</p>
</span></div></h2><div><span><p>concent基于引用收集、观察key标记和状态广播原理工作，支持任意粒度的状态变更观察，渲染效率出众</p>
</span></div></div></div><div class="blockElement fourByGridBlock imageAlignTop"><div class="blockImage"><img src="/concent-site/img/icon/08.png"/></div><div class="blockContent"><h2><div><span><p>dom层级更少</p>
</span></div></h2><div><span><p>默认采用反向继承包裹你的组件，让你的react dom树的层级结构更少更干净</p>
</span></div></div></div><div class="blockElement fourByGridBlock imageAlignTop"><div class="blockImage"><img src="/concent-site/img/icon/09.png"/></div><div class="blockContent"><h2><div><span><p>支持中间件机制</p>
</span></div></h2><div><span><p>concent允许用户定义中间件拦截所有的数据变更提交记录，做额外的特殊需求处理，如时间旅行和状态回溯...</p>
</span></div></div></div><div class="blockElement fourByGridBlock imageAlignTop"><div class="blockImage"><img src="/concent-site/img/icon/10.png"/></div><div class="blockContent"><h2><div><span><p>动态配置模块</p>
</span></div></h2><div><span><p>除了在启动的时候载入用户规划好的各个模块组装好的store，concent还允许你在启动后动态配置模块，这样方便用户将组件和其模块定义放置在同一个文件夹，打包后发布到concent组件市场，方便别人直接引入你的concent组件</p>
</span></div></div></div><div class="blockElement fourByGridBlock imageAlignTop"><div class="blockImage"><img src="/concent-site/img/icon/11.png"/></div><div class="blockContent"><h2><div><span><p>模块克隆</p>
</span></div></h2><div><span><p>concent支持对已定义模块进行克隆与复制，复制内容包括其state、computed、watch、reducer和init，这些克隆出的模块在运行时是各自完全独立的，以满足用户抽象工厂函数动态创建属于不同模块的cc类</p>
</span></div></div></div></div></div></div><div style="padding:2px 15%;text-align:center"><h2 style="color:#0094bd">如何安装</h2><img style="width:100%;max-width:720px" src="/concent-site/img/install-concent.png"/></div><div style="padding:2px 15%;text-align:center"><h2 style="color:#0094bd">如何使用</h2><img style="width:100%;max-width:720px" src="/concent-site/img/cccc1-v2.png"/><img style="width:100%;max-width:720px" src="/concent-site/img/cccc2.png"/><img style="width:100%;max-width:720px" src="/concent-site/img/cccc3.png"/></div><div class="productShowcaseSection paddingBottom" style="text-align:center"><h2>生态与周边</h2><a href="https://github.com/concentjs/react-router-concent" target="blank">react-router-concent</a><div><span><p>让你的concent应用与react-router在一起工作，上手简单，理解容易</p>
</span></div><a href="https://github.com/concentjs/concent-plugin-loading" target="blank">concent-plugin-loading</a><div><span><p>集中管理各个模块的loading状态、模块下reducer函数的loading状态的插件</p>
</span></div><a href="https://github.com/concentjs/concent-plugin-redux-devtool" target="blank">concent-plugin-redux-devtool</a><div><span><p>桥接了redux-dev-tool的concent插件，让concent应用的状态变更同步到chrome的reduxDevTool插件，方便追溯状态变迁历史</p>
</span></div></div><div style="padding:2px 15%;text-align:center;background-color:#f0f0f0"><h2 style="color:#0094bd">零入侵成本接入</h2><img style="width:100%;max-width:720px" src="/concent-site/baseimg/blockHeader.png"/><br/><video muted="" style="width:100%;max-width:720px;transform:translateY(-6px)" controls="" autoplay=""><source src="video/cc-zero-cost.mov" type="video/mp4"/>Your browser does not support the video tag.</video><br/></div><div style="padding:2px 15%;text-align:center;background-color:#f0f0f0"><h2 style="color:#0094bd">渐进式重构，更多有趣的特性，友好的函数组件支持</h2><img style="width:100%;max-width:720px" src="/concent-site/baseimg/blockHeader.png"/><br/><video muted="" style="width:100%;max-width:720px;transform:translateY(-6px)" controls="" autoplay=""><source src="video/cc-demo-video.mov" type="video/mp4"/>Your browser does not support the video tag.</video><br/><a href="https://stackblitz.com/edit/cc-multi-ways-to-wirte-code" target="blink">示例地址</a></div><div class="productShowcaseSection paddingBottom"><h2>谁在使用</h2><p>concent已服务于它们</p><div class="more-users"><a class="button" href="/concent-site/users.html">More concent Users</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="copyright">Copyright © 2019 concentjs.org</section></footer></div></body></html>