从Preact源码看 createElement/h 函数之妙处

Preact 是一个轻量级的 JavaScript 库，它使用虚拟 DOM 来构建高效的用户界面。Preact 的核心之一就是 createElement 函数，它负责创建虚拟 DOM 元素。createElement 函数的用法非常灵活，可以接受不同的数量的参数。

当传入 createElement 方法的参数数目大于 3 个时，第三个参数 children 将被重新定义为一个数组，原值是这个数组的第一个元素。然后，遍历这个方法第 3 位之后的所有参数，并作为元素压入 children 这个数组中。最终实现的效果是一样的，新版本用一个形参代替了 ...。

举个例子，以下两种调用方式都是等价的：

createElement('div', { id: 'my-div' }, 'Hello, world!');
createElement('div', { id: 'my-div' }, ['Hello', ', ', 'world!']);

在第一种情况下，children 是一个字符串，而在第二种情况下，children 是一个包含三个字符串的数组。

h 函数是 createElement 函数的简化版本，它只接受两个参数：元素类型和属性对象。如果需要在元素中包含子元素，可以使用嵌套的 h 函数来实现。

例如，以下两种调用方式也是等价的：

h('div', { id: 'my-div' }, 'Hello, world!');
h('div', { id: 'my-div' }, [
  h('span', null, 'Hello'),
  ', ',
  h('span', null, 'world!')
]);

Preact 中的 createElement 和 h 函数都是非常灵活和强大的工具。它们可以用来创建各种各样的虚拟 DOM 元素，从而构建出丰富而交互性强的用户界面。

Preact 与 React 在元素创建方式上的差异

Preact 和 React 都是使用虚拟 DOM 来构建用户界面的 JavaScript 库。但是，它们在元素创建方式上存在一些差异。

在 React 中，使用 JSX 来创建虚拟 DOM 元素。JSX 是一种类似于 HTML 的语法，它可以让你在 JavaScript 代码中直接编写虚拟 DOM 元素。

例如，以下 JSX 代码创建了一个 div 元素，其中包含一个带有 id 为 "my-div" 的 span 元素：

<div>
  <span id="my-div">Hello, world!</span>
</div>

然后，可以使用 ReactDOM.render() 方法将 JSX 代码渲染到 DOM 中。

ReactDOM.render(<div>
  <span id="my-div">Hello, world!</span>
</div>, document.getElementById('root'));

在 Preact 中，没有使用 JSX。而是直接使用 createElement 和 h 函数来创建虚拟 DOM 元素。这使得 Preact 的代码更加简洁和易于理解。

例如，以下 Preact 代码创建了一个 div 元素，其中包含一个带有 id 为 "my-div" 的 span 元素：

createElement('div', null, [
  createElement('span', { id: 'my-div' }, 'Hello, world!')
]);

然后，可以使用 render() 方法将虚拟 DOM 元素渲染到 DOM 中。

render(createElement('div', null, [
  createElement('span', { id: 'my-div' }, 'Hello, world!')
]), document.getElementById('root'));

Preact 源码的简洁性和创造性

Preact 源码非常简洁和易于理解。这得益于 Preact 的设计哲学：简单、高效和可扩展。

Preact 源码中到处都是创造性的解决方案。例如，createElement 函数的实现非常巧妙，它可以处理不同数量的参数，并始终返回一个虚拟 DOM 元素。

此外，Preact 还使用了一些巧妙的技术来优化性能。例如，Preact 使用了一个称为 snabbdom 的虚拟 DOM diffing 算法，该算法可以非常高效地计算出需要更新的虚拟 DOM 元素。

Preact 源码的简洁性和创造性使其成为一个非常受欢迎的 JavaScript 库。它被许多知名的公司和个人使用，包括 Netflix、Uber 和 Airbnb。

总结

Preact 是一个非常强大和灵活的 JavaScript 库。它使用虚拟 DOM 来构建高效的用户界面。Preact 的 createElement 和 h 函数是创建虚拟 DOM 元素的两个核心函数。这两个函数都非常灵活和易于使用。Preact 源码非常简洁和易于理解。这得益于 Preact 的设计哲学：简单、高效和可扩展。Preact 源码中到处都是创造性的解决方案。这些解决方案使 Preact 成为一个非常高效和易于使用的 JavaScript 库。