一个 Taro 应用由一个入口组件和至少一个页面组件所组成。
Taro 规范
- 在 React 中使用这些内置组件前,必须从
@tarojs/components
进行引入。 - 组件属性遵从大驼峰式命名规范。
- 内置事件名以
on
开头,遵从小驼峰式(camelCase)命名规范。 - 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