本文已参与「新人创作礼」活动，一起开启掘金创作之路。

Snabbdom 基本使用

本篇目标

• 了解Snabbdom 的基本使用。

创建项目

• 打包工具为了方便使用 parcel ；

• 创建项目，并安装 parcel ；

  # 创建项目目录
  md snabbdom-demo
  # 进入项目目录
  cd snabbdom-demo
  # 创建 package.json
  npm init -y
  # 本地安装 parcel
  npm install parcel-bundler -D
  

• 配置 package.json 的 scripts ；

  "scripts": {
    "dev": "parcel index.html --open",
    "build": "parcel build index.html"
  }
  

• 创建目录结构

  │  index.html
  │  package.json
  └─src
              01-basicusage.js
  

导入 Snabbdom

Snabbdom 文档

• 看文档的意义：

  • 学习任何一个库都要先看文档；
  • 通过文档了解库的作用；
  • 看文档中提供的示例，自己快速实现一个 demo；
  • 通过文档查看 API 的使用；

• 文档地址：

  • github.com/snabbdom/sn…
  • 当前版本 v2.1.0

  # --depth 表示克隆深度, 1 表示只克隆最新的版本. 因为如果项目迭代的版本很多, 克隆会很慢
  git clone -b v2.1.0 --depth=1 https://github.com/snabbdom/snabbdom.git
  

安装 Snabbdom

• 安装 Snabbdom

  npm install snabbdom@2.1.0
  

导入 Snabbdom

• Snabbdom 的两个核心函数 init 和 h()

  • init() 是一个高阶函数，返回 patch()
  • h() 返回虚拟节点 VNode，这个函数我们在使用 Vue.js 的时候见过

import { init } from 'snabbdom/init'
import { h } from 'snabbdom/h'
const patch = init([])

注意：此时运行的话会告诉我们找不到 init / h 模块，因为模块路径并不是 snabbdom/int，这个路径是在 package.json 中的 exports 字段设置的，而我们使用的打包工具不支持 exports 这个字段，webpack 4 也不支持，webpack 5 支持该字段。该字段在导入 snabbdom/init 的时候会补全路径成 snabbdom/build/package/init.js

"exports": {
    "./init": "./build/package/init.js",
    "./h": "./build/package/h.js",
    ......
  }

• 如果使用不支持 package.json 的 exports 字段的打包工具，我们应该把模块的路径写全。

  • 查看安装的 snabbdom 的目录结构

import { h } from 'snabbdom/build/package/h'
import { init } from 'snabbdom/build/package/init'
import { classModule } from 'snabbdom/build/package/modules/class'

• 回顾 Vue 中的 render 函数

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

• thunk() 是一种优化策略，可以在处理不可变数据时使用。