1、前置知识，Life of frame（一帧在浏览器执行了哪些事情）

    • 目前大多数设备屏幕刷新率为60次/秒
    • 浏览器渲染动画或页面每一帧的速率也需要跟设备屏幕的刷新率保持一致
    • 页面是一帧一帧绘制出来的，当每秒绘制的帧数（FPS）达到60时，页面是流畅的，小于这个值的时候，用户会感觉到卡顿
    • 每个帧的预算时间是16.6毫秒
    • 所以我们书写代码时力求不让一帧的工作量超过16ms

    2、帧

    • 每个帧的开头包括样式计算、布局和绘制
    • javascript执行 javascript引擎和页面渲染在同一个渲染线程，GUI渲染和javascript执行两者是互斥的
    • 如果某个任务执行时间过长，浏览器会推迟渲染

    一帧通常会经历以下的流程

    • Input event（输入事件）
      • 阻塞输入事件，比如touch，wheel
      • 非阻塞输入事件，比如click，keypress
    • Timer，定时器
    • 开始帧，window resize ，scroll，media query change
    • requestAnumationFrame
    • Layout
    • Paint
    • idle peroid（空闲时间）

    // react.js文件，主要是生成虚拟dom

    1. /**
    2.  * @description: 生成虚拟dom的方法React.createElement
    3.  */
    4. export const React = {
    5.   nextReactRootIndex: 0,
    6.   /**
    7.    * @param {*} type 元素的 component 类型
    8.    * @param {*} config 元素配置
    9.    * @param {*} children 元素的子元素
    10.    */
    11.   createElement(type, config = {}, ...children) {
    12.     const props = {};
    14.     for (let propName in config) {
    15.       if (config.hasOwnProperty(propName) && propName !== "key") {
    16.         props[propName] = config[propName];
    17.       }
    18.     }
    20.       props.children = children;
    22.     return new ReactElement(type, config.key || null, props);
    23.   },
    25.   /**
    26.    * 自行添加上文中的render方法
    27.    */
    28. };
    30. /**
    31.  * @description: 包装React.createElement生成的虚拟dom
    32.  * @param {*}  
    33.  * @return: 
    34.  */
    35. function ReactElement(type, key, props) {
    36.   this.type = type;
    37.   this.key = key;
    38.   this.props = props;
    39. }