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語法也不熟悉，更要多惡補一下了。