高阶组件
高阶组件(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、约定:包装显示名字以便于调试