高阶组件(HOC)
React官方定义高阶组件的概念是:
A higher-order component is a function that takes a component and returns a new component.
通常情况下，实现高阶组件的方式有以下两种:
属性代理(Props Proxy)
反向继承(Inheritance Inversion)
属性代理
实质上是通过包裹原来的组件来操作props，举个简单的例子:
import React, { Component } from 'React';
//高阶组件定义
const HOC = (WrappedComponent) =>
class WrapperComponent extends Component {
render() {
return <WrappedComponent {...this.props} />;
}
}
//普通的组件
class WrappedComponent extends Component{
render(){
//....
}
}
//高阶组件使用
export default HOC(WrappedComponent)
我们可以看见函数HOC返回了新的组件(WrapperComponent)，这个组件原封不动的返回作为参数的组件(也就是被包裹的组件:WrappedComponent)，并将传给它的参数(props)全部传递给被包裹的组件(WrappedComponent)。这么看起来好像并没有什么作用，其实属性代理的作用还是非常强大的。
操作props
我们看到之前要传递给被包裹组件WrappedComponent的属性首先传递给了高阶组件返回的组件(WrapperComponent)，这样我们就获得了props的控制权(这也就是为什么这种方法叫做属性代理)。我们可以按照需要对传入的props进行增加、删除、修改(当然修改带来的风险需要你自己来控制)，举个例子:
const HOC = (WrappedComponent) =>
class WrapperComponent extends Component {
render() {
const newProps = {
name: 'HOC'
}
return <WrappedComponent
{...this.props}
{...newProps}
/>;
}
}
在上面的例子中，我们为被包裹组件(WrappedComponent)新增加了固定的name属性，因此WrappedComponent组件中就会多一个name的属性。
抽象state
属性代理的情况下，我们可以将被包裹组件(WrappedComponent)中的状态提到包裹组件中，一个常见的例子就是实现不受控组件到受控的组件的转变
class WrappedComponent extends Component {
render() {
return <input name="name" {...this.props.name} />;
}
}
const HOC = (WrappedComponent) =>
class extends Component {
constructor(props) {
super(props);
this.state = {
name: '',
};
this.onNameChange = this.onNameChange.bind(this);
}
onNameChange(event) {
this.setState({
name: event.target.value,
})
}
render() {
const newProps = {
name: {
value: this.state.name,
onChange: this.onNameChange,
},
}
return <WrappedComponent {...this.props} {...newProps} />;
}
}
上面的例子中通过高阶组件，我们将不受控组件(WrappedComponent)成功的转变为受控组件.
用其他元素包裹组件
render(){
<div>
<WrappedComponent {...this.props} />
</div>
}
这种方式将被包裹组件包裹起来，来实现布局或者是样式的目的。
在属性代理这种方式实现的高阶组件，以上述为例，组件的渲染顺序是: 先WrappedComponent再WrapperComponent(执行ComponentDidMount的时间)。而卸载的顺序是先WrapperComponent再WrappedComponent(执行ComponentWillUnmount的时间)。
高阶组件的用法，其实就是封装个函数将传入的组件添加上数据，直接导出即可，我们常用的react-redux 中的 connect(Children) 一个道理，封装完将数据导入到组件当中，组件相应的具有数据，以及具有了dispatch方法，就是这么个封装。
话不多说直接上个小栗子：
class Parents extends Component {
constructor(props) {
super(props);
this.state = {
parentsSourse: '我是父组件数据'
}
}
render() {
<>
<Children />
这是父组件，相当于我们的外层组件
</>
}
}
class Children extends Component {
render() {
<>
这是子组件，我们展示组件
</>
}
}
我们假如我们想让父组件包含的组件都具有一个属性值，这个值是 newType: true, 此时我们可以直接向下级 Childlren 传递，那么我们也可以封装下父组件导出个高阶组件,那么这个方法可以这么写：
const Hoc_component = (HocCompoent) => {
return class NewComponent extends React.Component{
constructor(props){
super(props);
this.state={}
}
render() {
const props = { newType: true }
return <HocCompoent {...this.props} {...props}/>
}
}
}
// 此时所有的组件只要使用
Hoc_component(Children); // 此时的子组件就具有了这个方法包装的 newType属性，我们可以去打印看下。
下面的例子，我们把两个组件相似的生命周期方法提取出来，通过包装，能够节省非常多的重复代码。
// CommentList
class CommentList extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {
// "DataSource" is some global data source
comments: DataSource.getComments()
};
}
componentDidMount() {
// Subscribe to changes
DataSource.addChangeListener(this.handleChange);
}
componentWillUnmount() {
// Clean up listener
DataSource.removeChangeListener(this.handleChange);
}
handleChange() {
// Update component state whenever the data source changes
this.setState({
comments: DataSource.getComments()
});
}
render() {
return (
<div>
{this.state.comments.map((comment) => (
<Comment comment={comment} key={comment.id} />
))}
</div>
);
}
}
// BlogPost
class BlogPost extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {
blogPost: DataSource.getBlogPost(props.id)
};
}
componentDidMount() {
DataSource.addChangeListener(this.handleChange);
}
componentWillUnmount() {
DataSource.removeChangeListener(this.handleChange);
}
handleChange() {
this.setState({
blogPost: DataSource.getBlogPost(this.props.id)
});
}
render() {
return <TextBlock text={this.state.blogPost} />;
}
}
他们虽然是两个不同的组件，对DataSource的需求也不同，但是他们有很多的内容是相似的：
- 在组件渲染之后监听DataSource
- 在监听器里面调用setState
- 在unmout的时候删除监听器
在大型的工程开发里面，这种相似的代码会经常出现，那么如果有办法把这些相似代码提取并复用，对工程的可维护性和开发效率可以带来明显的提升。
使用HOC我们可以提供一个方法，并接受不了组件和一些组件间的区别配置作为参数，然后返回一个包装过的组件作为结果。
function withSubscription(WrappedComponent, selectData) {
// ...and returns another component...
return class extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {
data: selectData(DataSource, props)
};
}
componentDidMount() {
// ... that takes care of the subscription...
DataSource.addChangeListener(this.handleChange);
}
componentWillUnmount() {
DataSource.removeChangeListener(this.handleChange);
}
handleChange() {
this.setState({
data: selectData(DataSource, this.props)
});
}
render() {
// ... and renders the wrapped component with the fresh data!
// Notice that we pass through any additional props
return <WrappedComponent data={this.state.data} {...this.props} />;
}
};
}
然后我们就可以通过简单的调用该方法来包装组件：
const CommentListWithSubscription = withSubscription(
CommentList,
(DataSource) => DataSource.getComments()
);
const BlogPostWithSubscription = withSubscription(
BlogPost,
(DataSource, props) => DataSource.getBlogPost(props.id)
);
注意：在HOC中我们并没有修改输入的组件，也没有通过继承来扩展组件。HOC是通过组合的方式来达到扩展组件的目的，一个HOC应该是一个没有副作用的方法。
