【自荐】React开发框架, Concent V2

项目推荐

项目地址：https://github.com/concentjs/concent
类别：JS
项目后续更新计划：
- conc 命令行工具，一键生成concent模板项目 [todo]
- ssr支持 [done]
- 国际化文档 [todo]
项目描述：
- 内置依赖收集，一个可预测、0入侵、渐进式、高性能的react开发框架!
推荐理由：通过Proxy代理react状态，获得运行时的依赖收集特性实现最小粒度的渲染，达到精确更新目的，同时Concent除了提供完善的类型文档，还有setup功能(composition api)、分离式配置模块、适合数组或map渲染的高性能renderKey机制、computed&watch、统一类组件和函数组件生命周期等更多强大特性等你来探索。
示例代码：

import { run } from 'concent';

run({ counter: {// 声明一个名为'counter'的模块 state: { num: 1, numBig: 100 }, // 定义状态 reducer: { // p: payload, m: moduleState addOne: (p, m)=> ({num: m.num + 1}), async add(p, m){ await delay(1000); return {num: m.num + p}; } }, computed: {// 定义computed，注意参数列表里解构时就确定了依赖 numx2: ({num})=> num * 2,// 此函数的依赖是num numBigAddNumx2: ({numBig}, o, f)=> numBig + f.cuVal.numx2,// 复用计算结果，此函数的依赖是numBig、num numSumBig: ({num, numBig})=> num + numBig, // 此函数的依赖是num、numBig }, }, // 可以在这里继续声明或添加其他模块 });

@register('counter') class DemoCls extends React.Component{ // 此时setState提交的状态触发自己重渲染 // 同时也会触发其他同样属于coutner模块的实例且消费了具体数据的实例重渲染 // 或调用 this.ctx.mr.{xxxMethod} 触发moduleReducer的逻辑去修改状态 inc = ()=> this.setState({num: this.state.num + 1})

render(){ // 这里读取了num，意味着当前实例的依赖key列表是 ['num'] // 如果是条件渲染则推荐延迟解构，以便锁定最小范围的数据依赖 const { num } = this.state; // render logic } }

function DemoFn(){ const { state, setState, mr } = useConcent('counter'); const inc = ()=> setState({num: state.num + 1}); // 或者通过 mr.{xxxMethod} 直接绑定在 dom的onClick事件上 // render logic }



- 截图：
[组合api](https://stackblitz.com/edit/react-wpzgqd?file=index.js)
![](https://raw.githubusercontent.com/fantasticsoul/assets/master/img/cc/hello.gif)
[精确更新](https://codesandbox.io/s/dep-collection-uiqzn?file=/src/App.js)
![](https://raw.githubusercontent.com/fantasticsoul/assets/master/article-img/recoil-vs-concent/r5.gif)

## 备注（这一段请删掉，仅用于说明）
https://hellogithub.com/periodical/search/?q=concent 可以搜到concent，当时推荐还是v1版本，v1强调的是依赖标记，而v2版本已进行彻底的重构，和v1已经完全的不同，v2启用proxy来达到运行时依赖收集的功能，无需依赖标记，所以这里重新提了一个自荐哦。

521xueweihan / HelloGitHub

【自荐】React开发框架, Concent V2 #1341

项目推荐