day160-vuejs-CreateElement-children 的规范化

children 的规范化

_createElement 接收的第 4 个参数 children 是任意类型的,所以要规范化。
代码目录:<src/core/vdom/helpers/normalzie-children.js>

代码

// The template compiler attempts to minimize the need for normalization by
// statically analyzing the template at compile time.
//
// For plain HTML markup, normalization can be completely skipped because the
// generated render function is guaranteed to return Array<VNode>. There are
// two cases where extra normalization is needed:
/* 注:functional component 函数式组件返回的是一个数组而不是一个根节点 */
/* 场景1 */
// 1. When the children contains components - because a functional component
// may return an Array instead of a single root. In this case, just a simple
// normalization is needed - if any child is an Array, we flatten the whole
// thing with Array.prototype.concat. It is guaranteed to be only 1-level deep
// because functional components already normalize their own children.
/*该方法调用场景是 render 函数是编译生成的*/
export function simpleNormalizeChildren (children: any) {
for (let i = 0; i < children.length; i++) {
if (Array.isArray(children[i])) {
/* 注:flatten 整个 Array<VNode> */
return Array.prototype.concat.apply([], children)
}
}
return children
}
/* 场景2 */
// 2. When the children contains constructs that always generated nested Arrays(注:嵌套数组),
// e.g. <template>, <slot>, v-for, or when the children is provided by user
// with hand-written render functions / JSX. In such cases a full normalization
// is needed to cater to all possible types of children values.
export function normalizeChildren (children: any): ?Array<VNode> {
return isPrimitive(children)
? [createTextVNode(children)]
: Array.isArray(children)
? normalizeArrayChildren(children)
: undefined
}
文章作者: lmislm
文章链接: http://lmislm.com/2019/06/22/2019-06-22/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LMISLMのBlog