recompact
是一款帮助你管理组件内部状态、属性、生命周期等的高阶组件库,在某些场景下合理的使用他们会帮你构建更简单的代码,你还可以利用它帮你做性能提升,最小化 setState
带来的开销。
场景 1
setState
只需渲染页面单个组件,减少性能开销
return (
<View style={Styles.wrap}>
<GradientButton disabled={this.state.disabled} text={"tap"} btnType={"btn_m"} onPress={this._login} />
<View/>
);
这个场景下,GradientButton组件
依赖于 disabled
控制是否点击状态。
在常规思路下我们必须通过 setState
改变 disabled
来达到目的。
但是这里有一个问题,setState
会带来整个页面的渲染开销,假设当前页面元素非常复杂,而且你不确定各个页面其他的元素是否对 state
做了性能优化,这种情况下为了改变一个按钮的状态而去渲染整个页面实在不是一个好的选择。
因此通过 recompact
来优化它,
render() {
const enhance = compose(
withState('disabled', 'setDisabled', false),
withHandlers({
disable: props => disabled => {
props.setDisabled(disabled)}})
)
const Button = enhance(({disabled, disable}) => {
this._disable = disable
return <GradientButton onRef={ref=>this._ref=ref} text={"登录"} btnType={"btn_l"} disabled={disabled} onPress={this._login} />
})
return (
<View style={Styles.wrap}>
<Button/>
</View>
);
}
在需要时调用 this._disable(true)
即可改变状态,通过 recompact
我们将 state
放在一个组件内部管理,而不需要在外部调用 setState
带来不必要的开销
场景 2
setState
hook 生命周期方法异步渲染单个组件
componentDidMount(){
NativeModule.RNBridge.getSwitchConfig(res => {
if(res){
res = JSON.parse(res);
this.setState(bidDescriptionText: res.CommonConfig.BidDescriptionText);
}
})
}
render() {
return (
<View style={Styles.wrap}>
<Text>{this.state.bidDescriptionText}</Text>
</View>
);
}
应用 recompact
_generateWithStateText() {
if (this._WithStateText) return this._WithStateText
const setStateWithHandler = recompact.withStateHandlers(
({initialText = null}) => ({
bidDescriptionText: initialText
}),
{
setText: ({bidDescriptionText}) => (text) => ({
bidDescriptionText: text
})
}
);
let OnLoadText = null
const WithStateText = setStateWithHandler(({bidDescriptionText, setText}) => {
if (OnLoadText === null)
OnLoadText = recompact.lifecycle({
componentDidMount: ()=>{
NativeModule.RNBridge.getSwitchConfig((res) => {
if (res) {
res = JSON.parse(res);
setText(res.CommonConfig.BidDescriptionText)
}
});
},
componentWillUnmount: ()=>{}
})(Text)
return (<OnLoadText style={Styles.score_wrap_text}>{bidDescriptionText}OnLoadText>)
});
this._WithStateText = WithStateText
return WithStateText
}
render() {
return (
<View style={Styles.wrap}>
<WithStateText/>
</View>
);
}
WithStateText
用变量存储,避免重复初始化
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于