前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >实战教程 | 初次使用Taro、react、hook开发小程序

实战教程 | 初次使用Taro、react、hook开发小程序

作者头像
极乐君
发布2021-05-20 10:22:10
2.2K0
发布2021-05-20 10:22:10
举报
文章被收录于专栏:极乐技术社区

前言

首次开发小程序,谈谈自己对taro的看法以及遇到的一些坑和注意点,本次开发使用了Taro的框架,公司专家对框架做了bug修复,打成了私包,采用react+hook的方式去开发业务,16.8.0发布hook之后,一直采用hook的方式编写react,因此在整体react版本>16.8.0的情况下,我都会使用hook去写,强烈推荐读者也逐渐从类组件转成函数组件,会比写类组件很舒服。

Taro简介

Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序 / H5 等应用。现如今市面上端的形态多种多样,Web、React Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

官网:docs.taro.zone/docs/README

目前Taro已经更新到3.x版本,相较于 Taro 1/2 采用了重运行时的架构,让开发者可以获得完整的 React/Vue 等框架的开发体验,但是带来的性能成本很大。总的来说对于初学者,taro实现了一套代码多端小程序复用的需求,还是很好的解决方案,值得入手学习,但确实也有不少本身框架的坑等着你。

Hook

Hook是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。喜欢函数式编程的不妨使用hook来编写组件。

官方文档:zh-hans.reactjs.org/docs/hooks-…

通常开发过程中常用的React hook主要有以下几个:useStateuseCallback、useMemo、useEffect

Taro也提供了很多的hook(包括很多的生命周期和功能):

Taro Hook指南:taro-docs.jd.com/taro/docs/h…

读者可以根据需要,从中选择你想要功能对应的hook。

常用的Taro Hook:

useShareAppMessage

小程序分享

useShareAppMessage(res => {

return {

title: '自定义转发标题',

path: '/page/user?id=123'

}

})

useRouter

获取路由中参数

useReachBottom

配合页面配置onReachBottomDistance可以实现触底加载更多,方便快捷

useReachBottom(() => { console.log('onReachBottom')})

其他hook参考官网。

Hook使用注意点

useEffect

依赖最好不要超过三个,适当时候可以拆分成多个useEffect,保证每个副作用执行的时机和次数,如果使用了redux,为了避免缓存影响,可以适当的在useEffect后返回一个函数,执行初始化页面redux的操作。

useState

有时我们初始化state时会利用外部传参:

const { children } = props;

const hasChildren = children && children.length > 0;

const [isParent, setIsParent] = useState(hasChildren);

注意,state只会初始化一次,假如数据发生变化,第一次children为空,第二次有数据,state的值不会再发生变化,这时候需要结合useEffect重新给isParent赋值。

小程序接口API注意点

小程序的api存在不同版本的兼容性问题,因此在使用Api的时候一定要看清是什么版本开始支持的,比如微信的获取头像和昵称的api在微信>=7.0.9的版本中做了调整,在使用前记得兼容。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-05-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 极乐技术社区 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档