高阶组件是一种组件复用的高级技巧,是基于React的组合特性而形成的一种设计模式。高阶组件(Higher Order Component)是一个函数,他接收的一个参数是组件,并且也会返回一个组件。一个适用场景是:文章评论组件,在constructor中声明state,然后定义一个handleChange方法,在组件挂载(componentDidMount)和卸载(componentWillUnmount)时调用handleChange方法修改自己的state,最终在render中渲染出UI。这是一个完整的组件,另一个文章列表组件拥有相同的组件结构。不同之处在于state的数据来源,以及最后render的结果不同,其他都相同,也是在挂载时设置state,卸载时销毁state,那么上面的两个组件就存在了相同的代码。当这种拥有相同结构的组件大量出现时,代码量就会大幅增加。此时,我们可以通过高阶组件来重构上面的代码。
上面提到,高阶组件接收的参数其中一个是一个组件,这个组件就是被渲染的组件,另一个参数外部数据。然后返回一个新组件。文档中的一个例子:
const BlogPostWithSubscription = withSubscription(
BlogPost, (DataSource, props) => DataSource.getBlogPost(props.id)
);
function withSubscription(WrappedComponent, selectData) {
return class extends React.components {
constructor(props) { //初始化props,绑定方法 }
//然后在handleChange() 方法中调用 传入的第二个参数 selectData
}
}
我理解的高阶组件就是将可复用的部分提取出来,写成一个函数,然后在需要时调用这个函数,当然这其中还有很多 组合、约定等的东西。明天继续