Recompact 应用浅析

本贴最后更新于 2143 天前,其中的信息可能已经渤澥桑田

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 用变量存储,避免重复初始化

  • recompact
    1 引用
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 400 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...