React 组件化开发：从项目创建到组件通信

一、React 项目创建

1. 使用 Vite 创建 React 项目

csharp 复制代码

npm init vite

2. 选择配置

输入项目名称
选择框架：React
选择语言：JavaScript

3. 进入项目目录并安装依赖

bash 复制代码

cd 项目名
npm i

4. 启动开发服务器

arduino 复制代码

npm run dev

二、React 组件基础

组件结构

javascript 复制代码

import React from 'react';

function MyComponent(props) {
  return (
    <div className="component">
      <p>这是一个React组件</p>
    </div>
  );
}

export default MyComponent;

组件特点：

组合性：组合 HTML、CSS 和 JavaScript
复用性：可在多个地方重复使用
独立性：拥有自己的状态和逻辑
可测试性：便于单元测试

三、响应式数据管理：useState

基本用法

javascript 复制代码

import React, { useState } from 'react';

function Counter() {
  // 声明状态变量和更新函数
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>当前计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        增加
      </button>
      <button onClick={() => setCount(count - 1)}>
        减少
      </button>
    </div>
  );
}

export default Counter;

useState 特点：

状态隔离：每个组件实例有独立状态
异步更新：状态更新是异步的
函数式更新：支持基于前一个状态更新
ini 复制代码
```
setCount(prevCount => prevCount + 1);
```

四、组件间通信

1. 父组件向子组件传递数据（Props）

javascript 复制代码

// 父组件
function Parent() {
  const [message, setMessage] = useState('来自父组件的问候');

  return (
    <div>
      <Child message={message} />
    </div>
  );
}

// 子组件
function Child(props) {
  return <p>{props.message}</p>;
}

七、完整示例：TodoList 应用

ini 复制代码

import React, { useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const addTodo = () => {
    if (inputValue.trim()) {
      setTodos([...todos, inputValue]);
      setInputValue('');
    }
  };

  const removeTodo = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

  return (
    <div className="todo-app">
      <h1>Todo List</h1>
      
      <TodoInput 
        value={inputValue}
        onChange={setInputValue}
        onAdd={addTodo}
      />
      
      <TodoList 
        todos={todos} 
        onRemove={removeTodo} 
      />
    </div>
  );
}

function TodoInput({ value, onChange, onAdd }) {
  return (
    <div className="todo-input">
      <input
        type="text"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder="添加新任务..."
      />
      <button onClick={onAdd}>添加</button>
    </div>
  );
}

function TodoList({ todos, onRemove }) {
  return (
    <ul className="todo-list">
      {todos.map((todo, index) => (
        <TodoItem 
          key={index} 
          text={todo} 
          onRemove={() => onRemove(index)} 
        />
      ))}
    </ul>
  );
}

function TodoItem({ text, onRemove }) {
  return (
    <li className="todo-item">
      <span>{text}</span>
      <button onClick={onRemove}>删除</button>
    </li>
  );
}

export default TodoApp;

结语

React 组件化思想是现代前端开发框架的核心思想。模块化将任务分离，一个文件一个模块（组件），最后将组件组合在一起，完成页面开发。