React 高阶组件与Render Props优缺点详解
高阶组件
高阶组件（HOC）是一个接受组件作为参数并返回一个新组件的函数，如果多个组件有相同的逻辑，将这些逻辑用函数封装，使它们能跨组件共用，这种用法称为高阶组件。下面的代码演示什么是高阶组件：
export default function WithPrintLog(InnerComponent) {
return class extends React.Component{
componentDidMount() {
console.log('我被装载了')
}
render() {
return (<InnerComponent {...this.props}/>)
}
}
}
上述 WithPrintLog 是高阶组件，它不改变 InnerComponent 在界面上的显示，而是等 InnerComponent 装载之后在控制台打印'我被装载了'。
总体而言，高阶组件可以被分为两大类。
- 增强型：给组件增加额外的功能，比如前面举例的 WithPrintLog。
- 注入型：给组件注入额外的 props，比如 Redux 的 connect。
接下来，结合 TypeScript 分别介绍增强型和注入型高阶组件。
增强型高级组件
增强型高阶组件还是以 WithPrintLog 为例，只是在前面的基础上增加 loading 效果，代码如下：
interface Props {
loading?: boolean
}
export default function WithPrintLog<P extends {}>(InnerComponent: React.ComponentType<P>) {
return class extends React.Component<P & Props, never> {
componentDidMount() {
console.log('我被装载了')
}
render() {
const {loading, ...props} = this.props
return (loading ? <div>loading...</div> : <InnerComponent {...(props as P)}/>)
}
}
}
React.ComponentType<P> 是 React.ComponentClass<P> | React.FunctionComponent<P> 的别称，因此 WithPrintLog 的参数只能是类组件或函数组件。分析上述代码中的类型注解，类型参数 P 注解 InnerComponent 的 props。P & Props 注解返回值的 props，所以使用返回值时，除了传 InnerComponent 所需的 props 还要传 loading 字段。
注入型高阶组件
注入型高阶组件比增加强高阶组件更常见，类型定义也更复杂，下面定义的 WithSubmitLog 便是一个注入型高阶组件，代码如下：
export interface InjectedProps {
submitLog: (data: string) => void
}
export function WithSubmitLog<P extends InjectedProps>(InnerComponent: React.ComponentType<P>) {
return class extends React.Component<Omit<P, keyof InjectedProps >, never> {
submitLog = (data: string) => { /**todo*/ }
render() {
const props = ({
...this.props,
submitLog: this.submitLog
}) as P
return <InnerComponent {...props}/>
}
}
}
<P extends InjectedProps>(InnerComponent: React.ComponentType<P>)使用了泛型约束，它约束类型参数P必须包含 InjectedProps 接口中的字段，所以InnerComponent 组件的 props 中必须存在 submitLog 字段。Omit<P, keyof InjectedProps>表示从类型P中剥除 InjectedProps 接口中的字段，所以使用 WithSubmitLog 返回的组件时，不必传 submitLog 字段。
高阶组件 VS Render Props
高阶组件和 Render Props 都是提高代码复用的有效手段，高阶组件属于静态组合，Render Props 属于动态组合。下面使用 Render Props 去改造上面的注入型高阶组件 WithSubmitLog，代码如下：
interface Props {
render: (submitLog: (data: string) => void) => React.ReactNode;
}
class SubmitLogFromRender extends React.Component<Props , never> {
submitLog = (data: string): void => { /**todo*/ }
render(): React.ReactNode {
return this.props.render(this.submitLog)
}
}
与前面的 WithSubmitLog 相比，SubmitLogFromRender 简单得多，一眼就能看出它能接受那些属性，但是要明白高阶组件返回的组件能接收哪些属性就没那么容易，另外由于 SubmitLogFromRender 组件的 render 属性只是一个函数，所以它的值能来自第三方库，CDN，甚至可以在程序运行时根据不同的情况动态加载不同的函数。
总结
高阶组件能实现的效果 Render Props 都能实现，但反过来，Render Props 能实现的效果高阶组件不一定能实现，这源于 Render Props 是动态组合，而高阶组件是静态组合。在日常开发中，我的最大感受是，分析高阶组件能接受的属性比分析运用 Render Props 技术组件的难度大得多。
以上就是React 高阶组件与Render Props优缺点详解的详细内容，更多关于React 高阶组件 Render Props的资料请关注脚本之家其它相关文章！
相关文章
React Native 可以开发 ios 和 android 的 app，在开发过程中，势必会遇上屏幕适配，这篇文章主要介绍了详解React Native 屏幕适配（炒鸡简单的方法），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
react-router-domV6版本的路由和嵌套路由写法详解
本文主要介绍了react-router-domV6版本的路由和嵌套路由写法详解，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要为大家详细介绍了React中的Props类型校验和默认值，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
这篇文章主要介绍了React Hooks 实现和由来以及解决的问题详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
react基于Ant Desgin Upload实现导入导出
本文主要介绍了react基于Ant Desgin Upload实现导入导出,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-01-01
作为一个前端开发时刻想着，怎么把自己写的东西，丢到自己的服务器上面，然后展示给别人看。下面我就简单直白的写下，这篇文章主要给大家介绍了关于nginx配置React静态页面的方法教程,需要的朋友可以参考下。2017-11-11
Mobx是一个前端“状态管理框架”，状态管理就是将分布在各个组件、各个模块中的状态的变化，按照一定的规则，进行统一的管理，这篇文章主要介绍了React中如何使用Mobx,需要的朋友可以参考下2023-02-02
react性能优化useMemo与useCallback使用对比详解
这篇文章主要为大家介绍了react性能优化useMemo与useCallback使用对比详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
React 中如何将CSS visibility 属性设置为 hidden
这篇文章主要介绍了React中如何将CSS visibility属性设置为 hidden,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-05-05
这篇文章主要为大家介绍了react组件中过渡动画的问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
最新评论