【React深入】从Mixin到HOC再到Hook(9)

Redux的connect

redux中的connect，其实就是一个HOC，下面就是一个简化版的connect实现：

export const connect = (mapStateToProps, mapDispatchToProps) => (WrappedComponent) => {  
  class Connect extends Component {  
    static contextTypes = {  
      store: PropTypes.object  
    }  
    constructor () {  
      super()  
      this.state = {  
        allProps: {}  
      }  
    }  
    componentWillMount () {  
      const { store } = this.context  
      this._updateProps()  
      store.subscribe(() => this._updateProps())  
    }  
    _updateProps () {  
      const { store } = this.context  
      let stateProps = mapStateToProps ? mapStateToProps(store.getState(), this.props): {}   
      let dispatchProps = mapDispatchToProps? mapDispatchToProps(store.dispatch, this.props) : {}   
      this.setState({  
        allProps: {  
          ...stateProps,  
          ...dispatchProps,  
          ...this.props  
        }  
      })  
    }  
    render () {  
      return <WrappedComponent {...this.state.allProps} />  
    }  
  }  
  return Connect  
} 

代码非常清晰，connect函数其实就做了一件事，将mapStateToProps和mapDispatchToProps分别解构后传给原组件，这样我们在原组件内就可以直接用props获取state以及dispatch函数了。

使用HOC的注意事项

告诫—静态属性拷贝

当我们应用HOC去增强另一个组件时，我们实际使用的组件已经不是原组件了，所以我们拿不到原组件的任何静态属性，我们可以在HOC的结尾手动拷贝他们：

function proxyHOC(WrappedComponent) {  
  class HOCComponent extends Component {  
    render() {  
      return <WrappedComponent {...this.props} />;  
    }  
  }  
  HOCComponent.staticMethod = WrappedComponent.staticMethod;  
  // ...   
  return HOCComponent;  
} 

（编辑：ASP站长网）