React组件开发新姿势，摆脱class束缚！

2024-01-31 09:06:41

对于 React 开发人员来说，class 组件可谓是既熟悉又头疼的存在。一方面，它们提供了强大的功能和灵活性；另一方面，它们的复杂性和难以维护性也让不少开发人员感到厌烦。那么，有没有一种方法可以摆脱 class 组件的束缚，同时又保留其优点呢？答案是：函数式组件。

与 class 组件不同，函数式组件只是普通的 JavaScript 函数，它们没有 state 和生命周期方法。这使得它们更加简单、易于维护，并且更适合于构建小型和中型的 React 应用程序。

ES6 创建 class 组件的方式

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

函数式组件的创建方式

const MyComponent = () => {
  return <h1>Hello, world!</h1>;
};

props

props 是组件从父组件接收数据的唯一方式。props 是一个特殊的 JavaScript 对象，它包含了父组件传递给子组件的所有数据。

class 组件如何接受外部数据

在 class 组件中，props 是通过 this.props 来访问的。

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

函数式组件如何接受外部数据

在函数式组件中，props 是作为函数的参数传递的。

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

class 组件如何接受外部函数

在 class 组件中，外部函数可以通过 this.props.functionName 来访问。

class MyComponent extends React.Component {
  render() {
    return <button onClick={this.props.handleClick}>Click me!</button>;
  }
}

函数式组件如何接受外部函数

在函数式组件中，外部函数可以通过函数的参数来访问。

const MyComponent = (props) => {
  return <button onClick={props.handleClick}>Click me!</button>;
};

class 组件的初始化

class 组件的初始化是在构造函数中进行的。在构造函数中，可以对 state 和生命周期方法进行初始化。

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

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

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

函数式组件的初始化

函数式组件没有构造函数，因此它们不能初始化 state 和生命周期方法。但是，它们可以使用 hooks 来实现类似的功能。

import { useState } from 'react';

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

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
};