高阶组件是一种组件复用的高级技巧，是基于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
}
}
我理解的高阶组件就是将可复用的部分提取出来，写成一个函数，然后在需要时调用这个函数，当然这其中还有很多 组合、约定等的东西。明天继续
网友评论