性能優(yōu)化選項

2020-04-28 10:27 更新

如果存在對性能要求很高的頁面,可以通過配置 turboPages 選項對某些頁面啟動性能優(yōu)化。如:

// remax.config.js
module.exports = {
turboPages: ['pages/index/index', 'pages/index2/*'],
};

上述配置將會對 pages/index/index 以及 pages/index2/ 下的所有頁面做性能優(yōu)化。

啟動性能優(yōu)化存在如下限制,建議沒有很迫切的性能需求不要輕易開啟這個選項。

  1. 目前只支持 支付寶 平臺使用。
  2. 開啟性能優(yōu)化的頁面,不能利用 react 動態(tài)特性 對 dom 結(jié)構(gòu)做出修改

關于第二點限制的一些 case:

  1. 修改 dom 結(jié)構(gòu):
function Component({ children }) {
return <View>{React.Children.map(children, child => (
<View>{child}</View>
))}</View>
}
...
<Component>
<View>view 1</View>
<View>view 2</View>
</Component>
  1. 修改 dom 的屬性:
function Component({ children }) {
return <View>{React.Children.map(children, child => (
React.cloneElement(child, { onInput: () => {} })
))}</View>
}
...
<Component>
<Input />
</Component>

如果你想讓這種修改屬性的行為可以運作,需要修改為:

function Component({ children }) {
return <View>{React.Children.map(children, child => (
React.cloneElement(child, { onInput: () => {} })
))}</View>
}
...
<Component>
{({ onInput }) =>
<Input onInput={onInput} />}
</Component>

可以看到優(yōu)化性能的同時會犧牲 React 的動態(tài)性,因此開發(fā)者需要做出取舍。


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

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號