简叙react的React.render方法

简叙react的React.render方法

　　还是先絮叨点东西吧，用轮子和造轮子我认为是两个概念，趁着自己还年轻，还有时间那就多想想别人的轮子是怎么来的。

　　话不多数，开整吧，看这个之前至少得用react做过一个项目才有利于下面的观看。

　　react搭建完之后，大家对下面这个代码应该是记忆挺深刻的。

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

ReactDOM.render(<App />, document.getElementById('root'));

　　这个代码是把App的组件渲染到输出的html上，其实react里面就是用js写了html（也就是JSX=>javascript+xml），就好比你用JQ的时候直接把标签用append()的方法直接插入到了网页中，但是为什么不用JQ而是使用现在流行的三大框架了呢（vue react angular），这三大框架里面操作的节点是走的虚拟DOM而非真实的DOM所以渲染比较快，通俗的话来说就是优点高于缺点。

　　如果你想渲染一句话在网页上，这么写对吧。　　

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

let h1 = <h1>hello world</h1>
ReactDOM.render(h1, document.getElementById('root'));

　　OK，那么我们来看下这个h1到底被react整成什么了，输出这个h1，会发现这个被变成一个object了，里面有着他的各种属性。

let React = {
    createElement(type,props,...children){
        return {type,props,children}
    }
}

function render(vnode,container) { //需要渲染的标签 container需要被渲染到哪
    //vode里面有三个属性 分别为type标签的类型 props JSX自带的属性 childen标签里面自带的内容等等
    if(typeof vnode === 'string') return container.appendChild(document.createTextNode(vnode));
    let {type,props,children} = vnode;
    let tag = document.createElement(type);
    for(let key in props){
        tag.setAttribute(key,props[key]);    //设置创建节点的属性并赋值
    }
    children.forEach(child=>{
        render(child,tag);    //如果还有子标签则递归
    })
    container.appendChild(tag);
}
let el = <h1>hello world</h1>;
render(el,window.root);

 

posted on 2018-09-06 02:31  另一种失败 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/qiaohong/p/9595912.html