2020 动手写个 react (3)

coding 组件 组件可能是函数还可能是类，我们知道只要继承 Component 类就是 react 的组件。 function Box(){ return ( ) } 创建一个函数，函数名为 Box 函数返回一个 jsx 对象 ReactDOM.render(,document.querySelector("#root")); 传入一个名称为 title 的对象， 整理代码 function _render(vnode){ //TODO if(vnode === undefined ) return; // vnode is equal string if(typeof vnode === 'string'){ //create textNode return document.createTextNode(vnode) } // deconstruct vnode const {tag,attrs} = vnode; //create dom object const dom = document.createElement(tag) if(attrs){ // property key: className box Object.keys(attrs).forEach(key=>{ const val = attrs[key] setAttribute(dom,key,val) }) } vnode.children.forEach(child=>render(child,dom)) return dom; } 在 javascript 中，如果函数名称以下划线开头通常是私有方法。这里把渲染设置为私有方法，也就是渲染逻辑放置在_render 方法中。然后 _render 方法主要就是讲虚拟节点处理 dom 节点返回出来。 return dom; 返回 dom 而不是将 dom 添加到容器节点中 return document.createTextNode(vnode) 通常 function render(vnode,container){ container.appendChild(_render(vnode)) } 渲染方法(_render) if(vnode === undefined || vnode === null || typeof vnode === 'boolean') vnode = ''; 判断 tag 是函数，tag 可能是函数组件或类组件 if(typeof vnode.tag === 'function') 通过虚拟节点 tag 值来判断是否为组件，然后按组件进行处理 创建组件 const comp = createComponent(vnode.tag,vnode.attrs); 设置组件的属性 setComponentProps(comp,vnode.attrs); 组件渲染的节点返回对象 return comp.base; 这里我们不能返回组件，而需要将节点对象挂接到 comp 的 base 属性上，然后返回comp.base的个节点对象。 创建组件 function createComponent(comp,props){ //declare component instance let instance; // class component case if(comp.prototype && comp.prototype.render){ instance = new comp(propos) }else{ // function component case //conver function component to class component instance = new Component(props) //constructor prefer to function(component) instance.constructor = comp; //define render function instance.render = function(){ //return jsx object return this.constructor(props) } } return instance; } 对于类组件，相对函数组件要好处理，只需要实例化(new)该类，然后将 props 做出参数传入即可。 如果组件是函数组件，我们需要将函数组件转为类组件，这样做的好处是便于以后管理组件。这里我们在react文件夹下创建一个 component.js 类其中定义 Component 类 class Component{ constructor(props = {}){ this.props = props; this.state = {}; } } export default Component; - 在构造函数接收 props 参数，这是从外部传入的参数，然后内部维护一个状态对象 state 接下来问题是如何获取 jsx 对象，其实在函数组价，jsx 对象作为返回值，我们构造函数依然已经指向了该函数，只要 render 函数返回该函数的返回值即可。 instance.render = function(){ //return jsx object return this.constructor(props) } 设置组件属性 function setComponentProps(comp,props){ //设置组件的属性 comp.propos = props; renderComponent(comp) } 渲染组件 function renderComponent(comp){ let base; //call render method to return jsx object const renderer = comp.render(); //conver jsx to dom obj base = _render(renderer); console.log(base) comp.base = base } 屏幕快照 2020-05-09 上午5.55.21.png

本文章由javascript技术分享原创和收集