React 组件的发展历程：简史和未来展望

2023-09-23 20:10:31

React 组件概述

React 组件是构建用户界面的基石，它们以可重用的方式组织和管理 UI 元素。组件可以是类组件或函数组件，每种类型都有其独特的特性和用途。

类组件的兴起

类组件是 React 早期的核心组件类型，它们基于 ES6 的 class 语法构建。类组件的特点包括：

状态管理：类组件可以通过 this.state 和 this.setState 方法管理内部状态。
生命周期方法：类组件拥有一系列生命周期方法，如 componentDidMount、componentDidUpdate 和 componentWillUnmount，允许在组件的不同阶段执行特定逻辑。

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

  componentDidMount() {
    console.log('Component did mount.');
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

函数组件的简洁之美

函数组件使用 ES6 的 function 语法定义，它们相对于类组件更为简洁，因为：

不包含状态或生命周期方法。
仅接受 props 作为输入，并返回组件的 UI。

function MyComponent(props) {
  return <div>{props.count}</div>;
}

Hooks 的革命性引入

Hooks 是 React v16.8 引入的一项重大特性，它使得函数组件能够拥有状态和其他 React 特性，无需编写类。Hooks 的优势包括：

状态管理：通过 useState Hook，函数组件可以管理自己的状态。
生命周期方法：useEffect Hook 可以模拟类组件中的生命周期方法。

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}