React + TypeScript + Taro前端开发小结

前言

项目是一个段落，我们先记录一下。本文以一个前端新手的视角，记录了React、Taro相关技术的开发心得，遇到的问题和解决方法。

一直说要学React（这篇博客：第一次学React的代码让我头疼），这个项目要做H5前端+小程序，终于可以用React了~

在使用React的开发框架之前就听说过京东的Taro，就这样吧，直接打开代码。

关于反应

是的，感觉比Vue的模板写法自由多了。 Taro文档里的例子都是类组件，但是“前端老师”一开始推荐我用组件，现在全部用组件，react应该是这样写的，真香~

因为我写了一段时间，react 对我很友好，至少我可以无缝上手声明式 UI。

但是感觉React的生态太大了，更新太快了，有点碎片化。很多第三方库的官方文档跟不上更新速度（批评mobx，不容易伤人）

一开始是看某知乎大V的React and Redux书，应该是我懒的原因。我不认为这很容易理解。果然技术强的高手不一定擅长教学？ ~

参考关于

第一次用，但是作为一个天天用C#写后端的人，感觉处处熟悉~

不管怎样，它比 JS 好用 10,000 倍，而且类型提示很棒

我目前没有深入使用它。以后我会写博客来记录下我所拥有的。

参考Taro框架经验

框架是一个不错的框架，但是文档不是很完善，有些部分写的不是很清楚。感觉很多文档都是从微信小程序文档里抄来的。对于没有开发过微信小程序也没有看过微信官方文档的人来说，不是很友好。 （不过官方文档还是需要看的，不看的话，很多问题都找不到。）

然后Taro官方提供了一个UI库叫做，你用的话还是可以用的，但是更新太慢了。它的项目主页显示，上一次更新时间是去年（2021）6月份，到现在已经快一年了。时间没有移动。最新的稳定版还在2.x，Taro框架已经更新到第3版了。

因为我使用的Taro框架是3.x版本，所以只能硬着头皮上3的beta版本，导致出现一些奇怪的问题，头大。

除了这个接口库之外，Taro 官方还提供了另一个库，叫做 NutUI，不过它是基于 Vue 的。我不能使用这个项目。这个库非常勤奋地更新。上次更新是6小时前，Star也有。 4.2k，超过 3.9k。 ~~（好像React在京东不流行）~。

我还看到有一个名为 .貌似不错，更新很用心，不过Star才300多，不敢用~下次试试

我在使用时还参考了这些项目/代码/文档：

接下来进入正题，说一下遇到的一些问题/坑以及一般的解决方法。

页面路由问题

Taro 封装了路由相关的方法。等我做完项目，有时间翻看微信小程序文档，发现这东西跟小程序的路由很像。

PS：我讨厌这种路由设计。我不知道是谁想出了这个小程序。如果页面太多，维护起来也不容易~

在 app..ts 文件中配置路由，如下所示：

export default defineAppConfig({
  pages: [
    'pages/index/index',
    'pages/info/place',
    'pages/supply/index',
    'pages/user/login',
  ],
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: 'WeChat',

    navigationBarTextStyle: 'black'
  },
})

然后在你想跳转的地方使用Taro.({url: ‘pages/user/login’})

这里有个坑！太郎的热更新并不完美。添加新页面后，热更新不会生效。必须重启 yarn dev:h5 才能看到效果。一开始我是懵逼的~

地址参数问题

这个问题在我之前的博客：+Taro前后端分离项目实现企业微信登录有提到Taro本身提供()来为我们读取地址中的参数

比如我们在上面的路由跳转中添加了参数：Taro.({url: ‘pages/user/login?title=hello’})

那么我们需要像这样获取pages/user/login页面中的参数

import {useEffect} from "react"
import {useRouter} from "@tarojs/taro"
export default function () {
    const router = useRouter()
    
    useEffect(() => {
        console.log(router.params.title)
    }, [])
}

但是在读取微信登录服务器的回调参数时，却不起作用，而且无法检索。您必须自己匹配完整的链接 ..href。详情见我的博客：+ Taro前后端分离项目实现企业微信登录

芋头。不清除网址

这个看起来问题不大，但是也引起了一个小bug，就是我用微信登录后，退出时地址里的代码不会被清除，所以我可以用微信了再次不关闭页面。登录，代码还是老了，直接报错~

形成错误

说实话我不知道问题出在哪里

只有一页有这个问题。在最后一个输入框回车，表现是表单提交了，但是没有提交，页面变成重新刷新

我想不通

我不得不在最后添加一个隐藏的输入

 {
    }}
    disabled={true}
    border={false}
    style={{display: 'none'}}/>

网络请求封装

Taro 框架自带 Taro。可以用来请求，但是我用的时候，奇怪的是总是提示跨域。因为前期时间比较赶，所以没有深入，直接换成之前vue项目打包的axios。 ，果然axios好用~

（但是如果以后做小程序，应该还是要重构的，据说小程序不支持）

封装

感谢“前端老师coppy”提供的代码~

import {useState} from 'react'
export default function useYourState(state: T): [T, (state: Partial) => void] {
  const [_state, _setState] = useState(state);
  return [
    _state,
    (state: Partial) => {
      _setState((_state) => {
        return {
          ..._state,
          ...state
        };
      });
    }
  ];
}

这样你就不需要每次都添加…状态

使用前：

import {useState} from 'react'
export const LoginPage = observer(() => {
  const [state, setState] = useState({
    username: '',
    password: '',
  })
  
  setState({
      ...state,
      username: '', password: ''

  })
}

使用后：

import useYourState from "@/utils/coppy_state";
export const LoginPage = observer(() => {
  const [state, setState] = useYourState({
    username: '',
    password: '',
  })
  
  setState({
      username: '', password: ''
  })
}

生产力提高了~

全局状态管理

我没有使用大名鼎鼎的 redux，而是使用了更简单的 mobx

但是找到的示例文档不是很好（比如官方中文文档：）

最后还是求助了“前端老师”，搞定了

坑：代码

不需要全局打包，直接使用全局变量，当然你也可以使用React

商店定义

import {makeAutoObservable} from "mobx";
import {User} from "@/models/user";
import * as auth from '@/utils/auth'
export class UserStore {
  isLogin = false
  user: User | null = null
  token = ''
  constructor() {
    makeAutoObservable(this)

  }
  login(user: User, token: string) {
    this.user = user
    this.token = token
    this.isLogin = true
    // 保存登录数据到本地
    auth.login(token, user.username)
  }
  logout() {
    this.isLogin = false
    this.user = null
    this.token = ''
    auth.logout()
  }
}
export const myUserStore = new UserStore()

组件使用

import {View} from "@tarojs/components"
import {AtButton} from "taro-ui";
import {observer} from "mobx-react-lite";
import {myUserStore} from "@/store/user";
import Taro from "@tarojs/taro";
import {useEffect} from "react";
export const UserPage = observer(() => {
  useEffect(() => {
    if (!myUserStore.isLogin) {
      Taro.redirectTo({url: '/pages/user/login'})
    }
  }, [])

  return (
    
      用户中心
      用户名：{myUserStore.user?.first_name}
      退出登录
    
  )
  function logout() {
    myUserStore.logout()
    Taro.reLaunch({url: '/pages/index/index'})
  }
})
export default UserPage

参考 JSON 反序列化类

使用这个库：

模型定义，这个定义可以用JSON生成，网上有很多工具，比如：

export class User {
  username: string
  first_name: string
  last_name: string
  email: string
  date_joined: string
}

注意项目主页上的文档也是过期的，方法也过期了。你必须使用这个方法：

import {plainToInstance} from "class-transformer";
const user = plainToInstance(User, res.data.user)
myUserStore.login(user, res.data.token)