第一章：React 核心概念

组件和 Props

什么是组件？

在 React 中，**组件（Component）**是构建用户界面的独立、可复用的代码单元。组件可以看作是 UI 的一部分，例如按钮、表单、导航栏等。React 应用通常由多个嵌套的组件构成。

组件分为两种类型：

  1. 函数组件（Functional Components）：使用 JavaScript 函数定义的组件。
  2. 类组件（Class Components）：使用 ES6 类定义的组件（现在较少使用，推荐函数组件 + Hooks）。

函数组件示例

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

类组件示例

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

Props 是什么？

**Props（Properties）**是组件的输入参数，用于从父组件向子组件传递数据。Props 是只读的，子组件不能直接修改它们。

Props 的特点：

  1. 单向数据流：数据只能从父组件传递到子组件。
  2. 不可变性：子组件不能直接修改接收的 props。
  3. 任意数据类型：可以是字符串、数字、对象、函数，甚至是其他 React 组件。

使用 Props

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

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

组件组合

React 鼓励通过组合多个小组件来构建复杂 UI，而不是通过继承。

示例：组合组件

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

默认 Props

可以为组件设置默认的 props，当父组件未传递时使用默认值。

示例：

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

Welcome.defaultProps = {
  name: "Guest"
};

Props 的类型检查（PropTypes）

使用 prop-types 库可以对 props 进行类型检查，避免运行时错误。

示例：

import PropTypes from 'prop-types';

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

Welcome.propTypes = {
  name: PropTypes.string.isRequired
};

总结

  • 组件是 React 的核心概念，分为函数组件和类组件。
  • Props 用于父子组件之间的数据传递，是只读的。
  • 通过组合组件可以构建复杂的 UI 结构。
  • 使用 defaultProps 和 PropTypes 可以提高代码的健壮性。
Last Updated::