复习react前言最近也是很焦虑，大环境这么差。本着保持自己的竞争力，很有必要技多不压身。这不就想到了react.很久

前言

最近也是很焦虑，大环境这么差。本着保持自己的竞争力，很有必要技多不压身。这不就想到了react.很久没有使用react了，一直在写vue。得复习复习。

搭一个react的项目

首先，使用以下命令创建项目：

yarn create vite vite-react-app --template react-ts

cd my-react-app

安装依赖

yarn install

启动

yarn run

默认已经配置好的功能

Typescript 支持
React 18
ESLint 配置

基础概念

JSX语法

// JSX 示例
const element = (
    <div className="greeting">
        <h1>Hello, World!</h1>
    </div>
);

组件（Components）

// 函数组件
function Welcome(props: { name: string }) {
    return <h1>Hello, {props.name}</h1>;
}

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

Props和State

// Props 示例
function Welcome(props: { name: string }) {
    return <h1>Hello, {props.name}</h1>;
}

// State 示例（使用 Hooks）
function Counter() {
    const [count, setCount] = useState(0);
    
    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                增加
            </button>
        </div>
    );
}

React Hooks

useState - 状态管理

function Example() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>你点击了 {count} 次</p>
            <button onClick={() => setCount(count + 1)}>
                点击我
            </button>
        </div>
    );
}

useEffect - 副作用处理

function Example() {
    const [data, setData] = useState(null);

    useEffect(() => {
        // 组件挂载时获取数据
        fetchData().then(result => setData(result));
        
        // 清理函数
        return () => {
            // 组件卸载时执行清理
        };
    }, []); // 空依赖数组表示只在挂载时执行

    return <div>{/* 渲染数据 */}</div>;
}

1. 创建一个React组件

// 最简单的函数组件
function Welcome() {
    return <h1>Hello, React!</h1>;
}

// 使用组件
function App() {
    return (
        <div>
            <Welcome />
        </div>
    );
}

2. Props（属性）

Props 允许我们向组件传递数据

// 定义具有 props 的组件
function Welcome(props: { name: string }) {
    return <h1>Hello, {props.name}!</h1>;
}

// 使用组件并传递 props
function App() {
    return (
        <div>
            <Welcome name="小明" />
            <Welcome name="小红" />
        </div>
    );
}

3. State（状态）和事件处理

import { useState } from 'react';

function Counter() {
    // 声明一个状态变量 count，初始值为 0
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>你点击了 {count} 次</p>
            <button onClick={() => setCount(count + 1)}>
                点击我
            </button>
        </div>
    );
}

写一个待办事项

import { useState } from 'react';

// 定义待办事项的类型
interface Todo {
    id: number;
    text: string;
    completed: boolean;
}

function TodoApp() {
    // 状态：待办事项列表
    const [todos, setTodos] = useState<Todo[]>([]);
    // 状态：输入框的值
    const [inputText, setInputText] = useState('');

    // 添加待办事项
    const handleAdd = () => {
        if (inputText.trim()) {
            const newTodo: Todo = {
                id: Date.now(),
                text: inputText.trim(),
                completed: false
            };
            setTodos([...todos, newTodo]);
            setInputText(''); // 清空输入框
        }
    };

    // 切换待办事项的完成状态
    const toggleTodo = (id: number) => {
        setTodos(todos.map(todo => 
            todo.id === id 
                ? { ...todo, completed: !todo.completed }
                : todo
        ));
    };

    // 删除待办事项
    const deleteTodo = (id: number) => {
        setTodos(todos.filter(todo => todo.id !== id));
    };

    return (
        <div>
            <h1>待办事项</h1>
            
            {/* 输入区域 */}
            <div>
                <input 
                    type="text"
                    value={inputText}
                    onChange={(e) => setInputText(e.target.value)}
                    placeholder="输入新的待办事项"
                />
                <button onClick={handleAdd}>添加</button>
            </div>

            {/* 待办事项列表 */}
            <ul>
                {todos.map(todo => (
                    <li key={todo.id}>
                        <span
                            onClick={() => toggleTodo(todo.id)}
                            style={{
                                textDecoration: todo.completed ? 'line-through' : 'none',
                                cursor: 'pointer'
                            }}
                        >
                            {todo.text}
                        </span>
                        <button onClick={() => deleteTodo(todo.id)}>
                            删除
                        </button>
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default TodoApp;

集合

我全放在app.tsx里面了

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

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

function Counter() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <p>你点击了{count}次</p>
      <button onClick={() => setCount(count +1)}>点击我</button>
    </div>
  )
}

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

function TodoApp() {
  // 状态： 带办事项列表
  const [todos, setTodos] = useState<Todo[]>([]);
  // 状态： 输入框的值
  const [inputText, setInputText] = useState('');

  // 添加待办事项
  const handleAdd = () => {
    if(inputText.trim()) {
      const newTodo: Todo = {
        id: Date.now(),
        text: inputText.trim(),
        completed: false
      };
      setTodos([...todos, newTodo]);
      setInputText('')
    }
  }
  // 切换待办事项的完成状态
  const toggleTodo = (id: number) => {
    setTodos(todos.map(todo => todo.id === id ? {...todo, completed: !todo.completed} : todo))
  };
  // 删除待办事项
  const deleteTodo = (id: number) => {
    setTodos(todos.filter(todo => todo.id !== id))
  };
  return (
    <div>
      <h1>待办事项</h1>
      {/* 输入区域 */}
      <div>
        <input type="text" value={inputText} onChange={(e) => setInputText(e.target.value)} placeholder="输入新的待办事项" />
        <button onClick={handleAdd}>添加</button>
      </div>
      {/* 待办事项列表 */}
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            <span onClick={() => toggleTodo(todo.id)} style={{textDecoration: todo.completed ? 'line-through' : 'none', cursor: 'pointer'}}>{ todo.text }</span>
            <button onClick={() => deleteTodo(todo.id)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  )
}

function App() {
  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <Welcome name='他们叫我秃子' />
      <Counter />
      <TodoApp />
    </>
  )
}

export default App

记忆这个东西，如果不时常回忆一下，就会被放在深处