應(yīng)用的默認(rèn)入口文件為 src/app.js。不同于原生小程序中的 app.js,Remax 中的 app.js 是一個(gè) React 組件。
export default class App extends React.Component {render() {return this.props.children;}}
所有頁(yè)面組件都會(huì)以 App 子組件的方式渲染,所以你可以很方便的通過(guò) Context 來(lái)進(jìn)行數(shù)據(jù)共享。
注意在 Remax 中使用 getApp 是獲取不到 src/app.js 中定義的 App 組件的。 我們建議你忘記 getApp, 改用 Context 來(lái)共享狀態(tài)。App 組件中必須渲染 props.children,且不支持寫原生組件。
應(yīng)用配置通過(guò) app.config.js 實(shí)現(xiàn),對(duì)應(yīng)原生小程序中的 app.json。
例如:
// app.config.jsmodule.exports = {window: {navigationBarTitleText: '這是一個(gè)標(biāo)題',},};
Remax 優(yōu)先讀取默認(rèn)導(dǎo)出的配置,如果你開發(fā)的是多端共用的項(xiàng)目,則可以改為:
// app.config.jsconst title = '這是一個(gè)標(biāo)題';// 微信exports.wechat = {window: {navigationBarTitleText: title,},};// 支付寶exports.alipay = {window: {defaultTitle: title,},};
Remax 會(huì)根據(jù)構(gòu)建的目標(biāo)平臺(tái)自動(dòng)選擇配置。
應(yīng)用的生命周期可以直接寫在 App 組件上。
export default class App extends React.Component {// did mount 的觸發(fā)時(shí)機(jī)是在 onLaunch 的時(shí)候componentDidMount() {console.log('App launch');}onShow(options) {console.log('onShow', options);}render() {return this.props.children;}}
Remax 中的頁(yè)面當(dāng)然也是一個(gè) React 組件。
const IndexPage = () => {return <View>Hello world!</View>;};export default IndexPage;
假設(shè)你的頁(yè)面文件是 src/pages/index.js,那么這個(gè)頁(yè)面的配置文件就是 src/pages/index.config.js。
同 app.config.js 一樣,你可以默認(rèn)導(dǎo)出一個(gè)配置,也可以為不同的平臺(tái)導(dǎo)出不同的配置。
module.exports = {navigationBarTitleText: '這是一個(gè)頁(yè)面標(biāo)題',};
通過(guò) usePageInstance 可以獲取 Page 實(shí)例
import { usePageInstance } from 'remax'export default () => {const instance = usePageInstance();...}
Remax 在 instance 上設(shè)置了一些內(nèi)部邏輯相關(guān)的屬性,(包括 data 上面的值),不要隨意修改實(shí)例上的屬性。 這個(gè) hook 是為了方便調(diào)用頁(yè)面實(shí)例上的方法,如 selectComponent
對(duì)于 class 組件的頁(yè)面你可以直接在 class 上監(jiān)聽頁(yè)面的生命周期。
export default class IndexPage extends React.Component {// 頁(yè)面組件的 didMount 觸發(fā)時(shí)機(jī)是在 onLoad 的時(shí)候componentDidMount() {console.log('IndexPage load');}onShow() {console.log('IndexPage show');}render() {return <View>Hello world!</View>;}}
對(duì)于函數(shù)組件的頁(yè)面 我們提供了 hooks 來(lái)監(jiān)聽生命周期。
import { usePageEvent } from 'remax';export default () => {// onShow 生命周期usePageEvent('onShow', () => {console.log('onShow');});// 支付寶 onBack 回調(diào)usePageEvent('onBack', () => {console.log('onBack');});};
對(duì)于函數(shù)組件的 App, 為 useAppEvent
import { useAppEvent } from 'remax';export default function App(props) {useAppEvent('onShow', () => {console.log('這個(gè) hook 等用于 onShow');});useAppEvent('onShareAppMessage', () => {console.log('這個(gè) hook 等用于 onShareAppMessage');});return props.children;}
注意class 組件的生命周期回調(diào)只能用在頁(yè)面組件上,但是 hooks 可以用在任意的組件上。
Remax 將頁(yè)面參數(shù)通過(guò) props 傳遞給頁(yè)面組件,如:
export default props => {// 頁(yè)面參數(shù)console.log(props.location.query);return <View>view</View>;};
對(duì)于函數(shù)組件,也可以使用 useQuery hook,如:
import { useQuery } from 'remax';export default () => {// 頁(yè)面參數(shù)const query = useQuery();console.log(query);return <View>view</View>;};
你也可以通過(guò)小程序原生的方式獲取參數(shù)(通常在 onLoad 方法里獲?。?,包括場(chǎng)景值也是。
一般在 React 里,我們通過(guò)在 useEffect 來(lái)進(jìn)行頁(yè)面渲染成后需要處理的邏輯。但是在 Remax 中,useEffect 只是代表了 Remax 虛擬 DOM 處理完成,并不代表小程序渲染完成。 為了支持開發(fā)者可以觸及小程序渲染完成的時(shí)機(jī),我們添加了一個(gè)新的 hook:unstable_useNativeEffect。
import * as React from 'react';import { unstable_useNativeEffect, useShow } from 'remax';export default () => {const [width, setWidth] = React.useState(width, 0);const [height, setHeight] = React.useState(height, 0);useShow(() => {setTimeout(() => {setWidth(100)}, 3000)setTimeout(() => {setHeight(100)}, 3000)});unstable_useNativeEffect(() => {console.log('width', width, 'height', height);// 只有在 width 變化時(shí),才執(zhí)行這個(gè)邏輯。// 建議一定要寫 hooks 依賴,否則所有 setData 回調(diào)后,都會(huì)在這里執(zhí)行}, [width])...}
在上面的例子中:
更多建議: