在React官网文档学习React HOC，整个看了一遍还是云里雾里的，于是按照官网文档，自己动手实践一下。官网地址：React 高阶组件
定义：高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件
使用高阶组件（HOC）解决交叉问题
假设有两个组件，CommentList组件从外部数据源订阅数据并渲染评论列表，BlogPost组件是一个订阅单个博客文章的组件，该组件遵循类似的模式，即在componentDidMount中添加事件处理函数订阅数据，在componentWillUnmount中清除事件处理函数，两个组件的事件处理函数内容相同。两个组件的区别在于：从数据源订阅的数据不同，并且渲染格式不同。（代码见React官网）
由此，可以将两个组件中相同的逻辑部分提取到一个高阶组件，该高阶组件能够创建类似 CommonList 和 BlogPost 从数据源订阅数据的组件 。该组件接受一个子组件作为其中的一个参数，并从数据源订阅数据作为props属性传入子组件。该高阶组件命名为WithSubscription。
import DataSource from '../DataSource'
let withSubscription = (WrappedComponent, selectData) => {
// ……返回另一个新组件……
return class extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {
data: selectData(DataSource, props)
};
}
componentDidMount() {
// ……注意订阅数据……
DataSource.addChangeListener(this.handleChange);
}
componentWillUnmount() {
DataSource.removeChangeListener(this.handleChange);
}
handleChange() {
this.setState({
data: selectData(DataSource, this.props)
});
}
render() {
// ……使用最新的数据渲染组件
// 注意此处将已有的props属性传递给原组件
const style = {
'marginBottom':'30px'
}
return(
<div style={style}>
<div>This is a HOC Component...</div>
<WrappedComponent data={this.state.data} {...this.props} />
</div>
);
}
};
}
export default withSubscription;
高阶组件既不会修改原组件，也不会使用继承复制原组件的行为。相反，高阶组件是通过将原组件包裹（wrapping）在容器组件（container component）里面的方式来组合（composes） 使用原组件。高阶组件就是一个没有副作用的纯函数。
高阶组件接收容器组件的所有props属性以及一个新的 data属性，并将从数据源订阅的数据用 data 属性渲染输出内容。高阶组件并不关心数据是如何以及为什么被使用，而被包裹组件也不关心数据来自何处。
高阶组件使用
./pages/index.js
import React from 'react'
import HOCList from '../components/HOCList';
import CommentList from '../components/CommentList';
import BlogPost from '../components/BlogPost';
import withSubscription from '../components/WithSubscription/index'
const CommentListWithSubscription = withSubscription(
CommentList,
(DataSource) => DataSource.getComments()
);
const BlogPostWithSubscription = withSubscription(
BlogPost,
(DataSource, props) => DataSource.getBlogPost(props.id)
);
export default class extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
}
render() {
const style = {
width:'100%',
'text-align': 'center',
title:{
color:'red'
}
}
return (
<div style={style}>
<h1 style={style.title}>hello hoc</h1>
<CommentListWithSubscription />
<BlogPostWithSubscription />
</div>
);
}
}
CommentListWithSubscription的第一个参数是包裹组件（wrapped component），第二个参数会从 DataSource和当前props即高阶组件的props属性中检索需要的数据。
当 CommentListWithSubscription 和 BlogPostWithSubscription 渲染时, 会向CommentList 和 BlogPost 传递一个 data props属性，该 data属性的数据包含了从 DataSource 检索的最新数据。
官网的示例代码不完全，为了更好地看到运行结果，对代码做一些修改：
- 另外创建数据源DataSource：
./components/DataSource.js
let DataSource = {
getComments: () => {
return [
'comment1', 'comment2', 'comment3'
]
},
getBlogPost: () => {
return 'BlogPost Contents';
},
addChangeListener: () => { console.log('addChangeListener') },
removeChangeListener: () => { console.log('removeChangeListener') },
}
export default DataSource;
- 两个被包裹组件只负责对数据源的展示：
//.components/BlogPost/index.js
import React from 'react'
import { Input,Button } from 'antd'
const { TextArea } = Input;
export default class extends React.Component {
render() {
return (
<div>
<TextArea value={this.props.data} />
</div>
);
}
}
//.components/BlogPCommentListst/index.js
import React from 'react'
export default class extends React.Component {
render() {
return (
<div>
{this.props.data.map((value) => (
<div comment={value} key={value} >{value}</div>
))}
</div>
);
}
}
