01 Taro入門

一.Taro簡介

1.Taro基礎概念

• Taro是一套遵循React語法規範的多端開發解決方案
• 使用Taro只書寫一套代碼（Nerv 類React代碼），再通過Taro的編譯工具，將源代碼分別編譯出可以在不同端（微信小程序、H5、RN等）運行的代碼

2. Taro的安裝

• 安裝Taro開發工具@tarojs/cli
• 使用npm或者yarn全局安裝，或者直接使用npx
• npm install -g @tarojs/cli
• yarn global add @tarojs/cli

3.Taro的使用

• 使用命令創建模板項目taro init myApp
• 開發期啓動命令
  • npm run dev:h5 Web
  • npm run dev:weapp 微信小程序
  • npm run dev:alipay 支付寶小程序
  • npm run dev:swan 百度小程序
  • npm run dev:rn ReactNative

4.Taro目錄結構

| —— dist 編譯結果目錄 - 不同格式打包後的文件都在此文件夾下
| —— config 編譯目錄
|             | —— dev.js 開發時配置
|             | —— index.js 默認配置
|             | —— prod.js 打包時配置
| —— src  源碼目錄
|             | —— pages 頁面文件目錄
|             |              | —— index index頁面目錄
|             |              |             | —— index.js index頁面邏輯
|      		  | 			 |             | —— index.css index頁面樣式
|             | —— app.css 項目總通用樣式
|             | —— app.js 項目入口文件[配置路由,Taro在編譯成小程序時會將路由裏的組件視爲頁面,不是路由中的組件編譯成組件]
| —— package.json

二.生命週期 & State

1.實例代碼及相關生命週期介紹

• 實例代碼

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

export default class Index extends Component {

  config = {
    navigationBarTitleText: '首頁'
  }

  // 生命週期只能對state變量使用setState進行管理,對其他定義的變量無法管理
  state = {
    name: 'Hello Jack'
  }

  componentWillMount () { 
    // 在第一次渲染之前執行,只執行一次
    console.log('第一次渲染之前執行')
  }

  componentDidMount () {
    // 在第一次渲染之後執行,只執行一次
    console.log('第一次渲染之後執行')
    // 修改state中的值只可以使用setState進行,調用setState後還會再次調用render()渲染數據
    this.setState({
      // 此更改只會更新name屬性值,不會更改其他state中的屬性值
      name: 'Hello Jack!'
    })
  }

  componentWillUpdate () {
    // state數據將要更新
    console.log('state數據將要更新')
  }

  componentDidUpdate () {
    // state數據更新過後
    console.log('state數據更新過後')
  }

  /**
   * @param {*} nextProps 下一個的props值
   */
  componentWillReceiveProps (nextProps) {
    // 此事件會在父組件傳遞給子組件的參數發生改變時觸發
  }

  /**
   * @param {*} nextProps 通過父組件傳給子組件的對象Props
   * @param {*} nextState 下一次的state狀態值
   */
  shouldComponentUpdate (nextProps, nextState) {
    // 檢查此次setState是否要進行render調用
    return true; // 通過返回的true或false決定此次setState操作是否需要調用render渲染頁面
    // 此方法通常用於多次setState調用時,判斷狀態決定是否更新,提升render性能.比如if(nextState.text=='Jack')時才return true
    // 如果其中使用this.state.value:此時獲取的state是沒改前的state;使用nextState則是判斷修改後的
  }

  componentWillUnmount () { 
    // 卸載時執行, 只執行一次
    console.log('卸載時執行')
    // 什麼時候卸載呢?
    // 從A頁面跳到B頁面被銷燬時
    // 組件被頁面刷新渲染時執行
  }

  componentDidShow () { 
    // reactjs是不存在的
    // 但是在Taro是存在的
    // 頁面顯示時觸發
    console.log('頁面顯示時觸發')
  }

  componentDidHide () { 
    // 頁面隱藏時觸發
    console.log('頁面隱藏時觸發')
  }

  getName() {
    return '1111111'
  }

  render () {
    // this表示當前index實例對象
    // 渲染render中不論使用的是對象也好,方法也好,都可以執行獲取結果返回
    return (
      <View className='index'>
        <Text>{this.state.name}</Text>
      </View>
    )
  }
}

• 調用結果

第一次渲染之前執行
頁面顯示時觸發
第一次渲染之後執行
state數據將要更新
state數據更新過後

2.生命週期與State注意

// setState設置state後取值不一定是更改後的
this.setState({name:'Jack'})
console.log(this.state.name) // 打印出來的不一定是Jack,可能是之前值,因爲是異步的

// 採用setState的第二個參數回調函數的方式可以獲取到更改後的state值
this.setState({name:'Jack'}, ()=> {
	console.log(this.state.name) // 此時一定是Jack
})

• 狀態更新一定是異步的
• React中的狀態更新不一定是異步的
• 必須使用setState({})更新state中的數據，直接賦值是無效的