框架

2020-04-28 16:33 更新

應(yīng)用

應(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)用配置

應(yīng)用配置通過(guò) app.config.js 實(shí)現(xiàn),對(duì)應(yīng)原生小程序中的 app.json。

例如:

// app.config.js
module.exports = {
window: {
navigationBarTitleText: '這是一個(gè)標(biāo)題',
},
};

Remax 優(yōu)先讀取默認(rèn)導(dǎo)出的配置,如果你開發(fā)的是多端共用的項(xiàng)目,則可以改為:

// app.config.js
const 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;
}
}

頁(yè)面

Remax 中的頁(yè)面當(dāng)然也是一個(gè) React 組件。

const IndexPage = () => {
return <View>Hello world!</View>;
};
export default IndexPage;

頁(yè)面配置

假設(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)題',
};

頁(yè)面實(shí)例

通過(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 可以用在任意的組件上。

頁(yè)面參數(shù)

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)景值也是。

小程序渲染 Effect

一般在 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])
...
}

在上面的例子中:

  • 頁(yè)面首次渲染成功后,會(huì)看到 console 輸出 width 0 height 0。
  • 3000 ms 后,更新了 width 的值,console 輸出 width 100 height 0。
  • 3000 ms 后, 更新了 height 的值,console 沒(méi)有新的輸出。


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)