React 组件 API

React 组件 API 是 React 应用程序开发中的核心部分，它提供了一系列的接口和方法，使得开发者能够创建和管理组件的状态、属性以及生命周期。在本篇文章中，我们将深入探讨 React 组件 API 的各个方面，包括组件的定义、状态管理、属性传递、事件处理以及组件的生命周期方法。

组件的定义

React 组件可以通过两种方式定义：类组件和函数组件。类组件使用 ES6 的类语法，而函数组件则是一个简单的 JavaScript 函数。

类组件

类组件是通过继承 React.Component 来创建的。它们具有状态（state）和生命周期方法，这使得它们在处理复杂逻辑时更为强大。

class MyComponent extends React.Component {
  render() {
    return <div>Hello, World!</div>;
  }
}

函数组件

函数组件是一个接收 props 作为参数并返回 React 元素的函数。它们通常用于创建无状态的组件。

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

状态管理

状态（state）是组件内部管理数据的一种方式。在类组件中，状态是组件实例的一部分，可以通过 this.state 访问和更新。

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

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

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

在函数组件中，可以使用 useState 钩子来管理状态。

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

属性传递

属性（props）是组件之间的数据传递方式。父组件可以通过属性将数据传递给子组件。

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

function App() {
  return <Greeting name="John" />;
}

事件处理

React 组件可以通过事件处理函数来响应用户交互。事件处理函数通常以 on 开头，例如 onClick、onKeyDown 等。

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // 为了在回调中使用 `this`，这个绑定是必不可少的
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

组件的生命周期

React 组件的生命周期包括几个不同的阶段：挂载（Mounting）、更新（Updating）和卸载（Unmounting）。每个阶段都有相应的生命周期方法，例如 componentDidMount、componentDidUpdate 和 componentWillUnmount。

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

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

  componentDidUpdate() {
    console.log('Component did update');
  }

  componentWillUnmount() {
    console.log('Component will unmount');
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}