React 组件开发

• 什么是React组件？
• 函数组件与类组件
• 组件生命周期与Hooks
• Props与State：数据流管理
• 组件通信机制
• 构建可复用组件的最佳实践
• 总结与展望

React组件是构建用户界面的核心积木。它们是独立的、可复用的代码块，负责渲染UI的一部分。

核心思想

• **声明式 (Declarative)**：你描述UI“应该是什么样”，React负责更新DOM以匹配你的描述。
• **基于组件 (Component-Based)**：UI被拆分成独立的、可组合的组件。
• **一次学习，随处编写 (Learn Once, Write Anywhere)**：React不仅限于Web，还可用于移动应用 (React Native)。

在React Hooks出现之前，组件主要分为类组件和函数组件。Hooks的引入，使得函数组件拥有了状态和生命周期能力。

对比概览

React组件从挂载到卸载会经历不同阶段。函数组件通过 Hooks（如 `useState`, `useEffect`）来管理状态和模拟生命周期行为。

核心Hooks示例

import React, { useState, useEffect } from 'react';

function Counter() {
  // 1. useState: 声明状态变量
  const [count, setCount] = useState(0);

  // 2. useEffect: 模拟副作用（如组件挂载、更新、卸载）
  useEffect(() => {
    // 相当于 componentDidMount 和 componentDidUpdate
    console.log(`Count has updated to: ${count}`);

    // 返回一个清理函数，相当于 componentWillUnmount
    return () => {
      console.log('Component will unmount or effect re-runs cleanup');
    };
  }, [count]); // 依赖数组：只有当count变化时，effect才重新运行

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

简化生命周期流（Mermaid）

数据是驱动React应用的核心。`props` 和 `state` 是React中两种最重要的数据类型，它们共同定义了组件的行为和外观。

Props (属性)

• **传入组件的配置**：由父组件传递给子组件。
• **只读 (Immutable)**：子组件不能直接修改接收到的props。
• **单向数据流**：数据从父到子单向流动。

State (状态)

• **组件内部管理的数据**：由组件自身维护，可随时间变化。
• **可变 (Mutable)**：通过 `useState` (函数组件) 或 `this.setState` (类组件) 进行更新。
• **触发组件重新渲染**：state的改变通常会导致组件重新渲染。

React应用由多个组件构成，它们之间需要相互协作和传递数据。

常见通信方式

• **父组件向子组件通信 (Props down)**：最常见，通过props传递数据和函数。
• **子组件向父组件通信 (Events up)**：通过父组件传递回调函数给子组件，子组件调用函数并传递参数。
• **兄弟组件通信**：通常通过共同的父组件作为中介。
• **跨层级通信 (Context API)**：避免props逐层传递（Prop Drilling），适用于不常更新的全局数据。
• **状态管理库 (Redux/Zustand等)**：适用于复杂、大型应用中的全局状态管理。

父子组件通信示例

// ParentComponent.js
function ParentComponent() {
  const [message, setMessage] = useState('Hello from Parent!');

  const handleChildClick = (data) => {
    setMessage(`Child says: ${data}`);
  };

  return (
    <div>
      <h3>Parent: {message}</h3>
      {/* 1. 父传子：通过 props 传递数据和回调函数 */}
      <ChildComponent 
        greeting={message} 
        onChildAction={handleChildClick} 
      />
    </div>
  );
}

// ChildComponent.js
function ChildComponent({ greeting, onChildAction }) {
  return (
    <div>
      <p>Child received: {greeting}</p>
      {/* 2. 子传父：调用父组件传入的回调函数 */}
      <button onClick={() => onChildAction('I clicked!')}>
        Click Me (Child)
      </button>
    </div>
  );
}
                        

优秀的React组件不仅功能完善，更应具备高复用性和易维护性。

关键原则

• **职责单一**：一个组件只做一件事，并把它做好。
• **松耦合**：减少组件之间的直接依赖，通过props和事件进行通信。
• **可配置性**：通过props提供丰富的配置选项，而不是硬编码行为。
• **纯粹性 (Pure Components)**：给定相同的props和state，渲染相同的输出，无副作用。
• **测试优先**：为你的组件编写单元测试，确保其按预期工作。

性能优化技巧

• **`React.memo` (函数组件)** 或 **`PureComponent` (类组件)**：避免不必要的重新渲染。
• **列表渲染的 `key` 属性**：帮助React高效识别并更新列表项。
• **懒加载 (Lazy Loading)**：使用 `React.lazy` 和 `Suspense` 分割代码，按需加载组件。

`React.memo` 示例

// MyPureComponent.js
import React from 'react';

function MyComponent({ name, count }) {
  console.log('MyComponent rendered');
  return (
    <div>
      <p>Name: {name}</p>
      <p>Count: {count}</p>
    </div>
  );
}

// 使用 React.memo 包装组件，只有当 props 发生变化时才重新渲染
// 这是一个“浅比较”
export default React.memo(MyComponent); 

// Parent usage
function Parent() {
    const [clicks, setClicks] = useState(0);
    const user = { name: 'Alice' }; // Object reference changes on re-render

    return (
        <div>
            <button onClick={() => setClicks(clicks + 1)}>
                Click Parent ({clicks})
            </button>
            {/* 这里的MyPureComponent只有当props.count变化时才会重新渲染，因为props.name是一个原始值 */}
            <MyPureComponent name="Bob" count={clicks} /> 
            {/* 这里的MyPureComponent因为 user 对象每次都是新的引用，所以总是重新渲染 */}
            <MyPureComponent name={user.name} count={clicks} /> 
        </div>
    );
}