Taro多端统一框架学习（三）Taro的组件和Taro的路由

从这节开始就要进入Taro的编码部分，Taro的编码是用React的方式，现在的React在普及用React Hooks的方式来书写React，那么在Taro的学习和使用中，我们也将以Hooks的方式来。

Taro使用Hooks的新特性

React Hooks的优缺点

既然我们要用Hooks来写，我们就要了解React Hooks的优缺点，为什么要用Hooks，那么我们就来看下Hooks的优缺点吧！
这个优缺点是通过和传统的React.Component进行对比得出的。

React Hooks的优点

更容易复用代码
清爽的代码风格
代码量更少
更容易发现无用的状态和函数
更容易拆分组件

React Hooks的缺点

状态不同步
副作用代码从主动式变成响应式

如何避免React Hooks的常见问题

不要在useEffect里面写太多的依赖项，划分这些依赖项成多个useEffect，这样更好维护
如果你碰到状态不同步的问题，可以考虑下手动传递参数到函数。如：

 // showCount的count来自父级作用域 
   const [count,setCount] = useState(xxx); 
   function showCount(){ console.log(count) } 
   
   // showCount的count来自参数 
   const [count,setCount] = useState(xxx); 
   function showCount(c){ console.log(c) }

一定要加入eslint-plugin-react-hooks这个插件，并且重视它的警告
使用useRef来保存你的引用并在re-render的时候主动更新ref的对应属性，这样可以避免“引用是旧”的这个烦人的问题，但这种方式hack味道浓郁。

使用Hooks来改写Index组件

在src/pages/index/index.jsx文件：
原文件：

import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.less'

export default class Index extends Component {

  componentWillMount () { }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  config = {
    navigationBarTitleText: '首页'
  }

  render () {
    return (
      <View className='index'>
        <Text>Hello world!</Text>
      </View>
    )
  }
}

修改成hooks方式：

import Taro, { useState } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.less'

function Index(){
  
  const [userName] = useState('Hello Taro!')

  return (
    <View>
      <Text>{userName}</Text>
    </View>
  )
}

export default Index

如果你对React Hooks不熟悉的话，这里有一套免费的Hooks学习视频教程：https://www.jspang.com/detailed?id=59
如果您对React也不太熟悉的话，没关系这边有一整套的React学习视频，学习完后上手项目没有问题的：https://jspang.com/detailed?id=56

Taro中组件传值

使用Taro 的一个好处就是要可以用组件化的方式进行编程，所以编写组件在Taro中是每天都需要作的工作。
下边我们先来创建一个自组件，然后进行组件的传值，Taro的组件传值跟React的一样利用props，因此如果你对React的组件传值比较熟悉的化，这里很容易理解。

在Taro项目中的src/pages/index文件夹下面建立一个Child组件

child.jsx组件

import { View, Text } from '@tarojs/components'
function Child(){
  return ( 
    <View><Text>我是子组件</Text></View>
  )
}

然后在Index组件中引入，这里给出全部代码方便学习

import Taro, { useState } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.less'
import Child from "./child"

function Index(){
  
  const [userName] = useState('Hello Taro!')

  return (
    <View>
      <Text>{userName}</Text>
      <Child></Child>
    </View>
  )
}

export default Index

父组件向子组件传值

在上边说过，Taro的传值跟React的一样，父组件向子组件传值是通过props进行；
在Taro中也是可以这样传值的，现在修改index.jsx代码，把userName传递给子组件。

import Taro, { useState } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.less'
import Child from "./child"

function Index(){
  
  const [userName] = useState('Hello Taro!')

  return (
    <View>
      <Text>{userName}</Text>
      <Child userInfo={userName} ></Child>
    </View>
  )
}

export default Index

传递后，子组件要增加props参数，然后才能用props进行接收。

import { View, Text } from '@tarojs/components'
function Child(props){
  return ( 
    <View>
        <Text>我是子组件</Text>
        <View><Text>接收来自父组件的值:{props.userInfo}</Text></View>
    </View>
  )
}

export default Child

这个组件间的传值非常的简单，当我们会用组件的形式编写页面和组件时，你就可以作一些小东西了。
但现在你可以看到，我们把页面和组件放到了一个文件夹下，并且都使用了jsx扩展名。
那Taro时如何区分那些是组件，那些是页面的？
其实它是通过自身的路由来区分的，只要配置路由的，就是页面，没配置的就默认是组件。
下边我们来看下Taro中的路由吧！

Taro 路由配置和介绍

Taro中的路由和React 的路由不同，它是通过app.jsx中的pages来配置的，并且谁配置在第一个数组位置，谁就是默认打开的首页。
在这里插入图片描述

首先配置路由

新建一个页面

在/src/pages/文件夹下，建立一个/blog文件夹，在文件夹下面建立一个blog.jsx文件，写入下面的代码:

import {View , Text} from '@tarojs/components'
function Blog(){
    return (
        <View>
            <Text>Blog Page</Text>
        </View>
    )
}
export default Blog

路由配置

有了页面之后就可以到/src/app.jsx下，然后在pages的数组里面加入代码。

pages: [
    'pages/blog/blog',
    'pages/index/index'
],

这里需要注意一点，就是你不需要用import引入Blog页面，这个Taro为我们自动做好了。修改完成后，可以到浏览器中看一下，可以看到默认页面已经变成了Blog页面了。

页面间的跳转

页面跳转的方法

Taro提供了6个相关的导航API，我们可以使用这些API进行跳转，需要注意的是这些有些是小程序专用的。

navigateTo: 最基本的跳转方式，可以返回上级页面。三端都支持的，小程序、H5、React Native。
redirectTo：不记录上集页面，直接跳转。三端都支持的，小程序、H5、* React Native。
switchTab： Tab之间进行切换，这个要配合Taro的导航栏一起使用，三端都支持的，小程序、H5、React Native。
navigateBack: 返回上一级页面，这个在小程序中常使用，三端都支持的，小程序、H5、React Native。
relaunch：关闭所有额面，打开到应用内某个页面。三端都支持的，小程序、H5、React Native。
getCurrentPages: 获取当前页面信息所用，这个H5是不支持的。（注意）

页面跳转Demo

做个Demo，我们从Blog页面，跳转到Index页面，我们的程序如何来编写。

为了方便学习这里给出blog.jsx的全部代码：

import Taro from '@tarojs/taro'
import {View , Text ,Button} from '@tarojs/components'
function Blog(){
    const gotoIndex=()=>{
        Taro.navigateTo({url:'/pages/index/index'})
    }
    return (
        <View>
            <Text>Blog Page</Text>
            <Button onClick={gotoIndex}>我要去Index页面</Button>
        </View>
    )
}
export default Blog

这样我们就实现了Taro中路由的跳转。

Taro路由传参

Taro的路由传参利用查询字符串的形式

Taro中进行传参，一般会使用查询字符串的形式，也就是在跳转的url上，加一个?问号的形式，然后后边跟上参数。

现在我们就在Blog.jsx页面用，useState的形式声明一个变量，再通过跳转把值带到Index.jsx页面。

import Taro ,{useState}from '@tarojs/taro'
import {View , Text ,Button} from '@tarojs/components'
function Blog(){

    const  [blogTitle,setBlogTitle]=useState('JSPang Blog')

    const gotoIndex=()=>{
        Taro.navigateTo({url:'/pages/index/index?blogTitle='+blogTitle})
    }
    return (
        <View>
            <Text>Blog Page</Text>
            <Button onClick={gotoIndex}>我要去Index页面</Button>
        </View>
    )
}
export default Blog

接收传递参数并显示在页面上

在参数已经可以传递了，那如何在Index.jsx进行接收那，其实也非常简单。只要使用this.$router.params就可以进行接收。

当然我们要接收参数，可以在useEffect()中进行（useEffect是React Hooks的方法，不了解的同学请去了解下），

useEffect(()=>{
setBlogTitle(this.$router.params.blogTitle)
},[])

为了更好的学习，这给出接收的全部代码，
index.jsx的代码：

import Taro, {  useState ,useEffect} from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import Child from './child.jsx'
import './index.less'

function Index(props){
  const [userName ,setUserName] = useState('Hello World!!!!')
  const [blogTitle,setBlogTitle] = useState('')
  useEffect(()=>{
    setBlogTitle(this.$router.params.blogTitle)
  },[])
  return ( 
    <View>
        <Text>{userName}</Text>
        <Child userName={userName}></Child>
        <View>{blogTitle}</View>
    </View>
  )

}

export default Index

多参数的传递和接收

多个参数和多个参数的接收，传递的时候只要用&进行链接就可以了，比如下面这样。（有前端开发经验的同学，对这个肯定不会陌生）

Taro.navigateTo({url:'/pages/index/index?blogTitle='+blogTitle+'&introduce='+introduce})

为了学习方便，这里给出blog,jsx的全部代码：

import Taro ,{useState}from '@tarojs/taro'
import {View , Text ,Button} from '@tarojs/components'
function Blog(){
introduce
    const  [blogTitle,setBlogTitle]=useState('JSPangBlog')
    const  [introduce,setIntroduce]=useState('111111')

    const gotoIndex=()=>{
        Taro.navigateTo({url:'/pages/index/index?blogTitle='+blogTitle+'&introduce='+introduce})
    }
    return (
        <View>
            <Text>Blog Page</Text>
            <Button onClick={gotoIndex}>我要去Index页面</Button>
        </View>
    )
}
export default Blog

接收参数跟单参数接收方法一样，不作过多介绍，直接给出代码，
index.jsx代码：

import Taro, {  useState ,useEffect} from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import Child from './child.jsx'
import './index.less'

function Index(props){
  const [userName ,setUserName] = useState('Hello World!!!!')
  const [blogTitle,setBlogTitle] = useState('')
  const  [introduce,setIntroduce]=useState('')
  useEffect(()=>{
    setBlogTitle(this.$router.params.blogTitle)
    setIntroduce(this.$router.params.introduce)
  },[])
  return ( 
    <View>
        <Text>{userName}</Text>
        <Child userName={userName}></Child>
        <View>{blogTitle}</View>
        <View>{introduce}</View>
    </View>
  )

}

export default Index

本篇主要对Taro用React Hooks的方式编写组件以及组件的传参，还有路由和路由参的介绍，如果你对React Hooks不熟悉的要恶补一下React Hooks的知识，如果你对React还有JSX语法也不熟悉，更要多恶补一下了。

jason_renyu

发布了42 篇原创文章 · 获赞 9 · 访问量 6万+

私信关注