试试这么读preact源码(一)- createElement/h 函数
栏目: JavaScript · 发布时间: 5年前
内容简介:哈哈,仔细看我们来看下上个版本的h方法:
V10
的 preact
学乖了,总算在源码阶段就更贴近 react
了:
function createElement(type, props, children) { //... } 复制代码
哈哈,仔细看 createElement
方法的三个参数,类 react
,就要从变量名开始!
形参的不同
我们来看下上个版本的h方法:
function createElement(nodeName, attributes){ // ... } 复制代码
新版本中新增了一个形参 children
( nodeName
, attributes
对应 type
, props
),这个变量的作用就是存储子组件的,先看下新版本对这个形参的处理:
if (arguments.length>3) { children = [children]; for (let i=3; i<arguments.length; i++) { children.push(arguments[i]); } } 复制代码
传入 createElement
方法的参数数目,如果大于3个,则第三个参数 children
重新定义位为一个数组,原值是这个数组的第一个元素,然后遍历这个方法第3位之后的所有参数,并作为元素压入 children
这个数组中。
上个版本的 createElement
方法也是通过遍历 arguments
来收集子组件的,不过它在函数外定义了一个全局对象和一个初始子组件的空数组:
// 将从第3位起的参数收集起来(其实就是一堆 h 方法的执行函数) const stack = []; // 定义一个初始子组件空数组 const EMPTY_CHILDREN = []; function h(nodeName, attributes) { // ... // 遍历h函数的参数,从第三个参数开始就是子组件 for (i = arguments.length; i-- > 2; ) { // 将从第3位起的参数收集起来(其实就是一堆 h方法的执行函数) stack.push(arguments[i]); } // ... } 复制代码
最终实现的效果是一样的,新版本用一个形参代替了函数外的两个变量,这两个变量虽然不是全局,但对于这个模块来说是共用的,这就引出了一个话题: 函数的副作用 。
旧版本中, h
函数内部改变了函数体外部的一个变量,在这个函数执行完成之后,这个对象不会被销毁,而且所指向的值也发生了改变,而这种改变就是 h
函数的副作用。
如果这个模块中另一个函数也用到了这个变量,那就可能会造成不可预估的bug,所以,这个副作用是可以避免的。
新版本的 h
方法用一个形参重新赋值为一个数组的操作都是在函数体内部做的,与外部没有任何联系,函数执行完成后,函数体内部的变量都会销毁,这样的优化是非常值得我们学习的。
移除了对子组件的遍历及类型判断
在旧版本中,函数内部会对 stack
这个收集子组件的数组元素做类型判断:
-
boolean
,将元素重新赋值为null
-
number
,转化成string
- 值为 null ,则重新赋值为空字符
新版本去掉这样的操作,主要是因为它将子组件的操作放在了 props
中
if (children != null) { props.children = children; } 复制代码
后面会讲到新版本对 props
专门做了一个模块及方法 diff/props.js
中的 diffProps
函数。
新增了 createVNode
方法,创建 vnode
对象不在用 new
关键字
旧版本的虚拟 dom
是通过实例话 Vnode
类来实现的
const VNode = function VNode() {}; let p = new VNode(); p.nodeName = nodeName; p.children = children; p.attributes = attributes == null ? undefined : attributes; p.key = attributes == null ? undefined : attributes.key; 复制代码
创建一个虚拟 dom
,就要 new
一个对象,学过js的人都听过, new
是很耗性能的,具体可以参考这篇文章: prototype, constructor and new
。
新版本中没有在 createElement
这个函数内部直接做创建,而是调用了一个 createVNode
函数:
export function createVNode(type, props, key, ref) { const vnode = { type, props, key, ref, _children: null, _dom: null, _lastDomChild: null, _component: null }; vnode._self = vnode; if (options.vnode) options.vnode(vnode); return vnode; } 复制代码
这个函数的职责就是创建一个虚拟 dom
,首先在函数内部定义了一个字面量 vnode
,它有若干的属性,其中要注意的是以 _
开头的都是系统内部会使用到的,这里只是做了一个初始值:
-
type
虚拟dom的元素类型,如 div span ,一个文本类型,或者是一个function
-
props
通过jsx传入的属性 -
key
唯一键值 -
ref
返回虚拟dom的真是dom -
_children
子组件集合 -
_dom
真实dom -
_lastDomChild
子组件中的最后一个dom -
_component
指向的子组件 -
_self
缓存了虚拟dom本身信息
新版本把创建虚拟 dom
独立成一个小方法供其他模块复用这个逻辑,尤其是在 diff
子组件的时候会递归调用。
createElement
函数讲完了,其实我觉得这个函数可以说是 preact
真正的入口函数,在后续会讲到 render
的时候就会发现,虚拟 dom
是一切的开始!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- Vue源码: 构造函数入口
- Hashmap源码解析-构造函数
- Hashmap源码解析-扩容函数
- PHP 源码 — is_array 函数源码分析
- kotlin源码阅读——函数式编程
- Vue 源码中一些util函数
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
数字时代的营销战略
曹虎、王赛、乔林、【美】艾拉·考夫曼 / 机械工业出版社 / 2017-1 / 99.00元
菲利普•科特勒说,市场比市场营销变得更快(Market changes faster than Marketing),在这个变革的时代,从硅谷、波士顿到北京、上海、深圳,我们正在重新定义公司,重新定义组织,重新定义战略;同样地,营销亦需要重新定义。 从本质上讲,营销战略只有两个时代:实体时代与比特时代,也可称为工业时代与数字时代。从5年前开始,第二个时代正在向未来20年展开画卷,数字创新型企......一起来看看 《数字时代的营销战略》 这本书的介绍吧!