React(精读官方文档) - 高级指引 -高阶组件

最新推荐文章于 2024-08-10 12:17:32 发布

码农小菲

最新推荐文章于 2024-08-10 12:17:32 发布

阅读量465

点赞数 1

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/xbczrz/article/details/128111357

版权

react 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

本文介绍了React中的高阶组件（HOC），它是一种复用组件逻辑的高级技巧。HOC是接收组件并返回新组件的纯函数，主要用于解决横切关注点问题。通过举例说明，展示了如何使用HOC解决组件订阅数据源的共性问题，以及如何编写和使用HOC。文章还强调了HOC的特性，如不修改原组件、保持可组合性，并提供了最佳实践，如保留组件的静态方法和显示名称，以及避免在render方法中使用HOC。

摘要由CSDN通过智能技术生成

                    
                        
                    
                    高阶组件（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 (
       <div>
         {this.state.comments.map((comment) => (
           <Comment comment={comment} key={comment.id} />
         ))}
       </div>
     );
   }
 }
 
 // 假设 DataSource：来自外部；它自身有很多方法，如：getComments()，addChangeListener，removeChangeListener 等
//  假设 <Comment /> 是子组件，父组件 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 <TextBlock text={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 <WrappedComponent data={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 <WrappedComponent {...this.props} />;
      }
    }
  }
 
 
约定：将不相关的 props 传递给被包裹的组件 
HOC为组件添加特性，自身不应该大幅改变约定，HOC应该透传与自身无关的props,大多数HOC都应该包含一个类似于下面的render方法render() {
  // 过滤掉非此 HOC 额外的 props，且不要进行透传
  const { extraProp, ...passThroughProps } = this.props;

  // 将 props 注入到被包装的组件中。
  // 通常为 state 的值或者实例方法。
  const injectedProp = someStateOrInstanceMethod;

  // 将 props 传递给被包装组件
  return (
    <WrappedComponent
      injectedProp={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方法中使用HOCrender() {
  // 每次调用 render 函数都会创建一个新的 EnhancedComponent
  // EnhancedComponent1 !== EnhancedComponent2
  const EnhancedComponent = enhance(MyComponent);
  // 这将导致子树每次渲染都会进行卸载，和重新挂载的操作！
  return <EnhancedComponent />;
}
 
务必复制静态方法   // 定义静态函数
 WrappedComponent.staticMethod = function() {/*...*/}
 // 现在使用 HOC
 const EnhancedComponent = enhance(WrappedComponent);
 
 // 增强组件没有 staticMethod
 typeof 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 引用指向容器组件，而不是被包装组件。

                