import { h, render } from 'rainx'
class App {
render() {
return (
<div>
<h1>Hello, Rainx!</h1>
<ol>
<li>React & Vue like.</li>
<li>JSX</li>
</ol>
</div>
)
}
}
render(<App/>, document.getElementById('app'))
- Fiber
- 组件的产出就是 Virtual DOM
- VNode的类型分为：HTML/SVG、Text、FRAGMENT、PORTAL、COMPONENNT_FUNCTIONIAL、COMPONENT_STATEFUL
- VNode是虚拟节点，VNodeData是对节点的描述，可通过 h 辅助函数进行创建，通过 render 函数将 VNodeData 挂载在真实的DOM中
- render 非常重要，原理为通过判断不同的 vnode 类型进行相应的挂载操作，同时需要处理属性、事件等
- patch 过程中，不同类型的vnode比较没有意义，可直接替换
- patch 过程中，同类型的vnode，html类型是比较 tag 和 data，文本节点是比较文本值，子节点更新通过递归进行