h函数为什么叫h？

2023-09-13 20:12:53

h函数的由来

h函数的全称是Hyperscript函数，它是React框架中的一个重要的函数，它可以把一个简单的JS对象，解析成一个能够创建虚拟DOM树的函数，该函数可以传递给React框架进行渲染，生成UI。

h函数之所以叫h，是因为它的主要功能是创建虚拟DOM树，而虚拟DOM树的英文全称是Virtual Document Object Model，简称VDOM。VDOM是一个与真实DOM树相似的结构，但它并不是一个真正的DOM树，而是一个纯JS对象。

虚拟DOM树的主要作用是作为真实DOM树的中间层，当React需要更新UI时，它会先更新虚拟DOM树，然后再把虚拟DOM树转换为真实DOM树，并更新到浏览器中。这样可以大大提高UI的更新效率，因为虚拟DOM树的更新要比真实DOM树的更新快很多。

h函数的参数最多三个，但只有第一个是必传项，第二个参数和第三个都是可传项。

h函数的第一个参数是标签名，它可以是HTML标签名，也可以是自定义组件名。

h函数的第二个参数是属性对象，它可以是包含了标签属性名和属性值的普通对象。

h函数的第三个参数是子元素，它可以是一个字符串、一个数组、一个React组件或一个虚拟DOM树。

const element = h('div', { id: 'app' }, [
  h('h1', null, 'Hello, world!'),
  h('p', null, 'This is a paragraph.')
]);

这段代码使用h函数创建了一个虚拟DOM树。该虚拟DOM树由一个div元素、一个h1元素和一个p元素组成。

使用h函数创建虚拟DOM树有以下几个优点：

提高UI的更新效率： 虚拟DOM树的更新要比真实DOM树的更新快很多，因为虚拟DOM树是一个纯JS对象，而真实DOM树是一个由浏览器维护的结构。
减少内存消耗： 虚拟DOM树的内存消耗要比真实DOM树的内存消耗小很多，因为虚拟DOM树只保存了节点的必要信息，而真实DOM树还保存了一些额外的信息，例如节点在浏览器中的位置和大小。
提高代码的可读性和可维护性： 使用h函数创建虚拟DOM树可以使代码更具可读性和可维护性，因为h函数的语法非常简单，而且它可以把UI的结构和逻辑分开。