react为基础语言来使用taro

一个 Taro 应用由一个入口组件和至少一个页面组件所组成。

Taro 规范

1. 在 React 中使用这些内置组件前，必须从 @tarojs/components 进行引入。
2. 组件属性遵从大驼峰式命名规范。
3. 内置事件名以 on 开头，遵从小驼峰式（camelCase）命名规范。
4. React 中点击事件使用 onClick

事件和 Web 端一样。在事件回调函数中，第一个参数是事件对象，回调中调用 stopPropagation 可以阻止冒泡

入口组件

每一个 Taro 应用都需要一个入口组件（React 组件）用来注册应用。入口文件默认是 src 目录下的 app.js。

在入口组件中我们可以设置全局状态或访问小程序入口实例的生命周期。

// 引入react api
import React, { useEffect } from 'react'

// Taro 额外添加的 hooks 要从 '@tarojs/taro' 中引入
import { useDidShow, useDidHide } from '@tarojs/taro'

// 假设我们要使用 Redux
import { Provider } from 'react-redux'
import configStore from './store'

// 全局样式
import './app.css'

const store = configStore()

function App (props) {
  // 可以使用所有的 React Hooks
  useEffect(() => {})

  // 对应 onShow
  useDidShow(() => {})

  // 对应 onHide
  useDidHide(() => {})

  return (
    // 在入口组件不会渲染任何内容，但我们可以在这里做类似于状态管理的事情
    <Provider store={store}>
      {/* props.children 是将要被渲染的页面 */}
      {props.children}
    </Provider>
  )
}

export default App

页面组件

import React, { useEffect } from 'react'
import { View } from '@tarojs/components'
import {
  useReady,
  useDidShow,
  useDidHide,
  usePullDownRefresh
} from '@tarojs/taro'

function Index () {
  // 可以使用所有的 React Hooks
  useEffect(() => {})

  // 对应 onReady
  useReady(() => {})

  // 对应 onShow
  useDidShow(() => {})

  // 对应 onHide
  useDidHide(() => {})

  // Taro 对所有小程序页面生命周期都实现了对应的自定义 React Hooks 进行支持
  // 详情可查阅：【Hooks】
  usePullDownRefresh(() => {})

  return (
    <View className='index' />
  )
}

export default Index