React面试题：React高阶组件

回答思路：复用组件逻辑

高阶组件（HOC：Higher-Order Components）是React中用于复用组件逻辑的一种，和高阶函数（参数为函数，返回值也是函数）很相似，以组件作为参数，返回一个新的组件，它本身不属于React API，它是一种基于React组合特性的设计模式

import React, { Component } from 'react';

// withAuth 高阶组件
function withAuth(WrappedComponent) {
  return class extends Component {
    state = {
      isAuthenticated: false,
    };

    componentDidMount() {
      // 模拟身份验证逻辑
      const isAuthenticated = checkUserAuthenticated(); // 假设有一个函数用于检查用户是否已经进行身份验证
      this.setState({ isAuthenticated });
    }

    render() {
      const { isAuthenticated } = this.state;

      // 根据身份验证状态渲染原始组件或其他内容
      if (isAuthenticated) {
        return ;
      } else {
        return 
请先登录
;
      }
    }
  };
}

// 原始组件
class MyComponent extends Component {
  render() {
    return 
经过身份验证的内容
;
  }
}

// 使用 withAuth 高阶组件包装 MyComponent
const AuthenticatedComponent = withAuth(MyComponent);

然后直接使用这个组件即可

缺点：prop覆盖问题

// 定义一个简单的高阶组件
function withPrefix(WrappedComponent) {
  return function WithPrefix(props) {
    return ;
  };
}

// 原始组件
function MyComponent(props) {
  return 
{props.prefix} - {props.name}
;
}

// 使用高阶组件包装原始组件
const EnhancedComponent = withPrefix(MyComponent);

// 渲染组件
ReactDOM.render(, document.getElementById('root'));

渲染结果为： "HOC - Component"，“HOC”覆盖了“Original”