• react 高阶组件之小学版


      高阶组件  多么高大上的概念,一般用来实现组件逻辑的抽象和复用,在很多三方库(redux)中都被使用到,但是开发普通有任务项目时,如果能合理使用高阶组件,也会显著的提高代码质量。

      我们今天就用最简单的逻辑来搞一搞这个家伙

      我们先看一个栗子,看看这个家伙是如何进行逻辑复用的;

      现在有一个组件MyComponent,需要从LocalStorage中获取数据, 然后渲染到界面。

      一般情况下,我们可以这样实现:

     

      代码很简单,但当其他组件也需要从LocalStorage中获取同样的数据展示出来时,每个组件都需要重写一次componentWillMount中的代 码,这显然是很冗余的。

      下面让我们来看看使用高阶组件改写这部分代码:

      

      

      withPersistentData就是一个高阶组件,它返回一个新的组件,在新组件的componentWillMount中统一处理从LocalStorage中获取数据的逻辑,然后将获取到的数据通过props传递给被包装的组件WrappedComponent,这样在WrappedComponent中就可以直接使用
    this.props.data获取需要展示的数据。

      当有其他的组件也需要这段逻辑时,继续使用withPersistentData这个高阶组件包装这些组件。

      

      是不是还算不麻烦,OK,那我们再讲讲,除了这个操作props的场景外,还有那些使用场景

      高阶组件的使用场景主要有以下4种:

      (1)操纵props (上个栗子)

      (2)通过ref访问组件实例

      (3)组件状态提升

      (4)用其他元素包装组件

      当然高阶组件除了组件,还可以传参 形式如下:

        HOC(...params)(WrappedComponent)

      一个比较典型的栗子就是react-redux里的connect函数

      connect(mapStateToProps, mapDispatchToProps) (WrappedComponent)

      

      这个函数会将一个React组件连接到Redux 的 store上,在连接的过程中,connect通过函数参数mapStateToProps从全局store中取出当前组件需要的state,并把state转化成当前组件的props;

      同时通过函数参数mapDispatchToProps把当前组件用到的Redux的action creators以props的方式传递给当前组件。

      上栗子:

      

      基本上就这样,其实今天只说了高阶组件的一小部分,不过什么都不能一蹴而就,最好的学习方法就是在实践中前行;

      参考资料:

        React+进阶之路 (PS:推荐初学者入手)

      

      

  • 相关阅读:
    java面向对象高级分层实例_实体类
    But what exactly do we mean by "gets closer to"?
    information entropy as a measure of the uncertainty in a message while essentially inventing the field of information theory
    SVM vs. Softmax
    every row of W is a classifier for one of the classes
    Hinge Loss
    polynomial time
    Conditional random fields
    Frobenius Norm
    L2 范数 L1 范数 出租车范数
  • 原文地址:https://www.cnblogs.com/webcabana/p/11237024.html
Copyright © 2020-2023  润新知