深入探讨 React 组件：组件类型、props 和 state-JavaScript中文网-JavaScript教程资源分享门户

React 是一个流行的 JavaScript 库，用于构建 Web 应用程序中的用户界面。其中核心概念之一是组件，它们使开发人员能够将应用程序拆分为可重用的、独立的代码块。

在这篇文章中，我们将深入探讨 React 组件，并讨论组件类型、props 和 state 三个基本概念。

组件类型

在 React 中，有两种类型的组件：函数组件和类组件。

函数组件

函数组件是一种通过函数创建的无状态组件。它们在渲染时只能接收 props（后面会讲到）并返回 JSX（一种语法糖，用于描述 React 元素）。

这是一个简单的函数组件示例，它渲染一个带有属性值的 h1 元素：

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

在上面的例子中，我们定义了一个名为 Greeting 的函数组件，并将属性对象作为其唯一参数传递。

函数组件可以用箭头函数来定义，如下所示：

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

类组件

类组件是一种通过 JavaScript 类创建的有状态组件。它们与函数组件类似，但是可以在类中定义其他方法和状态。

下面是一个简单的类组件：

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

在这个示例中，我们创建了一个名为 Greeting 的类，并为其定义了 render 方法，它返回一个包含属性的 h1 元素。由于此组件没有本地状态，所以它是一个无状态组件。

Props

组件的 props 是一种用于从父组件传递数据到子组件的机制。它们是只读的，因此子组件不能修改其 props。

下面是一个简单的组件示例，其中包含了一个名为 name 的属性：

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

在这个示例中，我们从父组件向子组件传递了一个名为 name 的属性。要使用该属性，我们可以在组件中使用 props.name。

下面是一个通过类组件实现的相同示例：

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

State

组件的 state 用于存储随时间而变化的数据。它们是组件内部的数据，只能通过在组件内部调用 setState 方法来修改。

下面是一个类组件示例，其中包含了一个名为 count 的本地状态：

// javascriptcn.com 代码示例
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <p>You clicked the button {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

在这个示例中，我们定义了一个名为 Counter 的类组件，并在其构造函数中初始化了一个名为 count 的本地状态。在 onClick 事件处理程序中，我们调用 setState 方法来更新 count 的值。

总结

在本文中，我们深入探讨了 React 组件，并讨论了组件类型、props 和 state 三个基本概念。通过理解这些概念，你可以更好地理解 React 并开始构建交互式、可重用的 Web 应用程序。

示例代码: https://codesandbox.io/s/compassionate-williams-sl1w7

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654b62027d4982a6eb53df1e