Taro2升级Taro3

754 阅读1分钟

为什么使用taro3

两者明显区别

Taro2重编译时,轻运行时,无法很好的使用React生态,属于类React语言;Taro2拥有更好的性能,因为直接编译成了小程序代码;

Taro3重运行时,轻编译时;可以使用React生态(不包含浏览器相关),完整的使用了React运行时;Taro3性能更弱一些,需要经过React运行时生成虚拟dom,然后通过小程序的data以及template来进行渲染,data包含了大量节点信息;

使用taro2-to-3@0.0.4

当前库无法直接满足项目需要,项目使用了typescript,而当前库不支持app.tsx的文件解析,同时因为typescript类型声明导致无法正常生成页面配置文件。基于此对Taro2-to-3进行了问题修复。

yarn 安装命令问题

screenshot-20221128-193305.png

入口文件解析方法改为tsx,支持app.tsx文件

screenshot-20221128-193322.png

页面配置文件某些情况下不生成问题

原转换方法中的

screenshot-20221128-193341.png

useMemoLocalName名称获取报错问题

screenshot-20221128-193357.png

增加ReactApi:memo

screenshot-20221128-193425.png

项目升级问题处理

  • @tarojs/redux 不兼容,可以直接替换成react-redux

    npm install redux react-redux

  • @tarojs/plugin-framework-react 缺失安装

    npm install @tarojs/plugin-framework-react

  • 如果工程中使用了taro-ui,也需要进行升级

    npm install @tarojs/plugin-framework-react

  • H5开发环境运行时报错

    Uncaught ReferenceError: $RefreshSig$ is not defined

    // babel.config.js 增加hot: false 关闭热更新
    
    module.exports = {
       presets: [
         ['taro', {
           framework: 'react',
           hot: false
         }]
       ]
     };
    
    

    具体原因以及解决方法参考当前链接 nervjs.github.io/taro-docs/d…

参考链接

  1. 从旧版本迁移到 Taro
  2. 小程序跨框架开发的探索与实践
  3. taro2-to-3
  4. taro2-to-3功能优化