React 组件

React 是一个用于构建用户界面的 JavaScript 库,它采用组件化的开发方式,将整个应用拆分成多个独立且可复用的组件。在 React 中,组件是构建用户界面的基本单元,每个组件都有自己的状态和属性。

创建组件

在 React 中,可以使用函数组件或类组件来创建组件。函数组件是一种简单的组件形式,只需要编写一个函数来返回 JSX 元素即可。以下是一个简单的函数组件示例:

-------- -------------- -
  ------ ---------- ------------------
-

类组件是另一种常见的组件形式,需要继承自 React.Component 类,并实现一个 render 方法来返回 JSX 元素。以下是一个简单的类组件示例:

----- ------- ------- --------------- -
  -------- -
    ------ ---------- -----------------------
  -
-

使用组件

要在应用中使用组件,只需在 JSX 中像使用 HTML 标签一样使用组件标签即可。可以通过 props 属性向组件传递数据。以下是一个使用上述 Welcome 组件的示例:

-------- ----- -
  ------ -
    -----
      -------- ------------ --
      -------- ---------- --
    ------
  --
-

在上面的示例中,我们在 App 组件中使用了两个 Welcome 组件,并通过 name 属性向组件传递了数据。

组件的生命周期

React 组件有生命周期方法,可以在组件的不同阶段执行特定的操作。常用的生命周期方法包括 componentDidMount、componentDidUpdate 和 componentWillUnmount。以下是一个生命周期方法的示例:

----- ----- ------- --------------- -
  ------------------ -
    -------------
    ---------- - - ----- --- ------ --
  -

  ------------------- -
    ------------ - ------------
      -- -- ------------
      ----
    --
  -

  ---------------------- -
    ----------------------------
  -

  ------ -
    ---------------
      ----- --- ------
    ---
  -

  -------- -
    ------ -
      -----
        ------ -- --------------------------------------------
      ------
    --
  -
-

在上面的示例中,我们定义了一个 Clock 组件,利用 componentDidMount 和 componentWillUnmount 方法实现了定时更新时间的功能。

以上是关于 React 组件的简要介绍,组件是 React 应用的核心,合理地拆分组件能够提高代码的可维护性和复用性。在接下来的章节中,我们将深入探讨组件的更多用法和技巧。


上一篇:React JSX
下一篇:React State(状态)