元素与组件

在React中，元素和组件是构建UI的基本单元。理解它们的区别和关系是学习React的关键。本文将详细介绍React中的元素和组件，并展示如何使用它们来构建动态、可复用的UI。

1. React元素

React元素是构成UI的最小单元，它是描述页面内容的基础。React元素实际上是一个普通的JavaScript对象，通过JSX语法创建。每个React元素都包含类型（例如HTML标签或组件）、属性和子元素。

1.1 创建元素

React元素可以通过JSX语法或React.createElement函数创建。

示例：

// 使用JSX语法创建元素
const element = <h1>Hello, world!</h1>;

// 使用React.createElement创建元素
const element2 = React.createElement('h1', null, 'Hello, world!');

1.2 元素是不可变的

一旦React元素被创建，它就变成了不可变的。React不会直接修改元素，而是通过比较前后两个元素的差异来决定如何更新UI。

2. React组件

React组件是UI的构建块，它们是函数或类，负责返回React元素。组件可以接收输入（称为“props”），并根据输入返回元素或其他组件。组件可以是无状态的（函数组件）或有状态的（类组件）。

2.1 函数组件

函数组件是最常见的组件类型，通常是一个接受props作为参数并返回React元素的普通JavaScript函数。它们可以使用React的useState、useEffect等Hook来管理状态和副作用。

示例：

// 定义一个函数组件
function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// 使用组件
const element = <Welcome name="Sara" />;

2.2 类组件

类组件是React中的传统组件，它们通过扩展React.Component来定义，并使用render()方法返回React元素。类组件适用于需要内部状态或生命周期方法的情况。

示例：

// 定义一个类组件
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

// 使用组件
const element = <Welcome name="Sara" />;

2.3 组件的props

props是组件的输入，它是由父组件传递给子组件的数据。props是只读的，子组件不能修改props的值。

示例：

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

const element = <Welcome name="Sara" />; // name是props

2.4 组件的state

state是组件的内部数据，通常用于描述UI的当前状态。与props不同，state是可变的，可以通过setState方法（类组件）或useState钩子（函数组件）进行更新。

示例（函数组件）：

import { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

3. 组件的生命周期

组件在其生命周期内会经历不同的阶段。React提供了生命周期方法（类组件）或useEffect钩子（函数组件）来管理这些阶段。

3.1 类组件的生命周期

类组件的生命周期方法可以分为三个阶段：

  • 挂载阶段：组件实例化并插入到DOM中。 componentDidMount()：组件渲染完成后调用。
  • 更新阶段：组件的props或state发生变化时会触发。 componentDidUpdate()：组件更新后调用。
  • 卸载阶段：组件从DOM中移除。 componentWillUnmount()：组件销毁前调用。

3.2 函数组件的生命周期（使用useEffect）

函数组件使用useEffect钩子来模拟生命周期方法，useEffect在每次渲染后执行，并可以指定依赖项。

示例：

import { useEffect, useState } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => setSeconds(prev => prev + 1), 1000);

    // 清理副作用
    return () => clearInterval(interval);
  }, []); // 仅在组件挂载和卸载时执行

  return <p>Timer: {seconds} seconds</p>;
}

4. 组件的组合

React鼓励通过将小组件组合成更大的组件来构建UI。父组件可以将子组件作为子元素传递。

示例：

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

在这个例子中，App是父组件，Welcome是子组件。

5. 小结

  • React元素是构建UI的基础，它们描述了UI的结构和内容。
  • React组件是UI的可复用单元，可以是函数组件或类组件。
  • 组件可以接收props作为输入，管理state作为内部状态，并通过生命周期方法或useEffect钩子进行副作用处理。
  • React推荐通过组件组合来构建复杂的UI。

掌握React元素和组件的使用，是构建React应用的基础和关键。

Last Updated::