梳理下React架构思路（简单代码示例）

function React() {
   // 全局的更新栈，对象时组件
   var stateStack = [];
   // 抽象的Component
   function Component(state) {
      // 此处笼统的将props和state混为一个概念
      this.state = state;
      this.setState = function(state){
          // setState 并不直接改变组件的state
          // 而是记录一次主线程执行中，state请求的变更记录
          stateStack.push(this);
      }
      this.render() {
         //更新视图
         return virtaulDom;
      }
      // 组件实例化后，将组件放入更新队列等待react执行更新
      stateStack.push(this);
  }
  // App 使用react技术的应用
  function App() {
      // 应用中创建一个react的规范的根组件
      var rootComponent = Component;
      // 挂载并实例化根组件
      rootComponent({});
  }
  // 全局渲染方法 扫描更新队列，执行更新
  this.globalRender = function *(){
     // 无限循环
     while(true){
       // 取出第一个更新组件，每次更新都把当前组件加入更新队列
       // 当前组件更新，会重置子组件入参，导致子组件更新任务随之加入这个队列，一个队列其实就是一截组件树
       var component = stateStack.shift();
          if(component){
             // 取出当前组件的state记录并合并
             var state = component .stateStack.reduce(function(pre, cur){
                return {
                   ...pre,
                   ...cur,
                };
             },{})
             if(component.state !== state){
                var virtaulDom = component.render(state);
                // 与真实DOM比较，选择性更新真实DOM
                // TODO 数据存在不同的地方修改真实DOM
             }
          }
      }
      // 关键： 此处用于控制执行更新时机，否则就是真正的死循环了
      yield;
   }
  // 自动控制执行更新
  this.autoRender = function (result)  {
      result.next();
      var self = this;
      // 自动扫描更新队列的间隔设置为1毫秒
      setTimeout(function(){self .autoRender(result)}, 1);
  }
  // 初始化APP：创建APP的根组件
  App();
  // react开始循环扫描更新队列，执行更新
  var result = this.globalRender();
  
  this.autoRender(result );
}