React学习（二）—— 组件渲染

React学习（二）—— 组件化开发

在react中的组件，有函数式组件和class类组件两种

一、函数组件

一般在开发中，函数组件我们会这样写：

function Home  () {
  return (
    <div title="123"> 
      <h3 className="title" > hello, react</h3>
    </div> 
  )
}

将一个jsx对象return出去
看一下，这个函数组件在渲染时，都有什么样的属性：

可以看到vnode对象的三个属性，attrs，childrens，tag，同普通的vnode对象相比，主要的一个不同是‘tag’，这里的tag是一个函数，而不是一个标签名；所以在渲染时，就要有对tag类型的区分。

如果是函数组件，我们可以直接执行这个函数，因为函数的返回值就是一个jsx对象
我们可以这样去实现

// 声明一个函数，用于对函数式组件进行处理
function FunctionComponent (vnode) {
    const {tag, attrs} = vnode // 获取节点属性信息
    const fnVnode = tag(attrs) // 执行函数得到子节点 tag为函数，返回的虚拟dom节点赋值给fnVnode
    // 生成真实dom节点
    const node = renderVnode(fnVnode)
    return node
}

class 类组件

react中创建一个class类组件

class Home extends Comment {
  render () {
    return (
      <div title="123"> 
      <h3 className="title" > hello, react-class</h3>
    </div> 
    )
  }
}

class 类组件在渲染时的属性：

可以看出，class的类型也是function，但是与函数式组件相比，class类组件拥有prototype属性，我们可以根据这个数据来进一步区分，渲染的是什么样的组件。
比如这样：

if (typeof vnode.tag === 'function') {
        if(vnode.tag && vnode.tag.prototype && vnode.tag.prototype.render) {
      		 // class 类组件
        } else {
            //函数式组件
		}
    } 

对于class类组件，我们可以进行通过：
1、创建实例
2、调用内部render方法，返回jsx对象
3、渲染节点
这三个步骤进行组件的渲染

 const { tag, attrs} = vnode
 // 创建组件实例
 const cnode = new tag(attrs)
 // 设置组件属性
 cnode.props = attrs
 // 组件渲染的节点对象, 调用render方法 返回jsx对象
 const render = cnode.render()
 return renderVnode(render)

demo：https://github.com/wkh1234/react-component