Recompact 应用浅析

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