react.js

    1. import $ from 'jquery';
    2. import {createUnit} from './unit';
    3. import {createElement} from './element';
    4. import {Component} from './component';
    5. let React = {
    6.     render,
    7.     createElement,
    8.     Component
    9. }
    10. //此元素可能是一个文本节点、DOM节点(div)、或者 自定义组件Counter
    11. function render(element,container){
    12.   //container.innerHTML=`<span data-reactid="${React.rootIndex}">${element}</span>`;
    13.   //unit单元就是用来负责渲染的，负责把元素转换成可以在页面上显示的HTML字符串
    14.   let unit = createUnit(element);
    15.   let markUp = unit.getMarkUp('0');//用来返回HTML标记
    16.   $(container).html(markUp);
    17.   $(document).trigger('mounted');
    18. }
    19. export default React

    // component.js

    1. table File  12 lines (12 sloc)  261 Bytes
    3. class Component{
    4.     constructor(props){
    5.         this.props = props;
    6.     }
    7.     setState(partialState){
    8.         //第一个参数是新的元素 第二个参数是新的状态
    9.         this._currentUnit.update(null,partialState);
    10.     }
    11. }
    12. export {
    13.     Component 
    14. }

    // element,js

    1. class Element{
    2.     constructor(type,props){
    3.         this.type  = type;
    4.         this.props = props;
    5.     }
    6. }
    7. function createElement(type,props={},...children){
    8.    props.children = children||[];//children也是props的一个属性
    9.    return new Element(type,props); 
    10. }
    12. export {
    13.     Element,
    14.     createElement
    15. }

    // types.js

    2. export default {
    3.     MOVE:'MOVE',       //移动
    4.     INSERT:"INSERT",   //插入
    5.     REMOVE:'REMOVE'    //删除
    6. }

    // unit.js

    1. import {Element,createElement} from './element';
    2. import $ from 'jquery';
    3. import types from './types';
    4. let diffQueue=[];//差异队列
    5. let updateDepth=0;//更新的级别
    6. class Unit{
    7.     constructor(element){
    8.         //凡是挂载到私有属性上的都以_开头
    9.         this._currentElement = element;
    10.     }
    11.     getMarkUp(){
    12.         throw Error('此方法不能被调用');
    13.     }
    14. }
    15. class TextUnit extends Unit{
    16.     getMarkUp(reactid){
    17.         this._reactid = reactid;
    18.         return `<span data-reactid="${reactid}">${this._currentElement}</span>`;
    19.     }
    20.     update(nextElement){
    21.         if(this._currentElement !== nextElement){
    22.           this._currentElement = nextElement;
    23.           $(`[data-reactid="${this._reactid}"]`).html(this._currentElement);
    24.         }
    25.     }
    26. }
    27. /**
    28. {type:'button',props:{id:'sayHello'},children:['say',{type:'b',{},'Hello'}]}
    29. <button id="sayHello" style="color:red;background-color:'green" onclick="sayHello()">
    30.    <span>say</span>
    31.    <b>Hello</b>
    32. </button>
    33. */
    34. class NativeUnit extends Unit{
    35.     getMarkUp(reactid){
    36.       this._reactid = reactid;
    37.       let {type,props} = this._currentElement;
    38.       let tagStart = `<${type} data-reactid="${this._reactid}"`;  
    39.       let childString= '';
    40.       let tagEnd = `</${type}>`;
    41.       this._renderedChildrenUnits=[];
    42.       //{id:'sayHello',onClick:sayHello,style:{color:'red',backgroundColor:'green'}},children:['say',{type:'b',{},'Hello'}]
    43.       for(let propName in props){
    44.          if(/^on[A-Z]/.test(propName)){//这说明要绑定事件了
    45.             let eventName = propName.slice(2).toLowerCase();//click
    46.             $(document).delegate(`[data-reactid="${this._reactid}"]`,`${eventName}.${this._reactid}`,props[propName]);
    47.          }else if(propName === 'style'){//如果是一个样式对象
    48.             let styleObj = props[propName];
    49.             let styles = Object.entries(styleObj).map(([attr,value])=>{
    50.                 return `${attr.replace(/[A-Z]/g,m=>`-${m.toLowerCase()}`)}:${value}`;
    51.             }).join(';');
    52.             tagStart+=(` style="${styles}" `);
    53.          }else if(propName === 'className'){//如果是一个类名的话
    54.             tagStart+=(` class="${props[propName]}" `);
    55.          }else if(propName == 'children'){
    56.              let children = props[propName];
    57.              children.forEach((child,index)=>{
    58.                  let childUnit = createUnit(child);//可能是一个字符中，也可以也是一个react元素 虚拟DOM
    59.                  childUnit._mountIndex = index;//每个unit有一个_mountIndex 属性，指向自己在父节点中的索引位置
    60.                  this._renderedChildrenUnits.push(childUnit);
    61.                  let childMarkUp = childUnit.getMarkUp(`${this._reactid}.${index}`);
    62.                  childString+=childMarkUp;
    63.              });
    64.          }else{
    65.              tagStart += (` ${propName}=${props[propName]} `);
    66.          }
    67.       }
    68.         return tagStart+">"+childString+tagEnd;
    69.     }
    70.     update(nextElement){
    71.         let oldProps = this._currentElement.props;
    72.         let newProps = nextElement.props;
    73.         this.updateDOMProperties(oldProps,newProps);
    74.         this.updateDOMChildren(nextElement.props.children);
    75.     }
    76.     //此处要把新的儿子们传过来，然后后我老的儿子们进行对比，然后找出差异，进行修改DOM
    77.     updateDOMChildren(newChildrenElements){
    78.         updateDepth++;
    79.         this.diff(diffQueue,newChildrenElements);
    80.         updateDepth--;
    81.         if(updateDepth === 0){
    82.             console.log(diffQueue)
    83.             this.patch(diffQueue);
    84.             diffQueue = [];
    85.         }
    86.     }
    87.     patch(diffQueue){
    88.         let deleteChildren = [];//这里要放着所有将要删除的节点
    89.         let deleteMap = {};//这里暂存能复用的节点
    90.         for(let i=0;i<diffQueue.length;i++){
    91.             let difference = diffQueue[i];
    92.             if(difference.type === types.MOVE || difference.type === types.REMOVE){
    93.                 let fromIndex = difference.fromIndex;
    94.                 let oldChild = $(difference.parentNode.children().get(fromIndex));
    95.                 if(!deleteMap[difference.parentId]){
    96.                    deleteMap[difference.parentId]={}
    97.                 }
    98.                 deleteMap[difference.parentId][fromIndex]=oldChild;
    99.                 deleteChildren.push(oldChild);
    100.             }
    101.         }
    102.         $.each(deleteChildren,(idx,item)=>$(item).remove());
    104.         for(let i=0;i<diffQueue.length;i++){
    105.             let difference = diffQueue[i];
    106.                 switch(difference.type){
    107.                     case types.INSERT:
    108.                         this.insertChildAt(difference.parentNode,difference.toIndex,$(difference.markUp));
    109.                     break;
    110.                     case types.MOVE:
    111.                         this.insertChildAt(difference.parentNode,difference.toIndex,deleteMap[difference.parentId][difference.fromIndex]);
    112.                     break;
    113.                     default:
    114.                     break;
    115.                 }
    116.         }
    117.     }
    118.     insertChildAt(parentNode,index,newNode){
    119.         let oldChild = parentNode.children().get(index);
    120.         oldChild?newNode.insertBefore(oldChild):newNode.appendTo(parentNode);
    121.     }
    122.     diff(diffQueue,newChildrenElements){
    123.         //第一生成一个map,key=老的unit
    124.         let oldChildrenUnitMap =  this.getOldChildrenMap(this._renderedChildrenUnits);
    125.         //第二步生成一个新的儿子unit的数组
    126.         let {newChildrenUnitMap,newChildrenUnits} = this.getNewChildren(oldChildrenUnitMap,newChildrenElements);
    127.         let lastIndex = 0;//上一个已经确定位置的索引
    128.         for(let i=0;i<newChildrenUnits.length;i++){
    129.             let newUnit = newChildrenUnits[i];
    130.             //第一个拿 到的就是newKey=A
    131.             let newKey = (newUnit._currentElement.props&&newUnit._currentElement.props.key)||i.toString();
    132.             let oldChildUnit = oldChildrenUnitMap[newKey];
    133.             if(oldChildUnit === newUnit){//如果说新老一致的话说明复用了老节点
    134.                 if(oldChildUnit._mountIndex < lastIndex){
    135.                     diffQueue.push({
    136.                         parentId:this._reactid,
    137.                         parentNode:$(`[data-reactid="${this._reactid}"]`),
    138.                         type:types.MOVE,
    139.                         fromIndex:oldChildUnit._mountIndex,
    140.                         toIndex:i
    141.                     });
    142.                 }
    143.                 lastIndex = Math.max(lastIndex,oldChildUnit._mountIndex);
    144.             }else{
    145.                 if(oldChildUnit){
    146.                     diffQueue.push({
    147.                       parentId:this._reactid,
    148.                       parentNode:$(`[data-reactid="${this._reactid}"]`),
    149.                       type:types.REMOVE,
    150.                       fromIndex:oldChildUnit._mountIndex
    151.                     });
    152.                      this._renderedChildrenUnits=this._renderedChildrenUnits.filter(item=>item!=oldChildUnit);
    153.                     $(document).undelegate(`.${oldChildUnit._reactid}`);
    154.                 }
    155.                 diffQueue.push({
    156.                       parentId:this._reactid,
    157.                       parentNode:$(`[data-reactid="${this._reactid}"]`),
    158.                       type:types.INSERT,
    159.                       toIndex:i,
    160.                       markUp:newUnit.getMarkUp(`${this._reactid}.${i}`)
    161.                 });
    162.             }
    163.             newUnit._mountIndex = i;
    164.         }
    165.         for(let oldKey in oldChildrenUnitMap){
    166.             let oldChild = oldChildrenUnitMap[oldKey];
    167.             if(!newChildrenUnitMap.hasOwnProperty(oldKey)){
    168.                 diffQueue.push({
    169.                       parentId:this._reactid,
    170.                       parentNode:$(`[data-reactid="${this._reactid}"]`),
    171.                       type:types.REMOVE,
    172.                       fromIndex:oldChild._mountIndex
    173.                 });
    174.                 //如果要删除掉某一个节点，则要把它对应的unit也删除掉
    175.                 this._renderedChildrenUnits=this._renderedChildrenUnits.filter(item=>item!=oldChild);
    176.                 //还要把这个节点地应的事件委托也删除掉
    177.                 $(document).undelegate(`.${oldChild._reactid}`);    
    178.             }
    179.         }
    181.     }
    182.     getNewChildren(oldChildrenUnitMap,newChildrenElements){
    183.         let newChildrenUnits =[];
    184.         let newChildrenUnitMap = {};
    185.         newChildrenElements.forEach((newElement,index)=>{
    186.             //一定要给定key，千万不要让它走内的索引key
    187.             let newKey = (newElement.props&&newElement.props.key)||index.toString();
    188.             let oldUnit = oldChildrenUnitMap[newKey];//找到老的unit
    189.             let oldElement = oldUnit&&oldUnit._currentElement;//获取老元素
    190.             if(shouldDeepCompare(oldElement,newElement)){
    191.                 oldUnit.update(newElement);
    192.                 newChildrenUnits.push(oldUnit);
    193.                 newChildrenUnitMap[newKey]=oldUnit;
    194.             }else{
    195.                 let nextUnit = createUnit(newElement);
    196.                 newChildrenUnits.push(nextUnit);
    197.                 newChildrenUnitMap[newKey]=nextUnit;
    198.                 this._renderedChildrenUnits[index]=nextUnit;
    199.             }
    200.         });
    201.         return {newChildrenUnitMap,newChildrenUnits};
    202.     }
    203.     getOldChildrenMap(childrenUnits=[]){
    204.         let map = {};
    205.         for(let i=0;i<childrenUnits.length;i++){
    206.             let unit = childrenUnits[i];
    207.             let key = (unit._currentElement.props&&unit._currentElement.props.key)||i.toString();
    208.             map[key] = unit;
    209.         }
    210.         return map;
    211.     }
    212.     updateDOMProperties(oldProps,newProps){
    213.         let propName;
    214.         for(propName in oldProps){//循环老的属性集合
    215.             if(!newProps.hasOwnProperty(propName)){
    216.               $(`[data-reactid="${this._reactid}"]`).removeAttr(propName);  
    217.             }
    218.             if(/^on[A-Z]/.test(propName)){
    219.               $(document).undelegate(`.${this._reactid}`);  
    220.             }
    221.         }
    222.         for(propName in newProps){
    223.            if(propName == 'children'){//如果儿子属性的话，我们先不处理
    224.                continue;
    225.            }else if(/^on[A-Z]/.test(propName)){
    226.             let eventName = propName.slice(2).toLowerCase();//click
    227.             $(document).delegate(`[data-reactid="${this._reactid}"]`,`${eventName}.${this._reactid}`,newProps[propName]);
    228.            }else if(propName === 'className'){//如果是一个类名的话
    229.             //$(`[data-reactid="${this._reactid}"]`)[0].className = newProps[propName];
    230.             $(`[data-reactid="${this._reactid}"]`).attr('class',newProps[propName]);
    231.            }else if(propName == 'style'){
    232.             let styleObj = newProps[propName];
    233.             Object.entries(styleObj).map(([attr,value])=>{
    234.                $(`[data-reactid="${this._reactid}"]`).css(attr,value);
    235.             })
    236.            }else{
    237.                $(`[data-reactid="${this._reactid}"]`).prop(propName,newProps[propName]);
    238.            }
    239.         }
    240.     }
    241. }
    242. // dom.dataset.reactid  $(dom).data('reactid');
    243. class CompositeUnit extends Unit{
    244.     //这里负责处理组件的更新操作
    245.     update(nextElement,partialState){
    246.         //先获取到新的元素
    247.         this._currentElement = nextElement||this._currentElement;
    248.         //获取新的状态,不管要不要更新组件，组件的状态一定要修改
    249.         let nextState =Object.assign(this._componentInstance.state,partialState);
    250.         //新的属性对象
    251.         let nextProps = this._currentElement.props;
    252.         if(this._componentInstance.shouldComponentUpdate&&!this._componentInstance.shouldComponentUpdate(nextProps,nextState)){
    253.             return;
    254.         }
    255.         // 下面要进行比较更新 先得到上次渲染的单元
    256.         let preRenderedUnitInstance = this._renderedUnitInstance;
    257.         //得到上次渲染的元素
    258.         let preRenderedElement =  preRenderedUnitInstance._currentElement;
    259.         let nextRenderElement  = this._componentInstance.render();
    260.         //如果新旧两个元素类型一样，则可以进行深度比较，如果不一样，直接干掉老的元素，新建新的
    261.         if(shouldDeepCompare(preRenderedElement,nextRenderElement)){
    262.             //如果可以进行深比较，则把更新的工作交给上次渲染出来的那个element元素对应的unit来处理
    263.             preRenderedUnitInstance.update(nextRenderElement);
    264.             this._componentInstance.componentDidUpdate&&this._componentInstance.componentDidUpdate();
    265.         }else{
    266.             this._renderedUnitInstance = createUnit(nextRenderElement);
    267.             let nextMarkUp = this._renderedUnitInstance.getMarkUp();
    268.             $(`[data-reactid="${this._reactid}"]`).replaceWith(nextMarkUp);
    269.         }
    270.     }
    271.     getMarkUp(reactid){
    272.         this._reactid = reactid;
    273.         let {type:Component,props} = this._currentElement;
    274.         let componentInstance = this._componentInstance = new Component(props);
    275.         //让组件的实例的currentUnit属性等于当前的unit
    276.         componentInstance._currentUnit = this;
    277.         //如果有组件将要渲染的函数的话让它执行
    278.         componentInstance.componentWillMount&&componentInstance.componentWillMount();
    279.         //调用组件的render方法，获得要渲染的元素
    280.         let renderedElement =componentInstance.render();//0
    281.         //得到这个元素对应的unit
    282.         let renderedUnitInstance = this._renderedUnitInstance = createUnit(renderedElement);
    283.         //通过unit可以获得它的html 标记markup
    284.         let renderedMarkUp = renderedUnitInstance.getMarkUp(this._reactid);
    285.         //在这个时候绑定一个事件
    286.         $(document).on('mounted',()=>{
    287.             componentInstance.componentDidMount&&componentInstance.componentDidMount();
    288.         });
    289.         return renderedMarkUp;
    290.     }
    291. }
    292. //判断两个元素的类型一样不一样
    293. function shouldDeepCompare(oldElement,newElement){
    294.    if(oldElement != null && newElement !=null){
    295.        let oldType = typeof oldElement;
    296.        let newType = typeof newElement;
    297.        if((oldType==='string'||oldType=='number')&&(newType==='string'||newType=='number')){
    298.            return true;
    299.        }
    300.        if(oldElement instanceof Element && newElement instanceof Element){
    301.            return oldElement.type == newElement.type;
    302.        }
    303.    }
    304.    return false;
    305. }
    306. function createUnit(element){
    307.     if(typeof element === 'string' || typeof element === 'number'){
    308.         return new TextUnit(element);
    309.     }
    310.     if(element instanceof Element && typeof element.type === 'string'){
    311.         return new NativeUnit(element);
    312.     }
    313.     if(element instanceof Element && typeof element.type === 'function'){
    314.         return new CompositeUnit(element);
    315.     }
    316. }
    317. export {
    318.     createUnit
    319. }