【React深入】从Mixin到HOC再到Hook

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的注意事项

告诫—静态属性拷贝

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!