React(精读官方文档) - 高级指引 -高阶组件
admin
2024-03-03 21:03:33
0

高阶组件(HOC)

概述

  • 是React复用组件逻辑的一种高级技巧,是一种基于React组合特性而形成的设计模式
  • 高阶组件是参数为组件,返回值为新组件的函数
  • 简单理解:
    • 高阶组件本身是 函数,传参数是组件,返回值也是组件;
    • 高阶组件不用关心数据是如何渲染的,只用关心逻辑即可
    • 被包装的组件本身不用关心数据是怎么来的,只用负责渲染即可
    • 最后渲染的是高阶组件返回的组件
  • 高阶组件的调用过程类似于这样:
    const EnhancedComponent = higherOrderComponent(WrappedComponent);
    
  • 应用场景:redux 中的 connect
  • 具体怎么编写呢?往下看…

使用HOC解决横切关注点问题

  • 横切关注点问题:指的是一些具有横越多个模块的行为,使用传统的软件开发方法不能够达到有效的模块化的一类特殊关注点。
  • 组件是React 中代码复用的基本单元,但某些模式并不适合传统组件
  • 假设有一个 CommentList 组件,订阅外部数据源,用于渲染评论列表:
    class CommentList extends React.Component {constructor(props) {super(props);this.handleChange = this.handleChange.bind(this);this.state = {// 假设 "DataSource" 是个全局范围内的数据源变量,来自外部,自身带有很多方法comments: DataSource.getComments()  //假设getComments()这个方法可以获取所有的评论};}componentDidMount() {// 订阅更改;监听  DataSource ,发生变化时更新数据DataSource.addChangeListener(this.handleChange);}componentWillUnmount() {// 清除订阅DataSource.removeChangeListener(this.handleChange);}handleChange() {// 当数据源更新时,更新组件状态this.setState({comments: DataSource.getComments()  //假设getComments()这个方法可以获取所有的评论});}render() {return (
    {this.state.comments.map((comment) => (comment} key={comment.id} />))}
    );}}// 假设 DataSource:来自外部;它自身有很多方法,如:getComments(),addChangeListener,removeChangeListener 等 // 假设 是子组件,父组件 CommentList 需要将 comment 、key 传递给它
  • 假设有个 订阅单个博客帖子的组件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 this.state.blogPost} />;}
    }
    
  • 以上两个组件的不同点
    • 调用方法不用
  • 以上两个组件的相同点
    • 在挂载时,向 DataSource 添加一个更改侦听器
    • 在侦听器内部,当数据源发生变化时,调用 setState
    • 在卸载时,删除侦听器
  • 上面两个组件相同点的地方被不断的重复调用,在大型项目中,所以我们需要将这些共同使用的地方给抽象出来,然后让许多组件之间共享它,这正是高阶组件擅长的地方。
  • 编写一个创建组件函数,这个函数接收两个参数,一个是要被包装的子组件,另一个则是该子组件订阅数据的函数。
     const CommentListWithSubscription = withSubscription(CommentList,(DataSource) => DataSource.getComments());const BlogPostWithSubscription = withSubscription(BlogPost,(DataSource, props) => DataSource.getBlogPost(props.id));
    //以上写法相当于高级组件的调用,withSubscription为自定义的高阶组件;CommentList:被包装的子组件;CommentListWithSubscription:返回的包装后的组件
    
  • 当渲染 CommentListWithSubscription 和 BlogPostWithSubscription 时, CommentList 和 BlogPost 将传递一个 data prop,其中包含从 DataSource 检索到的最新数据
     // 此函数接收一个组件...
    function 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() {// ... 并使用新数据渲染被包装的组件!// 请注意,我们可能还会传递其他属性return this.state.data} {...this.props} />;}};
    }
    
  • HOC不会修改传入的组件,也不会使用继承来复制其行为,相反HOC是通过将组件包装在容器组件中来组成新的组件,HOC是纯函数,没有副作用
    • 被包装组件接收来自容器组件的所有prop,同时也接收一个新的用于render的data prop
    • HOC不用关心数据的使用方式,被包装组件也不用关心数据是怎么来的

不用改变原始组件,使用组合

  • 不要试图在 HOC 中修改组件原型(或以其他方式改变它)
    function logProps(InputComponent) {InputComponent.prototype.componentDidUpdate = function(prevProps) {console.log('Current props: ', this.props);console.log('Previous props: ', prevProps);};// 返回原始的 input 组件,暗示它已经被修改。return InputComponent;
    }// 每次调用 logProps 时,增强组件都会有 log 输出。
    const EnhancedComponent = logProps(InputComponent)//上面这种写法会造成另一个同样会修改componentDidUpate的HOC增强它,那么前面的HOC就会失效。
    
  • HOC不应该修改传入组件,而应该使用组合的方式,将组件包装在容器组件中实现功能。
    function logProps(WrappedComponent) {return class extends React.Component {componentDidUpdate(prevProps) {console.log('Current props: ', this.props);console.log('Previous props: ', prevProps);}render() {// 将 input 组件包装在容器中,而不对其进行修改。Good!return ...this.props} />;}}}
    

约定:将不相关的 props 传递给被包裹的组件

  • HOC为组件添加特性,自身不应该大幅改变约定,HOC应该透传与自身无关的props,大多数HOC都应该包含一个类似于下面的render方法
    render() {// 过滤掉非此 HOC 额外的 props,且不要进行透传const { extraProp, ...passThroughProps } = this.props;// 将 props 注入到被包装的组件中。// 通常为 state 的值或者实例方法。const injectedProp = someStateOrInstanceMethod;// 将 props 传递给被包装组件return (injectedProp}{...passThroughProps}/>);
    }	
    

约定:最大化可组合性

  • 有时候它仅接受一个参数,也就是被包裹的组件:
     const NavbarWithRouter = withRouter(Navbar);
    
  • HOC通常也可以接收多个参数
    const CommentWithRelay = Relay.createContainer(Comment, config);
    
  • 常见的HOC签名(React Redux的connect函数):
    // React Redux 的 `connect` 函数
    const ConnectedComment = connect(commentSelector, commentActions)(CommentList);
    
    • 拆分connect函数
      // connect 是一个函数,它的返回值为另外一个函数。const enhance = connect(commentListSelector, commentListActions)// 返回值为 HOC,它会返回已经连接 Redux store 的组件const ConnectedComment = enhance(CommentList);
    

约定:包装显示名称以便轻松调试

  • HOC创建的容器组件会和任何其他组件一样,显示在React Developer Tools中,为了方便调试,需要选择显示一个名称,以表明他是HOC的产物
    function withSubscription(WrappedComponent) {class WithSubscription extends React.Component {/* ... */}WithSubscription.displayName = `WithSubscription(${getDisplayName(WrappedComponent)})`;return WithSubscription;
    }function getDisplayName(WrappedComponent) {return WrappedComponent.displayName || WrappedComponent.name || 'Component';
    }
    

使用高阶组件的注意事项

  • 不要在render方法中使用HOC
    render() {// 每次调用 render 函数都会创建一个新的 EnhancedComponent// EnhancedComponent1 !== EnhancedComponent2const EnhancedComponent = enhance(MyComponent);// 这将导致子树每次渲染都会进行卸载,和重新挂载的操作!return ;
    }
    
  • 务必复制静态方法
       // 定义静态函数WrappedComponent.staticMethod = function() {/*...*/}// 现在使用 HOCconst EnhancedComponent = enhance(WrappedComponent);// 增强组件没有 staticMethodtypeof EnhancedComponent.staticMethod === 'undefined' // true//为了解决这个问题,你可以在返回之前把这些方法拷贝到容器组件上:
    function enhance(WrappedComponent) {class Enhance extends React.Component {/*...*/}// 必须准确知道应该拷贝哪些方法 :(Enhance.staticMethod = WrappedComponent.staticMethod;return Enhance}
    
  • Refs 不会被传递
    虽然高阶组件的约定是将所有 props 传递给被包装组件,但这对于 refs 并不适用。那是因为 ref 实际上并不是一个 prop - 就像 key 一样,它是由 React 专门处理的。如果将 ref 添加到 HOC 的返回组件中,则 ref 引用指向容器组件,而不是被包装组件。

相关内容

热门资讯

怎么解除订阅安卓系统,安卓系统... 你是不是也和我一样,手机里订阅了好多服务,结果现在想解除订阅,却一头雾水?别急,今天就来手把手教你如...
安卓系统停用怎么开启,轻松恢复... 亲爱的手机控们,你是否曾经遇到过安卓系统突然停用的情况,让你手忙脚乱,不知所措?别担心,今天就来教你...
安卓系统电池健康度,电池健康度... 你有没有发现,你的安卓手机最近是不是有点儿不给力了?电池续航能力大不如前,充电速度也慢了不少?别急,...
安卓系统按键怎么截图,安卓系统... 你是不是也和我一样,有时候想截个图分享给朋友,却发现安卓手机的截图功能有点神秘呢?别急,今天就来手把...
购票系统安卓源代码,架构设计与... 你有没有想过,那些我们每天离不开的购票系统,它们背后的秘密是什么呢?今天,就让我带你一探究竟,揭开购...
安卓手机系统后台测试,深度解析... 你有没有发现,你的安卓手机后台总是悄悄地忙碌着?别小看了这些后台程序,它们可是手机系统稳定运行的关键...
安卓系统重启的图标,解锁设备新... 手机突然重启,是不是心里有点慌?别急,今天就来和你聊聊安卓系统重启的图标,让你一眼就能认出它,再也不...
车载智慧屏安卓系统,智能出行新... 你有没有发现,现在的车载智慧屏越来越智能了?尤其是那些搭载了安卓系统的,简直就像是个移动的小电脑,不...
安卓系统连上网权限,解锁设备无... 你有没有发现,你的安卓手机里有些应用总是偷偷连上网?别小看这个小小的网络权限,它可是能影响你隐私、消...
安卓谷歌操作系统,探索安卓谷歌... 你知道吗?在智能手机的世界里,有一个操作系统可是无人不知、无人不晓,那就是安卓谷歌操作系统。它就像一...
安卓系统手写%怎样调出,具体实... 你有没有遇到过这种情况:在使用安卓手机的时候,突然想用手写输入法来记录一些灵感或者重要信息,可是怎么...
安卓手机重置 系统设置,轻松恢... 手机用久了是不是感觉卡顿得厉害?别急,今天就来教你怎么给安卓手机来个大变身——重置系统设置!想象你的...
win如何安装安卓系统,Win... 哇,你有没有想过,让你的Win系统也能玩转安卓应用?没错,就是那种在手机上轻松自如的安卓系统,现在也...
苹果qq和安卓系统,跨平台体验... 你有没有发现,现在手机市场上,苹果和安卓的较量可是越来越激烈了呢!咱们就来聊聊这个话题,看看苹果QQ...
显示最好的安卓系统,探索最新旗... 你有没有想过,为什么安卓系统那么受欢迎呢?它就像一个魔法盒子,里面装满了各种神奇的魔法。今天,就让我...
安卓app怎么降级系统,系统版... 你有没有发现,有时候安卓手机的系统更新后,新功能虽然炫酷,但老系统用起来更顺手呢?别急,今天就来教你...
雷军脱离安卓系统,引领科技变革... 你知道吗?最近科技圈可是炸开了锅,因为我们的雷军大大竟然宣布要脱离安卓系统,这可真是让人大跌眼镜啊!...
安卓系统自动开网络,安卓系统自... 你有没有发现,手机里的安卓系统有时候会自动开启网络连接,这可真是让人又爱又恨啊!有时候,你正专心致志...
安卓系统怎样控制后台,因为服务... 手机里的安卓系统是不是感觉越来越卡了?后台程序太多,不仅耗电还影响性能。别急,今天就来教你怎么巧妙地...
安卓系统打游戏推荐,一触即达! 你有没有发现,现在手机游戏越来越好玩了?不管是休闲小游戏还是大型MMORPG,都能在手机上畅玩。但是...