====== 第五章：组件基础 ======

===== 5.1 函数组件 =====

函数组件是定义 React 组件最简单的方式。它是一个接收 props 对象并返回 React 元素的 JavaScript 函数。

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

**特点**：

  * 简洁：纯函数，没有生命周期方法和 this
  * 无状态（Hooks 之前）：只能接收 props，不能管理自己的 state
  * 性能：没有实例化开销，渲染更快

**使用箭头函数**：

<code javascript>
const Welcome = (props) => {
  return <h1>Hello, {props.name}</h1>;
};

// 简写形式（隐式返回）
const Welcome = (props) => <h1>Hello, {props.name}</h1>;

// 解构 props
const Welcome = ({ name }) => <h1>Hello, {name}</h1>;
</code>

===== 5.2 类组件 =====

类组件使用 ES6 的 class 语法定义，继承自 React.Component。

<code javascript>
import React from 'react';

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

**特点**：

  * 可以使用 state 管理组件内部状态
  * 可以使用生命周期方法
  * 有 this 关键字
  * 需要 render() 方法返回 JSX

===== 5.3 组件组合 =====

组件可以相互组合，形成组件树。

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

function App() {
  return (
    <div>
      <Welcome name="张三" />
      <Welcome name="李四" />
      <Welcome name="王五" />
    </div>
  );
}
</code>

**提取组件**：

当 UI 的一部分被多次使用，或者自身足够复杂时，可以将其提取为独立的组件。

<code javascript>
// 原始代码
function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

// 提取 Avatar 组件
function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}

// 提取 UserInfo 组件
function UserInfo(props) {
  return (
    <div className="UserInfo">
      <Avatar user={props.user} />
      <div className="UserInfo-name">
        {props.user.name}
      </div>
    </div>
  );
}

// 重构后的 Comment 组件
function Comment(props) {
  return (
    <div className="Comment">
      <UserInfo user={props.author} />
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}
</code>

===== 5.4 Props 详解 =====

Props（properties 的缩写）是组件之间传递数据的方式。

**传递 props**：

<code javascript>
function App() {
  return <User name="张三" age={25} isAdmin={true} />;
}
</code>

**接收 props**：

<code javascript>
function User(props) {
  return (
    <div>
      <p>姓名：{props.name}</p>
      <p>年龄：{props.age}</p>
      <p>{props.isAdmin ? '管理员' : '普通用户'}</p>
    </div>
  );
}

// 使用解构
function User({ name, age, isAdmin }) {
  return (
    <div>
      <p>姓名：{name}</p>
      <p>年龄：{age}</p>
      <p>{isAdmin ? '管理员' : '普通用户'}</p>
    </div>
  );
}
</code>

**Props 的只读性**：

组件不能修改自己的 props。props 对于组件来说是只读的。

<code javascript>
// 错误！props 是只读的
function Welcome(props) {
  props.name = 'Hello'; // 错误！
  return <h1>{props.name}</h1>;
}
</code>

===== 5.5 默认 Props =====

为 props 设置默认值：

**函数组件**：

<code javascript>
function Button({ text = '点击', type = 'button' }) {
  return <button type={type}>{text}</button>;
}

// 或者
function Button(props) {
  const { text = '点击', type = 'button' } = props;
  return <button type={type}>{text}</button>;
}
</code>

**类组件**：

<code javascript>
class Button extends React.Component {
  static defaultProps = {
    text: '点击',
    type: 'button'
  };
  
  render() {
    return <button type={this.props.type}>{this.props.text}</button>;
  }
}

// 或者在组件外部
Button.defaultProps = {
  text: '点击',
  type: 'button'
};
</code>

===== 5.6 PropTypes 类型检查 =====

PropTypes 用于运行时类型检查。

安装：

<code bash>
npm install prop-types
</code>

使用：

<code javascript>
import PropTypes from 'prop-types';

function User({ name, age, email }) {
  return (
    <div>
      <p>{name}</p>
      <p>{age}</p>
      <p>{email}</p>
    </div>
  );
}

User.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number,
  email: PropTypes.string,
  isAdmin: PropTypes.bool,
  hobbies: PropTypes.array,
  address: PropTypes.object,
  onClick: PropTypes.func,
  element: PropTypes.element,
  nodes: PropTypes.node,
  user: PropTypes.instanceOf(User),
  shape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  }),
  oneOf: PropTypes.oneOf(['News', 'Photos']),
  oneOfType: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number
  ]),
  arrayOf: PropTypes.arrayOf(PropTypes.number),
  objectOf: PropTypes.objectOf(PropTypes.number),
  any: PropTypes.any
};

User.defaultProps = {
  age: 18
};
</code>

**TypeScript 替代方案**：

如果使用 TypeScript，可以使用接口定义 props 类型，获得编译时类型检查。

===== 5.7 children prop =====

children 是一个特殊的 prop，用于在组件标签之间传递内容。

<code javascript>
function Card({ title, children }) {
  return (
    <div className="card">
      <div className="card-header">{title}</div>
      <div className="card-body">{children}</div>
    </div>
  );
}

// 使用
function App() {
  return (
    <Card title="欢迎使用">
      <p>这是卡片的内容</p>
      <button>了解更多</button>
    </Card>
  );
}
</code>

**children 的类型**：

  * React 元素
  * 字符串或数字
  * 数组（Fragment）
  * 函数（render props）
  * null、undefined、boolean（不渲染）

===== 5.8 render props 模式 =====

render props 是一种在 React 组件之间使用一个值为函数的 prop 共享代码的技术。

<code javascript>
class MouseTracker extends React.Component {
  state = { x: 0, y: 0 };

  handleMouseMove = (event) => {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  };

  render() {
    return (
      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}

// 使用
function App() {
  return (
    <MouseTracker render={({ x, y }) => (
      <p>鼠标位置：({x}, {y})</p>
    )} />
  );
}
</code>

===== 5.9 高阶组件（HOC） =====

高阶组件是一个函数，接收一个组件并返回一个新的组件。

<code javascript>
function withLogger(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log('Component mounted:', WrappedComponent.name);
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

// 使用
const EnhancedComponent = withLogger(MyComponent);
</code>

**常见的 HOC 用途**：

  * 权限控制
  * 日志记录
  * 数据获取
  * 样式增强

===== 5.10 组件的组织方式 =====

**按功能组织**：

<file>
src/
├── components/          # 可复用的 UI 组件
│   ├── Button/
│   │   ├── Button.js
│   │   ├── Button.css
│   │   └── Button.test.js
│   └── Card/
├── features/            # 功能模块
│   ├── User/
│   │   ├── UserList.js
│   │   ├── UserForm.js
│   │   └── userSlice.js
│   └── Product/
├── hooks/               # 自定义 Hooks
├── utils/               # 工具函数
├── api/                 # API 调用
└── App.js
</file>

**按类型组织**：

<file>
src/
├── components/          # 所有组件
├── containers/          # 容器组件
├── actions/             # Redux actions
├── reducers/            # Redux reducers
├── utils/               # 工具函数
└── App.js
</file>

===== 5.11 总结 =====

本章介绍了组件的基础知识：

  * 函数组件和类组件
  * 组件组合
  * Props 传递和使用
  * 默认 Props 和类型检查
  * children 和 render props
  * 高阶组件

组件是 React 的核心概念，理解组件的各种用法是掌握 React 的关键。