CONCENT

Get Started ➜

What can Concent offer you

极简核心api

run载入模块配置，register注册组件

0入侵成本接入

无需Provider包裹，被注册后的组件setState调用就接通store。

贴心模块配置

模块提供state、reducer、watch、computed和init 5个选项，支持按需定义，覆盖所有业务场景。

数据消费粒度灵活

支持组件跨多个模块消费数据，定义key级别的变更依赖。

渐进式

除setState之外，还支持dispatch、invoke提交数据变更，同时让ui视图与业务逻辑彻底解耦。

组件能力增强

支持实例级别computed、watch定义；支持组件emit&on；支持setup特性。

高度一致的编程体验

hoc、render props和hook 3种方式定义的组件均享有一致的api调用体验，相互切换代价为0。

渲染性能出众

基于依赖标记、引用收集和状态分发原理工作，内置renderKey、lazyDispatch、delayBroadcast等特性。

干净的dom层级

对于class组件，默认采用反向继承策略，让react dom树的层级结构保持简洁与干净。

扩展中间件与插件

支持定义中间件拦截所有的数据变更提交记录做额外处理，也支持自定义插件接收运行时的各种信号，增强concent能力。

去中心化配置模块

支持任意地方调用configure接口动态配置模块，方便就近配置模块，且能够独立打包组件发布npm。

模块克隆

支持对已定义模块进行克隆运行时是完全独立的新模块，满足抽象工厂函数等高维度抽象。

How to install

npm install concent --save

//or

yarn add concent

Let's start

import React, { Component } from 'react';
import ReactDom from 'react-dom';
import { run, register, useConcent, registerDumb } from 'concent';
run({
  foo: {// declared a module named 'foo'
    state: { greeting: 'hello concent' },
    reducer: { ... }
  }
})

// three ways of creating component, multi ways to change state
function HookFnComp() {
  const ctx = useConcent('foo');
  const { state: { greeting }, sync } = ctx;
  return <input value={greeting} onChange={sync('greeting')} />
}

const RenderPropsComp = registerDumb('foo')(...);

@register('foo')
class HocClassComp extends Component {...}

function App() {
  return (
    <>
      <HookFnComp />
      <HocClassComp />
      <RenderPropsComp />
    </>
  )
}
ReactDom.render(<App />, document.getElementById('root'));

Experience this demo in CodeSandbox [recommend]
Experience this demo in StackBlitz Explore more