从零手写简易 Taro：20 行 JSX 如何变成小程序？（硬核实战）

⭐️ 作者前言​

我是 代码不加糖。

上一讲我们拆解了 Taro 架构，今天直接 造轮子！

本篇将用 不到 150 行 JS ，实现一个 能跑的简易 Taro，让你彻底明白：

• JSX 如何变成小程序模板

• 虚拟 DOM 如何 Diff

• setData是怎么来的

**建议收藏，这是你跨端能力的封神之战。**​ 🚀

---

一、我们要实现什么？

✅ 目标功能：

• 自定义 createElement

• 构建 Taro 虚拟 DOM

• Diff 算法

• 模拟 setData

• 输出小程序 WXML

❌ 不包含：

• Babel / Webpack

• 真实小程序环境

---

二、Step 1：Taro 的虚拟 DOM 定义

1️⃣ VNode 数据结构

function h(type, props = {}, children = []) {
  return {
    type,       // div / view
    props,
    children
  }
}

---

2️⃣ JSX 会被编译成什么？

<View className="box">
  <Text>Hello</Text>
</View>

↓（Babel 转译后）

h('View', { className: 'box' }, [
  h('Text', {}, ['Hello'])
])

---

三、Step 2：渲染函数（Render）

function render(vnode) {
  if (typeof vnode === 'string') {
    return vnode
  }

  const { type, props, children } = vnode

  let html = `<${type}`

  for (const key in props) {
    html += ` ${key}="${props[key]}"`
  }

  html += '>'

  children.forEach(child => {
    html += render(child)
  })

  html += `</${type}>`
  return html
}

✅ 此时我们已经能输出类似 WXML 的字符串

---

四、Step 3：Diff 算法（Taro 的核心）

1️⃣ Diff 策略（简化版）

function diff(oldVNode, newVNode) {
  if (oldVNode.type !== newVNode.type) {
    return { replace: newVNode }
  }

  const patches = {}

  // props diff
  for (const key in newVNode.props) {
    if (oldVNode.props[key] !== newVNode.props[key]) {
      patches[key] = newVNode.props[key]
    }
  }

  // children diff（简化）
  if (JSON.stringify(oldVNode.children) !==
      JSON.stringify(newVNode.children)) {
    patches.children = newVNode.children
  }

  return patches
}

📌 真实 Taro 的 Diff 更复杂，但思想一致

---

五、Step 4：模拟 setData

1️⃣ Taro Component 基类

class Component {
  constructor() {
    this.state = {}
    this.vnode = null
  }

  setState(partialState) {
    this.state = { ...this.state, ...partialState }

    const newVNode = this.render()
    const patches = diff(this.vnode, newVNode)

    this.applyPatches(patches)
    this.vnode = newVNode
  }

  applyPatches(patches) {
    console.log('🚀 setData:', patches)
  }

  render() {
    throw new Error('render() must be implemented')
  }
}

---

六、Step 5：写一个 Taro 页面

class Index extends Component {
  constructor() {
    super()
    this.state = { count: 0 }
    this.vnode = this.render()
  }

  render() {
    return h('View', { className: 'container' }, [
      h('Text', {}, [`Count: ${this.state.count}`]),
      h('Button', {
        onClick: () => this.setState({ count: this.state.count + 1 })
      }, ['Add'])
    ])
  }
}

---

七、Step 6：初始化 & 首次渲染

const app = new Index()

console.log('初始渲染：')
console.log(render(app.vnode))

app.setState({ count: 1 })

---

八、控制台输出效果

初始渲染：
<View className="container">
  <Text>Count: 0</Text>
  <Button onClick="...">Add</Button>
</View>

🚀 setData: { children: [...] }

✅ 这就是 Taro 更新机制的雏形

---

九、与真实 Taro 的对应关系

我们的实现	真实 Taro
h()	Taro.createElement
diff()	Taro Diff
setState()	setData
render()	小程序模板

---

十、总结一句话（面试必背）

Taro 的本质，是用 React/Vue 的 DSL 描述 UI，通过自研 VDOM 和 Diff，最终转换成各端原生的渲染指令。

---

📢 写在最后

如果你亲手敲完了这份代码：

✅ 点赞 👍（证明你真的懂了）

✅ 收藏 ⭐️（面试前复习用）

✅ 关注我 🚀（持续输出前端底层源码）

💬 评论区互动：

你觉得 Taro 最难理解的部分是什么？

是编译时？还是运行时？还是双线程？