读者对象：本文面向熟悉 JavaScript、希望学习 React 的初学者，以及希望复习 React 组件的人。

概述

本文介绍了 React 组件，讨论了它们的类型、创建、组成和可重用性。它进一步解释了组件如何通过“props”进行通信并使用“state”管理内部数据。最后，它探讨了 React 中的组件生命周期方法，增强了对构建动态应用程序的理解。

React 是一个流行的 JavaScript 库，用于构建用户界面，由 Facebook 开发。它专注于视图层，为开发人员提供了大量的灵活性和性能提升。本教程旨在帮助您了解 React 的基础知识，尤其是其基本构建块 - 组件。

什么是组件？

组件是 React 应用程序的基石。它们是可重用的代码片段，返回要渲染到 DOM 上的 React 元素。组件通过将 UI 分解为更小的、可重用的部分来简化大型应用程序的构建。React 中有两种主要类型的组件：功能组件和类组件。

在 React 中创建函数式组件

函数式组件是 JavaScript 函数。它们接受称为“props”的输入，并返回应该渲染的内容。这是一个简单的例子：

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

这是一个名为“Welcome”的功能组件。它接受一个参数“props”，并返回一个 React 元素。该元素是一个 React 组件树，最终将渲染 HTML。

在 React 中创建类组件

类组件比功能组件更复杂。它们被声明为 JavaScript 类并从React.Component. 类组件需要一个render()方法，您可以在其中定义组件呈现的内容：

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

这个“欢迎”组件的工作方式与上面的功能组件相同。两者都是有效的，您可以根据您的喜好或用例使用其中之一。

了解 React 中的组件组成和可重用性

使用组件的主要好处之一是可重用性。您可以定义一次组件并在多个地方重用它。此外，您可以组合组件来创建复杂的 UI。

例如，您可以创建一个呈现“Welcome”组件的“App”组件：

function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

在上面的示例中，我们重复使用了“欢迎”组件两次。“App”组件是父组件，而“Welcome”组件是子组件。这代表了一个“组合”，这是 React 中的一个关键模式。

将 Props 传递给 React 中的组件

“Props”是属性的缩写。它们是组件之间相互通信的方式。props 从父组件传递到子组件，并且对于子组件来说是只读的。

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

function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
    </div>
  );
}

在此示例中，我们将“name”属性从“App”组件传递到“Welcome”组件。然后，“Welcome”组件在其渲染输出中使用此道具。

在 React 中处理组件状态

虽然 props 允许子组件从其父组件接收数据，但 state 允许组件管理和更新自己的数据。State 与 props 类似，但它是私有的并且完全由组件控制。

类组件可以有本地状态：

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>You clicked {this.state.count} times</p>
        <button onClick={this.increment}>
          Click me
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <Counter />,
  document.getElementById('root')
);

在上面的示例中，“计数器”类组件保持其计数状态。当按下“Click me”按钮时，将调用“increment”函数，该函数使用该setState()函数更新组件的状态。

在 React 中管理组件生命周期

React 中的类组件具有在组件生命周期的不同点运行的内置方法。这些生命周期方法使您能够控制组件安装、更新和卸载时发生的情况。

最常用的生命周期方法是componentDidMount()、componentDidUpdate()和componentWillUnmount()。

这是一个例子：

class Example extends React.Component {
  componentDidMount() {
    console.log('Component mounted');
  }

  componentDidUpdate() {
    console.log('Component updated');
  }

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

  render() {
    return <h1>Hello, world!</h1>;
  }
}

在此“示例”类组件中，我们使用生命周期方法在组件安装、更新和卸载时记录消息。

总而言之，React 组件是使用 React 构建应用程序时的核心概念。了解如何创建和操作这些组件及其生命周期将使您能够轻松创建复杂而强大的应用程序。建议对组件进行练习和实验，因为经验将有助于巩固这些概念。

后台dd1领取前端学习资料大礼包！