14. 实现函数式组件
14. 实现函数式组件
const functionalComponent = (props) => {
return h('div', 'hello' + props.name);
};
render(h(functionalComponent, { name: 'erxiao' }), app);
函数式组件本质就是一个函数,函数的返回值就是虚拟 DOM。 在 Vue 3 中,所有的函数式组件都是用普通函数创建的。换句话说,不需要定义 { functional: true }
组件选项。
export const createVNode = (type, props, children = null) => {
const shapeFlag = isString(type)
? ShapeFlags.ELEMENT
: isObject(type)
? ShapeFlags.STATEFUL_COMPONENT
: isFunction(type)
? ShapeFlags.FUNCTIONAL_COMPONENT
: 0;
// 创建虚拟节点是
};
function initProps(instance, propsOptions, propsData) {
// ... 属性初始化的时候如果是函数式组件则 attrs就是函数式组件的props
if (instance.vnode.shapeFlag & ShapeFlags.FUNCTIONAL_COMPONENT) {
instance.props = attrs;
}
}
产生
subTree
时, 要根据类型做不同的处理
export function renderComponentRoot(instance) {
let { render, proxy, vnode, props } = instance;
if (vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
return render.call(proxy, proxy);
} else {
return vnode.type(props); // 函数式组件直接调用即可
}
}
const subTree = renderComponentRoot(instance);