react总结之JSX与虚拟DOM实现

　　React是facebook开源的JS库，它可以把界面抽象成一个一个的组件，组件进行组合来得到功能丰富的页面。与Vue不同，React立足于MVC框架，是一个包括view和controller的库。首先我们来看一下什么是MVC。

　　MVC(Model View Controller)：M指的是业务模型，它有最多的处理任务，被模型返回的数据是中立的，模型与数据格式无关，这样一个模型可以为多个视图提供数据，由于应用于模型的代码只用写一次就可被多个视图进行重用，这样减少了代码的重复性；V指的是用户界面，如网页界面或者是软件的客户端界面；C是控制器，它可以接受用户输入并且调用模型和视图去完成用户的需求，它本身并不输入任何东西和做任务处理，它只是接收请求并决定调用哪个模型构件去处理请求，然后再确定用哪个视图来显示返回的数据。概括来说，用户的请求首先会到达Controller,由Controller从Model上获取数据，进而选择合适的View，把处理的结果呈现在View上。React它是用来创建用户界面的JS库，它和用户界面打交道可以把它看成是MVC中的 V层。

　　一、JSX

　　JSX它是JavaScript的语法扩展，即我们在js中可以编写html代码。它可以将html结构，数据，甚至是样式都聚合在一起。

　　1、使用html标签

　　先声明后使用，react中的html标签和vue的不太一样，react是插入而vue是替换。如下所示：把名为myElement的多个标签插入到root根元素中。其中要注意的是：html里的class在jsx中要写成className，for写成htmlFor，不能与js中的关键字重复。当代码中嵌套多个html标签，需要用一个div或者是空标签进行包裹，否则它会报错。

import React from 'react';
import ReactDOM from 'react-dom';

  let myElement =
  <>
      <div className="myDivElement">my-div-element</div>
      <h3>JSX</h3>
  </>

ReactDOM.render(
  // 将元素渲染到DOM中
  myElement,
  document.getElementById('root')
);

　　2、使用js表达式

　　我们可以在JSX中使用js表达式，表达式要写在花括号{}中。需要注的有以下几点：

　　JSX中的注释是像js中块注释一样{/*注释内容*/}；

　　JSX中可以使用任意的变量，当我们需要把数组进行循环一般使用map,reduce,filter等方法；

　　结构中的判断不能用else...if而是要使用三元运算符或者是可以使用&&，||操作。

import React from 'react';
import ReactDOM from 'react-dom';
let num = 10;
let name = 'hello JSX';
let isLogin = true;
let a = undefined;
let nul = null;
let col = 'lightpink';
let ary = [14, 32, 42, 31, 85, 79];
let href = "https://baidu.com";
let obj = { a: 'React', b: 'Vue', c: 'Javascript' };
let sty = { color: 'lightpink', background: 'lightblue', fontSize: '20px' };
ReactDOM.render(
    <>
        {/* 注意特殊的注释方式 */}

        {/* 1.运算 */}
        <h2>{10 * 10}</h2>

        {/* 2.嵌入数据 */}
        <h3>数据是：{num}</h3>
        <h3>姓名是：{name}</h3>
        <h3>{isLogin ? 'hello React' : ''}</h3>
        {/* undefined和null不显示，如果非要显示则需要转成字符串 */}
        <h3>{a}</h3>
        <h3>{nul}</h3>
        <h3>{nul + ''}</h3>

        {/* 3.数组 */}
        {/* 3.1列表展示 */}
        <h3>数字列表</h3>
        <ul>{ary.map(item => <li key={item}>{item}</li>)}</ul>
        {/* 3.2过滤 */}
        <ul>{ary.filter(item => item >= 50).map(item => <li key={item}>{item}</li>)}</ul>
        {/* 3.2截取 */}
        <ul>{ary.slice(0, 3).map(item => <li key={item}>{item}</li>)}</ul>

        {/* 4.对象：在结构中不能直接放入对象 */}
        <li>我现在学的是：{obj.a}</li>

        {/* 5.判断不能用else...if可以使用三元 */}
        <h4>{1 > 0 ? '1>0' : '1<=0'}</h4>

        {/* 6.样式  style={{color:col}}这不是小胡子，这是花括号包了一个对象，style的值有两层花括号*/}
        <h5 style={{ color: col, backgroundColor: 'lightblue' }}>样式</h5>
        <a href={href} target="_blank">点击跳转</a>
        {/* 当我们需要设置多个属性，或者是有时不知道属性名称时，可以使用扩展属性。 */}
        <li style={{ ...sty }}>hello davina</li>
    </>,
    document.querySelector('#root')
)

　　JSX其实是一种语法糖，它并不是直接渲染到页面上，而是内部通过babel先转义成createElement形式，再进行渲染。React引入JSX主要是为了方便view层面上的组件化，它可以构建html结构化页面。React将JSX映射为虚拟元素，并且用虚拟元素来管理整个的虚拟DOM。如果我们用JSX语法声明某个元素它会被转化成React.createElement(type，props,...children)。当然如果元素是组件也是不例外的。如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
let name = 'davina';
/* 
ReactDOM.render(
  <h2 className="myh2" style={{ color: 'lightblue' }}>hello
  <span className="myspan">{name}</span>
  </h2>,
  document.querySelector('#root')
)
 */

// 它可以转化成如下：
ReactDOM.render(
  React.createElement("h2", {
  className: "myh2",
  style: {
    color: 'lightblue'
  }
}, "hello", 
  React.createElement("span", {
  className: "myspan"
}, name)) ,
  document.querySelector('#root')
)

 　React元素它就是一个普通的js对象，它是构建应用的最小单位。当元素已经生成，它是不可变的，如果要进行更新它只会更新必要的部分。如下所示:

import React from 'react'
import ReactDom from 'react-dom'
setInterval(() => {
  let element = <div><span>当前时间：</span>{new Date().toLocaleTimeString()}</div>
  ReactDom.render(element, document.getElementById('root'))
}, 1000);

　　二、实现虚拟DOM

　　通过上面的应用我们可以看到React它是使用JSX编写虚拟的DOM对象，通过babel.js编译后生成真正的DOM,然后将真正的DOM插入到页面中。

//index.js
import React from './react';
import ReactDOM from './react-dom';

let element = React.createElement("h4", {
  className: "title",
  style: {
    color: 'lightpink',
    fontSize: '20px'
  }
}, 'hello', React.createElement("span", null, "davina"));

ReactDOM.render(element, document.getElementById('root'));

　　在生成虚拟DOM时，使用createElement方法，用来模拟真实的DOM。根据真实的createElement我们可以看到它里面有三个参数：参数一：type类型，它有可能是DOM的元素标签，也有可能是组件名；参数二：props：属性，如下所示：className: "myh2",style: {color: 'lightblue'}；参数三：chidlren子元素。

//react.js
//创建一个createElement函数，并把type,props传给ReactElement函数
function createElement(type, config = {}, children) {
    //声明名字和props
    let propName;
    let props = {};
    //把config上的所有属性都拷贝到props上，这样原来的就不发生改变
    for (propName in config) {
        props[propName] = config[propName];
    }
    //儿子的长度
    const childrenLength = arguments.length - 2;
    //当只有一个儿子时
    if (childrenLength == 1) {
        props.children = children;
        //当多个儿子时
    } else if (childrenLength > 1) {
        //把类数组转成数组并进行截取，得到所有儿子
        props.children = Array.from(arguments).slice(2);
    }

    return ReactElement(type, props);
}

//声明一个ReactElement函数，那createElement返回的就是这个element
function ReactElement(type, props) {
    //声明一个type,props属性的元素并返回
    const element = { type, props };
    return Element;
}
export default { createElement }

　　这样一个createElement函数就创建成功，通过这个函数，我们可以把JSX格式的代码进行转化，创建一个虚拟的DOM。但单单这个方法是不足以达渲染要求，所以还需要render方法。它可以将虚拟的DOM解析成真实的DOM插入到父节点中最后并渲染到页面上。

//react-dom.js
function render(element, parentNode) {
    // 如果element是字符串或者是数字那可以直接进行添加
    if (typeof element === 'string'||typeof element === 'number') {
        //创建一个文本节点然后添加到parentNode中
        return parentNode.appendChild(document.createTextNode(element));
    }
    //如果是element,element
    let type, props;
    type = element.type;
    props = element.props;
    //如果element是dom元素时,要处理特殊的属性，如className,fontSize......
    let domElement = document.createElement(type);//div,h1....
    for (let propName in props) {
        switch (propName) {
            //className要特殊处理
            case 'className':
                domElement.className = props[propName];
                break;
            //style要特殊处理
            case 'style':
                let styleObj = props[propName];  //styleObj => {color: 'lightpink',fontSize: '20px'}
                //用字符串拼接
                //['color','fontSize']=>['color:lightpink,'font-size:20px']=>'color:lightpink,'font-size:20px'
                let cssText = Object.keys(styleObj).map(attr => {
                    //propName=>${attr}     props[propName]=>${styleObj[attr]}
                    //处理驼峰转-
                    return `${attr.replace(/A-Z/g, function () { return "-" + arguments[1].toLowerCase() })}:${styleObj[attr]}`;
                }).join(';');
                domElement.style.cssText = 'color:lightpink;font-size:20px';
                break;
            //children要特殊处理
            case 'children':
                //转成数组
                let children = Array.isArray(props.children) ? props.children : [props.children];
                //进行循环，并且挂载在自己身上
                children.forEach(child => render(child, domElement));
                break;
            default:
                // element.setAttribute(propName, props[propName])=>div.setAttribute('id','box')
                //普通属性时直接进行添加，如id
                domElement.setAttribute(propName, props[propName]);
        }
        parentNode.appendChild(domElement);
    }
}

export default { render }

　　但element不一定是元素或者是字符串，数字，还有可能是组件，所以我们还要考虑到element是组件的情况，组件又分为函数组件和类组件，这二者要分开考虑。

// index.js
// import ReactDOM from './react-dom'
// import React from './react'

// 函数组件
// function Welcome(props) {
//   return React.createElement('h4',{id:'welcome'},props.name,props.age)
// }
// let element = React.createElement(Welcome, { name: 'davina', age: 20 });
// ReactDOM.render(element, document.getElementById('root'));

// 类组件
class Welcome1 extends React.Component{
  render(){
    return React.createElement('h4',{id:'class_welcome'},this.props.name,this.props.age)

  }
}
let element = React.createElement(Welcome1, { name: 'davina', age: 20 });
ReactDOM.render( element, document.getElementById('root'));

　　当element为类组件时，因为类组件要继承React的Component所以：

//react.js
// Component
class Component{
    //加一个静态属性isReactComponent，后面的所有子类都是可以继承它的静态属性
    static isReactComponent = true;
    constructor(props){
        this.props = props;
    }
}
export default { Component}

//render函数内部
//如果是element,element
    let type, props;
    type = element.type;
    props = element.props;
    
    //判断是否是类组件
    if (type.isReactComponent) {
        // returnedElement接收返回值
        let returnedElement = new type(props).render();
        type = returnedElement.type;
        props = returnedElement.props;
        //判断是否是函数
    } else if (typeof type == 'function') {
        let returnedElement = type(props);
        type = returnedElement.type;
        props = returnedElement.props;
    }

 　　总结来说，jsx它仅仅是一个语法糖，并不是直接渲染到页面上，在react内部它要通过先转义成React.createElement(type,props,...children)形式再进行调用。利用React.createElement函数形成了一个js对象树，即虚拟DOM,形成虚拟DOM后，如果状态或者是数据发生改变，新旧虚拟DOM通过一系列复杂的算法进行比较，再重新渲染，形成真实DOM。即react的渲染是从jsx到虚拟DOM再到真实DOM的过程。