React的高阶组件（HOC）的构建与应用

高阶组件

​

高阶组件（HOC）是react中对组件逻辑进行重用的高级技术。但高阶组件本身并不是React
API。它只是一种模式，这种模式是由react自身的组合性质必然产生的。

​
具体而言，高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件，高阶组件会对传入的组件做一些通用的处理。比如：我们希望给组件的的下方增加一个版权信息，那么就可以使用高阶组件。把原始组件传入，然后，给组件增加一个版权信息后，再返回。

​
高阶组件是通过将原组件 包裹（wrapping） 在容器组件（container
component）里面的方式来组合（composes） 使用原组件。高阶组件就是一个没有副作用的纯函数。

// 带上版权的高阶函数
function withCopyRight(OldCom){
    
    class NewCom extends React.Component{      
        render() {
            return (
               <div>
                    <OldCom />
                    <hr/>
                    <div>
                        Copyright © 2020 Sohu All Rights Reserved. 搜狐公司 版权所有
                    </div>
               </div>
            );
        }
    }   
    
    return NewCom;
}

//原始组件
class CommentList extends React.Component {
  render() {      
    return (
        <div>
            新闻11111111111111111111
        </div>
    );
  }
}

//调用高阶函数后的组件
const CommentListWithCopyRight = withCopyRight(CommentList);

ReactDOM.render( <div> <CommentListWithCopyRight /></div> ,$("box"));
function $(id){
    return document.getElementById(id);
}

• 高阶组件的注意点：

  1、不要在render函数里使用高阶组件
  
  2、必须将静态（static）方法做拷贝
  
  ​       
  当使用高阶组件包装组件，原始组件被容器组件包裹，也就意味着新组件会丢失原始组件的所有静态方法，解决这个问题的方法就是，将原始组件的所有静态方法全部拷贝给新组件。
  
  3、Refs不能传递
  
  一般来说，高阶组件可以传递所有的props属性给包裹的组件，但是不能传递refs引用。
  
  4、不要在高阶组件内部修改（或以其它方式修改）原组件的原型属性（prototype）。
  
  5、约定：将不相关的props属性传递给包裹组件
  
  6、约定：最大化使用组合
  
  7、约定：包装显示名字以便于调试