面试官：react 构建组件有哪些方式？有什么区别？

在 React 中，构建组件的方式主要有以下几种：

1. 函数式组件（Functional Components）：

   • 函数式组件是一种纯函数，接收 props 作为参数，并返回 React 元素作为输出。
   • 函数式组件通常是无状态的，不包含任何内部状态或生命周期方法，只负责根据输入的 props 渲染 UI。
   • 函数式组件使用函数声明来定义，语法简洁，易于理解和编写。

import React from 'react';

const FunctionalComponent = (props) => {
  return <div>Hello, {props.name}!</div>;
};

export default FunctionalComponent;

2. 类组件（Class Components）：

   • 类组件是通过 ES6 的类语法来定义的，继承自 React.Component 或 React.PureComponent。
   • 类组件可以包含内部状态（通过 this.state 定义）和生命周期方法（例如 componentDidMount、render 等）。
   • 类组件通常用于需要管理内部状态或者实现复杂逻辑的场景。

import React, { Component } from 'react';

class ClassComponent extends Component {
  render() {
    return <div>Hello, {this.props.name}!</div>;
  }
}

export default ClassComponent;

3. 高阶组件（Higher Order Components，HOC）：

   • 高阶组件是一个函数，接收一个组件作为参数，并返回一个新的增强版组件。
   • 高阶组件可以用来增强组件的功能，例如添加状态管理、引入逻辑复用、处理副作用等。
   • 高阶组件通常用于跨组件之间共享逻辑或者抽象复用逻辑的场景。

import React from 'react';

const withLogger = (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      console.log('Component is mounted');
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

const WrappedComponent = (props) => {
  return <div>Hello, {props.name}!</div>;
};

const EnhancedComponent = withLogger(WrappedComponent);

export default EnhancedComponent;

4. Render Props：

   • Render Props 是一种模式，通过将一个函数作为 prop 传递给子组件来共享代码。
   • 父组件通过 Render Props 将一些数据或者逻辑传递给子组件，子组件通过调用这个函数来获取数据或者执行逻辑。
   • Render Props 可以用于实现复用逻辑、共享状态、组件组合等。

import React from 'react';

class RenderPropsComponent extends React.Component {
  render() {
    return this.props.children('World');
  }
}

const App = () => {
  return (
    <RenderPropsComponent>
      {(name) => <div>Hello, {name}!</div>}
    </RenderPropsComponent>
  );
};

export default App;

这些构建组件的方式各有特点，适用于不同的场景和需求：

• 函数式组件适用于简单的 UI 渲染，语法简洁，性能高效。
• 类组件适用于复杂的 UI 逻辑、状态管理和生命周期控制。
• 高阶组件适用于跨组件共享逻辑和增强组件功能。
• Render Props 适用于共享代码、复用逻辑和组件组合。