Taro 面试题

基础概念

1. Taro 是什么？它的核心特点有哪些？

Taro 是京东开源的 多端统一开发框架，基于 React 语法，可编译到 微信小程序、H5、React Native 等多个端。

核心特点：

• 多端适配：一套代码运行多个端
• 支持 React 生态：Hooks、Redux、MobX、Context API 等
• 组件化开发：提高代码复用性
• 基于 JSX：类似 React 组件开发方式
• 良好生态：支持 npm 包、TypeScript、ES6+

---

2. Taro 和原生小程序的区别是什么？

对比项	Taro	原生小程序
开发语言	React + JSX / TS	WXML + WXSS + JS
跨端支持	支持 H5、小程序、RN 等	仅支持单个端
状态管理	Redux、MobX、Recoil	需手动管理状态
组件化	React 组件方式	原生组件
生态	可用 React 生态	受限于小程序 API

---

3. Taro 支持哪些端？它是如何实现多端兼容的？

支持的端：

• 小程序：微信 / 支付宝 / 百度 / 抖音 / QQ / 快手
• H5 端
• React Native
• 快应用（华为、OPPO）

多端兼容原理：

• 编译时适配（转换成不同端的原生代码）
• 封装统一 API（如 Taro.request() 适配 wx.request() 和 fetch）
• 条件编译：

  if (process.env.TARO_ENV === 'weapp') {
    console.log('微信小程序');
  } else if (process.env.TARO_ENV === 'h5') {
    console.log('H5 端');
  }
  

---

4. Taro 3 和 Taro 2 的主要区别是什么？

对比项	Taro 2	Taro 3
核心架构	基于 Nerv.js	直接基于 React
Hooks 支持	受限	完全支持
跨端支持	编译时转换	运行时适配
生命周期	兼容类组件生命周期	支持 React 生命周期

---

5. 如何使用 Taro 创建一个新项目？

npx @tarojs/cli init my-taro-app
cd my-taro-app
npm install
npm run dev:weapp  # 运行微信小程序
npm run dev:h5     # 运行 H5

---

项目实践

6. Taro 项目的目录结构

├── src                 
│   ├── pages         # 页面文件
│   │   ├── index    
│   │   │   ├── index.tsx
│   │   │   ├── index.scss
│   ├── components    # 组件
│   ├── store         # 状态管理
│   ├── app.tsx       # 入口文件
├── taro.config.js    # Taro 配置

---

7. Taro 如何进行全局状态管理？

支持 Redux、MobX、Recoil、Zustand。

示例（MobX）：

import { makeAutoObservable } from 'mobx';

class CounterStore {
  count = 0;
  constructor() {
    makeAutoObservable(this);
  }
  increment() {
    this.count += 1;
  }
}

export default new CounterStore();

---

8. Taro 组件和 React 组件的区别？

Taro 组件可以 编译为小程序组件，但不支持 DOM 操作，需用 Taro.createSelectorQuery() 获取节点信息。

---

9. 在 Taro 中如何发送 HTTP 请求？

Taro.request({
  url: 'https://api.example.com/data',
  method: 'GET',
}).then(res => console.log(res.data));

---

10. Taro 中如何实现页面间的跳转？

Taro.navigateTo({ url: '/pages/detail/index' });

---

11. 如何在 Taro 里使用小程序 API？

Taro.getSystemInfo().then(res => console.log(res));

---

12. Taro 中如何处理图片和静态资源？

import logo from '../../assets/logo.png';
<Image src={logo} />

---

13. useEffect 和 componentDidMount 区别？

useEffect 可依赖更新，而 componentDidMount 只执行一次：

useEffect(() => {
  console.log('组件挂载');
}, []);

---

14. 如何在 Taro 里实现 WebView 嵌套 H5 页面？

<WebView src="https://www.example.com" />

---

15. 如何在 Taro 里引入第三方 npm 包？

npm install lodash

---

性能优化

16. Taro 的运行时架构？

Taro 3 直接使用 React 运行时，无需编译 Nerv.js。

---

17. 如何优化 Taro 小程序的包体积？

• 使用 分包加载
• 开启 Tree Shaking
• 按需加载 组件

---

18. 如何使用 lazyload 进行懒加载？

<Image src={imgUrl} lazyLoad />

---

19. Taro 组件通信方式？

• Props（父子组件）
• Context API（全局）
• Redux / MobX（复杂状态管理）

---

20. 如何提高 Taro 渲染性能？

• 使用 React.memo
• 减少 setState 触发频率

---

底层原理

21. Taro 是如何实现多端编译的？

• 编译时转换（React 代码转换为小程序代码）
• 运行时适配（Taro 3 直接使用 React）

---

22. Taro 的 JSX 编译过程？

JSX 解析 → 转换 AST → 生成小程序代码。

---

23. Taro 如何兼容不同端的 API？

通过 Taro 统一封装，如 Taro.request() 适配 wx.request() 和 fetch。

---

24. Taro 编译成小程序代码的流程？

JSX → AST 解析 → 代码转换 → 输出小程序 wxml/json/js。

---

25. Taro 的 Hooks 机制与 React Hooks 有何不同？

Taro Hooks 不能操作 DOM，React Hooks 可以。

---

实战问题

26. 如何支持 TypeScript？

创建项目时选择 TypeScript，或手动安装：

npm install typescript -D

---

27. 如何封装公共组件？

const Button = ({ text }) => <View className="btn">{text}</View>;
export default Button;

---

28. Taro 的样式兼容问题？

• 使用 rpx 适配
• 通过 process.env.TARO_ENV 区分样式

---

29. 如何使用 useRef 访问 DOM？

const ref = useRef();
useEffect(() => {
  Taro.createSelectorQuery().select(ref.current).boundingClientRect(console.log).exec();
}, []);

---

30. 如何处理不同端的生命周期差异？

使用 Taro 的生命周期 API：

useDidShow(() => console.log('页面显示'));