一、Taro是什么

Taro 是京东开源的跨端开发框架。

官方目标：

一套代码，多端运行

可以编译到：

• 微信小程序
• 支付宝小程序
• 抖音小程序
• H5
• React Native
• HarmonyOS

例如：

<View>
  <Text>Hello Taro</Text>
</View>

编译后：

微信：

<view>
  <text>Hello Taro</text>
</view>

H5：

<div>
  <span>Hello Taro</span>
</div>

二、常见组件映射

HTML	Taro
div	View
span	Text
img	Image
button	Button
input	Input
textarea	Textarea
ul/li	View

三、CSS有什么区别

React：

.box {
  width: 100px;
}

Taro：

.box {
  width: 100px;
}

直接写px，taro自动转换单位。

四、状态管理

Redux

---

Zustand

---

Mobx

五、你最需要注意的坑

坑1：DOM不存在

React：

document.querySelector()

不能用。

---

React：

window

不能用。

---

坑2：不能直接操作元素

使用：

SelectorQuery

const query = Taro.createSelectorQuery();

  useReady(() => {
    // 页面初次渲染完成后查询
    const query = Taro.createSelectorQuery();
    query
      .select(`.${styles.logoContainer}`)  // 用 class 选择器
      .boundingClientRect((rect) => {
        if (rect) {
          console.log('宽度:', rect.width);
          console.log('高度:', rect.height);
          console.log('距顶部:', rect.top);
          // 根据读到的尺寸，再 setState 改样式
          // setLogoWidth(rect.width);
        }
      })
      .exec(); // ⚠️ 必须 exec() 才会真正执行
  });

坑3：包体积限制

微信小程序：

主包 ≤ 2MB

（当前规则可能随平台版本调整，但核心思想没变：主包要尽量小。）

所以：

代码分包

是Taro开发必学技能。