从0开始学前端 第五十一课：React组件复用与组合

第五十一课：React组件复用与组合

学习目标

在本课程结束后，你应该能够：

1. 理解高阶组件（HOC）的概念及其在React中的用途。
2. 掌握Render Props模式的概念和使用方法。
3. 能够运用HOC和Render Props模式进行组件复用与组合。

学习内容

1. 高阶组件（HOC）

• 概念: 高阶组件是React中用于复用组件逻辑的一种高级技术。HOC本身不是React API的一部分，它是一种基于React组合特性而形成的设计模式。HOC接收一个组件并返回一个新组件。

• 代码示例:

  function withLogging(WrappedComponent) {
    return class extends React.Component {
      componentDidMount() {
        console.log(`Logged: ${WrappedComponent.name} did mount.`);
      }
  
      render() {
        return <WrappedComponent {...this.props} />;
      }
    };
  }
  
  // 使用HOC
  const LoggedButton = withLogging(Button);
  

  • 预计输出: 当LoggedButton组件被挂载时，控制台将输出日志信息。

2. Render Props

• 概念: Render Props是一个用于告诉组件需要渲染什么内容的函数prop。这是一种在React组件之间共享代码的技巧。

• 代码示例:

  class MouseTracker extends React.Component {
    state = { x: 0, y: 0 };
  
    handleMouseMove = (event) => {
      this.setState({
        x: event.clientX,
        y: event.clientY
      });
    };
  
    render() {
      return (
        <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
          {this.props.render(this.state)}
        </div>
      );
    }
  }
  
  // 使用Render Props
  <MouseTracker render={({ x, y }) => (
    <h1>The mouse position is ({x}, {y})</h1>
  )} />
  

  • 预计输出: 渲染一个组件，它能够跟踪并显示鼠标在视口中的位置。

课后练习

1. 创建一个名为withUser的HOC，它用于向组件提供用户信息。
2. 使用Render Props模式创建一个List组件，它应该能够渲染任意类型的列表项。
3. 利用withUser和List组件，创建一个用户列表，展示用户的姓名。

练习解析

1. 创建HOC:

   function withUser(WrappedComponent) {
     return class extends React.Component {
       state = { user: { name: 'John Doe', id: '1' } };
   
       render() {
         return <WrappedComponent {...this.props} user={this.state.user} />;
       }
     };
   }
   
   // 假设我们有一个显示用户信息的组件
   function UserProfile({ user }) {
     return <div>Welcome, {user.name}</div>;
   }
   
   // 使用HOC增强组件
   const UserAwareProfile = withUser(UserProfile);
   

   • 预计输出: 当使用UserAwareProfile组件时，它会渲染出欢迎信息，包括了从HOC中获得的用户名称。

2. 使用Render Props模式创建List组件:

   class List extends React.Component {
     render() {
       const { items, renderItem } = this.props;
       return <ul>{items.map((item, index) => <li key={index}>{renderItem(item)}</li>)}</ul>;
     }
   }
   
   // 使用List组件渲染一些数据
   const items = ['Apple', 'Banana', 'Cherry'];
   <List items={items} renderItem={(item) => <span>{item}</span>} />
   

   • 预计输出: 渲染一个包含水果名称列表的无序列表。

3. 结合HOC和Render Props使用:

   // 假设我们有一个用户列表
   const users = [{ name: 'Alice' }, { name: 'Bob' }, { name: 'Carol' }];
   
   // 使用List组件和withUser HOC渲染用户列表
   <UserAwareProfile render={(user) => (
     <List items={users} renderItem={(item) => <span>{item.name}</span>} />
   )} />
   

   • 预计输出: 显示一个用户列表，每个列表项是从UserAwareProfile组件获得的用户姓名。

通过这些练习，你将能够加深理解HOC和Render Props的使用方法和它们如何促进组件逻辑的复用。

---

章节目录
第五十二课：React Router的使用