React构建组件的方式有哪些，有什么区别？_react构建组件的方式有哪些?区别?-优快云博客

本文链接：https://blog.youkuaiyun.com/alive_new/article/details/137709558

React构建组件的方式有哪些，有什么区别？

React 组件是构成React应用的基本单元。在React中，有几种不同的方式可以创建组件，每种方式都有其特定的用途和优势。

1. 函数组件

函数组件是最简单的React组件形式，它是一个返回React元素的JavaScript函数。

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

在这个例子中，Greeting是一个接受props并返回一个问候信息的函数组件。

1.1 特点

无状态：函数组件不能拥有状态或生命周期钩子。
轻量级：与类组件相比，函数组件通常更简单、更易于理解。
适合展示逻辑：由于没有内部逻辑，函数组件适合用作展示组件。

2. 类组件

类组件是通过继承React.Component来创建的，它可以拥有状态（通过this.state）和生命周期钩子。

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState(state => ({ count: state.count + 1 }));
  };

  render() {
    return (
      <div>
        <h2>Count: {this.state.count}</h2>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

在这个例子中，Counter是一个拥有内部状态和事件处理函数的类组件。

2.1特点

有状态：类组件可以拥有和修改状态。
生命周期钩子：类组件可以定义生命周期钩子，如componentDidMount、componentDidUpdate等。
适合复杂逻辑：由于可以拥有状态和生命周期，类组件适合处理更复杂的逻辑。

3. 高阶组件

高阶组件（HOC）是一个函数，它接收一个组件并返回一个具有增强行为的新组件。

function withTitle(WrappedComponent, title) {
  return class extends React.Component {
    render() {
      return (
        <div>
          <h2>{title}</h2>
          <WrappedComponent {...this.props} />
        </div>
      );
    }
  };
}

function MyComponent() {
  return <div>This is my component</div>;
}

constWithTitle = withTitle(MyComponent, 'My Component Title');

在这个例子中，withTitle是一个HOC，它为MyComponent添加了一个标题。

3.1特点

复用逻辑：HOC可以用来复用组件逻辑，如认证、主题化等。
组件装饰：HOC不会修改原始组件，而是返回一个新的组件。
灵活性：HOC可以用于任何组件，无论它是函数组件还是类组件。

4. 自定义Hook

自定义Hook是一种特殊的函数，它可以让你在不修改组件结构的情况下复用状态逻辑。

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    // 假设这是从服务器获取的状态更新
    const channel = EventChannel.subscribe(`user_${friendID}_status`);
    channel.onMessage(handleStatusChange);
    return () => channel.remove();

  }, [friendID]);

  return isOnline;
}

function FriendStatus(props) {
  const isOnline = useFriendStatus(props.friend.id);
  return <div>{props.friend.name} is {isOnline ? 'online' : 'offline'}.</div>;
}