聊一聊cc的变化侦测和hook实现

前言

最近浏览到vue开发者尤雨溪以前的采访文章，感触颇深，其中有一段问答大概是这样：

采访：是什么驱使你开发 Vue.js 的？
答：我想，我可以只把我喜欢的部分从 Angular 中提出来，建立一个非常轻巧的库，不需要那些额外的逻辑。我也很好奇 Angular 的源码到底是怎么设计的。我最开始只是想着手提取 Angular 里面很小的功能，如声明式数据绑定。Vue 大概就是这么开始的。用过一段时间之后，我感觉我做的东西还有点前途，因为我自己就很喜欢用。于是我花了更多的时间把它封装好，取了一个名字叫做 Vue.js，我记得那时还是 2013 年。后来我想『我花了这么多时间，不能只有我一个人用，我应该和别人分享，他们也会感觉到 Vue 的好处，他们也会喜欢上 Vue 的。』

尤大的确非常直接，因为我自己喜欢用，所以我想分享给多的人，想让更多的人喜欢...，这是每一个开源作者由衷的体验，从开源日期来说，react-control-center的确非常非常的短，有一些朋友在成为种子用户之前，都会问我一个问题，

为什么有了redux, 或者说dva、rematch等更好的redux wrapper，以及mobx这样强大的状态管理框架，还要写一个react-control-center呢？这样一个轮子是不是有一点多余

在回答这个问题之前，我想了下，尤大的那一段采访回答的确非常符合我的心境，首先呢，我们的项目也在大量的过使用redux或者dva,我自己私底下也了解过mobx，可是切换为react-control-center的确让我们的代码更加简洁和更容易维护与扩展，而且比redux多了很多非常好玩的特性，因为react-control-center是基于react的setState做了增强，所以不存在黑魔法，只是让你更优雅的调用setState而已哦，接下来我聊一聊变化侦测，再结合setState你一定会明白，或许我们不需要redux这种方式，而是回归react本质去做状态管理，一样可以高效而简单，但是却可以更加强大和有趣。

变化侦测

pull & push

变化侦测这个词在尤大的采访中提过不少次，我们同时也能看到尤大提到了变化侦测分为两种pull和push，这里我结合我对尤大的理解的解读和从我自己的视觉来谈一谈pull和push，本质上来说，这是两种不同的驱动方式来驱动数据和视图保持同步，只不过前者pull对于UI框架来说被动触发，react里暴露一个setState入口来让开发人工的提交要改变的数据，这样react才知道数据变化了，push对于UI框架来说主动触发，对于vue来说，你为组件声明的data都被转换成了observable对象，所以当你使用this.username='xxx'的时候，vue能够主动侦测到你的数据发生了变化，数据和视图浑然一体。
这两种方式没有谁更好谁更优秀一说，性能上不会成为你评判该采用谁是最优解的标准，更多的我们从工程性的角度来说，视图渲染逻辑和业务逻辑必然耦合在一起，所以才有vuex、redux类似的方案，不只是帮你解决状态管理的问题，同时也帮你分离了业务逻辑和视图渲染逻辑。

cc接管setState后发生了什么

让我们把目光回到pull和react的setState上，setState的参数其实很简单，你只需要提交你要修改的partialState给react，react就触发更新了。
对于cc而言，将原始的setState保存为reactSetState，然后用户调用的setState已不再是最初的那个句柄，而是cc自己的实现了，我们聊cc的setState实现步骤之前，看看register函数的参数签名。

register(ccClassKey:string, registerOption?:{module?:string, sharedStateKeys?:Array<string>|'*', globalStateKeys?:Array<string>|'*'});

当你的一个普通的react class注册为cc class的时候，通过设定registerOption.module告诉cc这个cc class属于哪个module,通过设定registerOption.sharedStateKeys告诉cc这个cc class的所有实例会共享那些sharedStateKey的值变化，所以cc内部的上下文会维护的两个map，第一个是module_ccClassKeys_，键就是模块名，值就是这个模块下有哪些ccClassKey，第二个是ccClassKey_ccClassContext_，键就是ccClassKey，值就是ccClassContext，ccClassContext内部维护一个引用数组，表示当前ccClassKey已经实例化了多少个cc instance。
现在我们看一看如下的代码片段示意：

//假设store.foo如下：
store:{
    foo:{
        name:1,
        age:2,
        grade:3,
    }
}

class Foo extends Component{
    //constructor略
    onNameChange = (e)=>{
        this.setState({name:e.currentTarget.value});
    }
    onAgeChange = (e)=>{
        this.setState({name:e.currentTarget.value});
    }
    render(){
        const {name, age} = this.state;
        return (
            <Fragment>
                <input onChange={this.onNameChange}/>
                <input onChange={this.onAgeChange}/>
            </Fragment>
        );
    }
}
const CcFoo1 = cc.register('Foo1', {module:'foo', sharedStateKeys:['name']})(Foo);
const CcFoo2 = cc.register('Foo2', {module:'foo', sharedStateKeys:'*'})(Foo);

//in your App.js
render(){
    return (
        <div>
            <Foo />
            <Foo />
            <CcFoo1 />
            <CcFoo1 />
            <CcFoo2 />
            <CcFoo2 />
        </div>
    );
}

Foo的实例其实孤立的，它们之间的state是独立维护的，CcFoo1尽管属于foo模块，但是只是标记了sharedStateKeys包含name，所以只有name的值变化是共享到了foo模块的状态里，CcFoo2标记了sharedStateKeys为*，所以foo模块的所有状态变化都会被cc同步到CcFoo2的所有实例上。

那我们现在来具体化这个过程，如果CcFoo1的一个实例改变了name，当你调用setState的时候，cc先调用当前实例的reactSetState触发UI渲染行为。
然后你提交的{name:'xxx'}经过cc分析，当前实例所属的cc类Foo1下还有另一个实例CcFoo1_ins2，所以除了调用reactSetState把状态设置到当前实例，也会调用CcFoo1_ins2.reactSetState把状态设置回去。
同样的通过module_ccClassKeys_这个映射关系，cc发现还有另一个cc类Foo2也属于foo模块，然后cc会通过ccClassKey_ccClassContext_取出这个cc类的其他实例，遍历的调用reactSetState把状态设置到哪些具体的实例上，这样一个过程，在cc内部成为状态广播，看到了吗？原理非常简单，同时也非常高效，没有angular那样的生成一个个watcher做脏检查，仅仅只是找到正确的引用，提取合适的状态，然后触发reactSetState，便结束了，这便是为什么我说react-control-center只是让setState更加智能而已。

Foo ins1 --- name changed ---> Foo ins2
Foo ins2 --- name changed ---> Foo ins2

CcFoo1 ins1 --- name changed ---> CcFoo1 ins1
                            |--> CcFoo1 ins2
                            |--> CcFoo2 ins1
                            |--> CcFoo2 ins2
                            
CcFoo2 ins1 --- age changed ---> CcFoo2 ins1
                            |--> CcFoo2 ins2

more than setState

当然cc不只是提供setState这个入口让你去修改，因为通常能够修改数据之前都会有不少的业务逻辑，最后才到setState这一步触发UI渲染，所以cc通过更强大、更灵活的api让你不在和setState打交道。

dispatch(action:Action | reducerDescriptorStr, payload?:any)，dispatch的本质是找到你定义的reducer函数去执行，执行完之后返回一个新的partialState就完了，其它的一切交个cc搞定。
cc并不强制reducer函数返回新的partialState，提供一个dispatch句柄让你组合多个reducer函数执行，串行或者是并行任君选择，是不是非常的惬意^_^

//reducer in StartupOption
cc.startup({
    reducer:{
        'foo':{
            changeName({payload:name}){
                return {name};
            },
            async changeNameCool({dispatch, payload:name}){
                await dispatch('changeName', name);
                // await dispatch(); 组合多个函数串行执行
            }
        }
    }
})

class Foo extends Component{
    //constructor略
    onNameChange = (e)=>{
        //this.$$dispatch({type:'changeName', payload:e.currentTarget.value});
        //推荐这种更简便的写法
        this.$$dispatch('changeName', e.currentTarget.value);
    }
    changeNameCool = ()=>{
         this.$$dispatch('changeNameCool', e.currentTarget.value);
    }
    render(){
        const {name, age} = this.state;
        return (
            <Fragment>
                <input value={name} onChange={this.onNameChange}/>
                <input value={name} onChange={this.changeNameCool}/>
            </Fragment>
        );
    }
}

invoke(userFn:function, …args)，如果你讨厌走dispatch去命中reducer函数这个套路，cc同样允许你调用自定义函数，invoke默认改变自己实例所属模块的状态。
effect(module:string, userFn:function, …args)，你需要改变其他模块的状态，cc同样支持。
打破了redux的套路，状态追踪怎么办？其实这是一个你无须担心的问题，你调用dispatch、invoke、effect等这些句柄时，都是暗自携带者上下文的。

1 包括这一次调用提交的状态
2 这此调用时哪一种方式触发的，用户可以使用setState的哦…
3 这次调用是从哪个实例产生的

所以你想一想，是不是比redux一个孤独的action type能给你更多的信息？当然状态管理只是cc里该做的一部分，同样的更友好的副作用书写方式，类vue的computed、watch、emit&on等更好玩的特性才是cc要帮助你用更优雅的方式书写react。

hook

新版的react已经发布了，hook已成为稳定版的api，facebook在此基础上提出了新的组件划分方式：class component和function component，注意到没有，不再说笨组件和智能组件了，因为function component可以使用hook，它不再是笨蛋了…
function component可以管理自己状态，甚至可以通过useContext实现不同的function component之间共享状态，看起来class component慢慢会被取代吗？
这一点目前个人不敢下结论，但是在cc的世界里，因为有了CcFragment的存在，能够让你不用为了使用一些现有的store和reducer组合一个新的视图而去抽一个class出来的不必要局面，你可以达到快速复用现有的stateless component包裹在CcFragment，同样的考虑到用户需要在CcFragment管理自己的状态，cc最新版本已支持在CcFragment里使用hook，这不是一个对react hook的包裹，而是独立的实现，所以你依然可以在react 15里使用，api命名和使用效果和react hook保持100%一致，当然使用规则也是一样的：不要在循环,条件或嵌套函数中调用Hook，注意哦，cc的hook仅仅限在CcFragment内使用。

 <CcFragment connect={{'counter/*':''}} render={({ hook, propState }) => {
    const [count, setCount] = hook.useState(0);
    hook.useEffect(()=>{
      document.title = 'count '+count;
      return ()=>{
        document.title = 'CcFragment unmount ';
      }
    });
    //如果只想让effect函数在didMount的执行，可以写为 hook.useEffect(fn, []);
    //如果只想让effect函数依赖count值是否变化才执行，可以写为 hook.useEffect(fn, [count]);
	
    return (
      <div style={{border:'6px solid gold', margin:'6px'}}>
        <h3>show CcFragment hook feature</h3>
        {propState.counter.count}
        <hr />
        {count}
        <button onClick={() => setCount(count + 1)}>+</button>
        <button onClick={() => setCount(count - 1)}>-</button>
      </div>
    )
  }} />

有了hook，CcFragment不仅能打通store，也能够独立管理自己的状态，是不是更可爱了呢？
hook实现如下，其实正如react hook所说，不是魔法，只是数组…

    // hook implement fo CcFragment
    const __hookMeta = {
      isCcFragmentMounted:false,
      useStateCount: 0,
      useStateCursor: 0,
      stateArr:[],
      useEffectCount: 0,
      useEffectCursor: 0,
      effectCbArr:[],
      effectSeeAoa:[],// shouldEffectExecute array of array
      effectSeeResult:[],// collect every effect fn's shouldExecute result
      effectCbReturnArr:[], 
    }
    this.__hookMeta = __hookMeta;
    const hook = {
      useState: initialState => {
        let cursor = __hookMeta.useStateCursor;
        const stateArr = __hookMeta.stateArr;
        __hookMeta.useStateCursor++;
        if (__hookMeta.isCcFragmentMounted === false) {//render CcFragment before componentDidMount
          __hookMeta.useStateCount++;
          stateArr[cursor] = initialState;
        } else {
          cursor = cursor % __hookMeta.useStateCount;
        }

        const setter = newState => {
          stateArr[cursor] = newState;
          this.cc.reactForceUpdate();
        }
        return [stateArr[cursor], setter];
      },
      useEffect: (cb, shouldEffectExecute) => {
        let cursor = __hookMeta.useEffectCursor;
        __hookMeta.useEffectCursor++;
        if (__hookMeta.isCcFragmentMounted === false) {
          __hookMeta.effectCbArr.push(cb);
          __hookMeta.effectSeeAoa.push(shouldEffectExecute);
          __hookMeta.useEffectCount++;
        } else {
          // if code running jump into this block, CcFragment already mounted, and now compute result for didUpdate
          cursor = cursor % __hookMeta.useEffectCount;
          if (Array.isArray(shouldEffectExecute)) {
            const len = shouldEffectExecute.length;
            if (len == 0) {
              __hookMeta.effectSeeResult = false;// effect fn will been executed only in didMount
            } else {// compare prevSee and curSee
              let effectSeeResult = false;
              const prevSeeArr = __hookMeta.effectSeeAoa[cursor];
              if (!prevSeeArr) {
                effectSeeResult = true;
              } else {
                for (let i = 0; i < len; i++) {
                  if (shouldEffectExecute[i] !== prevSeeArr[i]) {
                    effectSeeResult = true;
                    break;
                  }
                }
              }
              __hookMeta.effectSeeAoa[cursor] = shouldEffectExecute;
              __hookMeta.effectSeeResult[cursor] = effectSeeResult;
              if (effectSeeResult) __hookMeta.effectCbArr[cursor] = cb;
            }
          } else {
            __hookMeta.effectSeeResult[cursor] = true;// effect fn will always been executed in didMount and didUpdate
            __hookMeta.effectSeeAoa[cursor] = shouldEffectExecute;
            __hookMeta.effectCbArr[cursor] = cb;
          }
        }
      }
    }

结语

前人总结出的优秀的方案，为何不融入到cc里呢？期待看完本文的你，能所有收获。hook真的优雅的解决了在CcFragment里管理localState的问题，所以才被加入进来，不是为了加而加，期待你也能够爱上cc，爱上CcFragment，爱上cc hook。