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的优点

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

React Hooks的缺点

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

如何避免React Hooks的常见问题

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

 // 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) }

3. 一定要加入eslint-plugin-react-hooks这个插件，并且重视它的警告
4. 使用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语法也不熟悉，更要多恶补一下了。