React 学习笔记

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

// 创建根节点并渲染 App 组件
ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

// 在代码中使用（必须以 VITE_ 开头才能在客户端访问）
console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.VITE_APP_TITLE);
console.log(import.meta.env.MODE);  // 'development' 或 'production'

// 示例：配置 API 基础地址
const api = axios.create({
    baseURL: import.meta.env.VITE_API_URL,
});

// JSX 写法
const element = <h1>Hello, React!</h1>;

// React 17 之前等价写法
// const element = React.createElement('h1', null, 'Hello, React!');

// React 17+ 实际编译为（由构建工具自动处理，无需手动编写）
// import { jsx as _jsx } from 'react/jsx-runtime';
// const element = _jsx('h1', { children: 'Hello, React!' });

function App() {
    // 定义事件处理函数
    const handleClick = () => {
        console.log('被点击了');
    };

    return (
        // 1. 必须有一个根元素（可以用 <></> 空标签包裹）
        <div>
            {/* 2. 使用 className 代替 class */}
            <h1 className="title">Hello</h1>

            {/* 3. 使用 htmlFor 代替 for */}
            <label htmlFor="username">用户名</label>

            {/* 4. 所有标签必须闭合 */}
            <input type="text" id="username" />
            <br />

            {/* 5. 使用小驼峰命名属性 */}
            <div onClick={handleClick} tabIndex={0}>
                点击我
            </div>

            {/* 6. style 属性接收一个对象，数值类型会自动添加 px */}
            <p style={{ color: 'red', fontSize: 16 }}>
                红色文字
            </p>
        </div>
    );
}

import { Fragment } from 'react';

function App() {
    const items = [
        { id: 1, term: 'React', desc: 'UI 库' },
        { id: 2, term: 'Vue', desc: '渐进式框架' },
    ];

    return (
        <dl>
            {items.map(item => (
                // 需要传 key 时，必须使用 <Fragment>，不能用 <>
                <Fragment key={item.id}>
                    <dt>{item.term}</dt>
                    <dd>{item.desc}</dd>
                </Fragment>
            ))}
        </dl>
    );
}

// 不需要 key 时，可以用简写语法 <> </>
function Header() {
    return (
        <>
            <h1>标题</h1>
            <p>副标题</p>
        </>
    );
}

function App() {
    const name = '张三';
    const age = 18;
    const isLogin = true;
    const list = [
        { id: 1, name: 'React' },
        { id: 2, name: 'Vue' },
        { id: 3, name: 'Angular' },
    ];

    return (
        <div>
            {/* 变量 */}
            <p>姓名：{name}</p>

            {/* 表达式运算 */}
            <p>年龄：{age + 1}</p>

            {/* 三元表达式 */}
            <p>{isLogin ? '已登录' : '未登录'}</p>

            {/* 调用函数 */}
            <p>{name.toUpperCase()}</p>

            {/* 渲染列表（key 应使用稳定唯一值，如 id） */}
            <ul>
                {list.map(item => (
                    <li key={item.id}>{item.name}</li>
                ))}
            </ul>
        </div>
    );
}

function App() {
    const isLogin = true;
    const role = 'admin';
    const messages = ['消息1', '消息2'];

    return (
        <div>
            {/* 方式一：三元表达式 */}
            {isLogin ? <p>欢迎回来</p> : <p>请登录</p>}

            {/* 方式二：逻辑与 &&（适合只有一种情况） */}
            {isLogin && <p>已登录</p>}

            {/* ⚠️ && 的陷阱：左侧为 0 时会渲染出 "0" */}
            {/* ❌ 错误写法：当 messages.length 为 0 时，页面会显示 "0" */}
            {/* {messages.length && <p>有新消息</p>} */}

            {/* ✅ 正确写法：确保左侧是布尔值 */}
            {messages.length > 0 && <p>有新消息</p>}

            {/* 方式三：提取为函数 */}
            {renderContent(role)}

            {/* 方式四：根据数量显示不同内容 */}
            {messages.length > 0 && (
                <p>你有 {messages.length} 条新消息</p>
            )}
        </div>
    );
}

// 复杂条件逻辑可以提取为函数
function renderContent(role) {
    if (role === 'admin') return <p>管理员面板</p>;
    if (role === 'user') return <p>用户面板</p>;
    return <p>游客面板</p>;
}

function App() {
    const students = [
        { id: 1, name: '张三', age: 18 },
        { id: 2, name: '李四', age: 20 },
        { id: 3, name: '王五', age: 22 },
    ];

    return (
        <div>
            {/* 使用 map 遍历数组生成 JSX */}
            <ul>
                {students.map(student => (
                    <li key={student.id}>
                        {student.name} - {student.age}岁
                    </li>
                ))}
            </ul>

            {/* 渲染表格 */}
            <table>
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>年龄</th>
                    </tr>
                </thead>
                <tbody>
                    {students.map(student => (
                        <tr key={student.id}>
                            <td>{student.name}</td>
                            <td>{student.age}</td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );
}

// 写法一：函数声明
function Welcome() {
    return <h1>Hello, React!</h1>;
}

// 写法二：箭头函数（与上面等价，选一种即可）
const Welcome = () => {
    return <h1>Hello, React!</h1>;
};

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

// 子组件：接收 props
function UserCard({ name, age, avatar }) {
    return (
        <div className="user-card">
            <img src={avatar} alt={name} />
            <h2>{name}</h2>
            <p>年龄：{age}</p>
        </div>
    );
}

// 父组件：传递 props
function App() {
    return (
        <div>
            <UserCard
                name="张三"
                age={18}
                avatar="/images/zhangsan.jpg"
            />
            <UserCard
                name="李四"
                age={20}
                avatar="/images/lisi.jpg"
            />
        </div>
    );
}

// 设置默认值
function Button({ text = '按钮', type = 'primary', children }) {
    return (
        <button className={`btn btn-${type}`}>
            {/* children 代表组件标签之间的内容 */}
            {children || text}
        </button>
    );
}

// 使用
function App() {
    return (
        <div>
            <Button />                        {/* 显示：按钮 */}
            <Button text="提交" />             {/* 显示：提交 */}
            <Button type="danger">删除</Button> {/* 显示：删除 */}
        </div>
    );
}

function App() {
    // 基本事件处理
    const handleClick = () => {
        console.log('按钮被点击了');
    };

    // 带参数的事件处理
    const handleDelete = (id) => {
        console.log('删除 ID:', id);
    };

    // 获取事件对象
    const handleChange = (e) => {
        console.log('输入值:', e.target.value);
    };

    // 同时获取事件对象和自定义参数
    const handleItemClick = (id, e) => {
        console.log('ID:', id);
        console.log('事件:', e);
    };

    return (
        <div>
            {/* 直接绑定函数 */}
            <button onClick={handleClick}>点击</button>

            {/* 传递参数（使用箭头函数包裹） */}
            <button onClick={() => handleDelete(1)}>删除</button>

            {/* 输入事件 */}
            <input onChange={handleChange} />

            {/* 同时传参和获取事件对象 */}
            <div onClick={(e) => handleItemClick(1, e)}>点击项</div>
        </div>
    );
}

import { useState } from 'react';

function Counter() {
    // 声明状态变量 count，初始值为 0
    // setCount 是更新 count 的函数
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>当前计数：{count}</p>
            <button onClick={() => setCount(count + 1)}>+1</button>
            <button onClick={() => setCount(count - 1)}>-1</button>
            <button onClick={() => setCount(0)}>重置</button>
        </div>
    );
}

import { useState } from 'react';

function UserProfile() {
    const [user, setUser] = useState({ name: '张三', age: 18 });

    const updateName = () => {
        // ✅ 展开运算符创建新对象
        setUser({ ...user, name: '李四' });
        // ❌ 错误：直接修改原对象不会触发重新渲染
        // user.name = '李四';
    };

    return (
        <div>
            <p>{user.name}，{user.age}岁</p>
            <button onClick={updateName}>改名</button>
        </div>
    );
}

import { useState } from 'react';

function TodoList() {
    const [list, setList] = useState([1, 2, 3]);

    const addItem = () => {
        setList([...list, list.length + 1]);  // 展开运算符创建新数组
    };
    const removeItem = (index) => {
        setList(list.filter((_, i) => i !== index));  // filter 返回新数组
    };

    return (
        <div>
            <button onClick={addItem}>添加</button>
            <ul>
                {list.map((item, i) => (
                    <li key={item}>
                        {item} <button onClick={() => removeItem(i)}>删除</button>
                    </li>
                ))}
            </ul>
        </div>
    );
}

import { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    const increment = () => {
        // ✅ 推荐：基于前一次的值更新
        setCount(prev => prev + 1);
    };

    // ❌ 问题演示：连续调用 setCount(count + 1) 多次只会 +1
    // 因为同一次渲染中 count 的值不变
    const addThree = () => {
        setCount(prev => prev + 1);
        setCount(prev => prev + 1);
        setCount(prev => prev + 1);
        // 使用函数式更新，结果正确 +3
    };

    return (
        <div>
            <p>计数：{count}</p>
            <button onClick={increment}>+1</button>
            <button onClick={addThree}>+3</button>
        </div>
    );
}

import { useState, useEffect } from 'react';

function App() {
    const [count, setCount] = useState(0);
    const [data, setData] = useState(null);

    // 情况一：每次渲染后都执行（不传依赖数组）
    useEffect(() => {
        console.log('组件渲染了');
    });

    // 情况二：仅在挂载时执行一次（空依赖数组）
    useEffect(() => {
        console.log('组件挂载了');
        // 适合做：数据请求、事件监听注册等
    }, []);

    // 情况三：依赖项变化时执行
    useEffect(() => {
        console.log('count 变化了:', count);
        document.title = `当前计数：${count}`;
    }, [count]);

    // 情况四：清理副作用（返回清理函数）
    useEffect(() => {
        const timer = setInterval(() => {
            console.log('定时器运行中...');
        }, 1000);

        // 清理函数：组件卸载时或依赖变化前执行
        return () => {
            clearInterval(timer);
            console.log('定时器已清除');
        };
    }, []);

    return (
        <div>
            <p>{count}</p>
            <button onClick={() => setCount(count + 1)}>+1</button>
        </div>
    );
}

function UserList() {
    const [users, setUsers] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        // 创建 AbortController 用于取消请求
        const controller = new AbortController();

        const fetchUsers = async () => {
            try {
                setLoading(true);
                const response = await fetch('https://api.example.com/users', {
                    signal: controller.signal,  // 绑定取消信号
                });
                const data = await response.json();
                setUsers(data);
            } catch (err) {
                // 忽略因取消请求导致的错误
                if (err.name !== 'AbortError') {
                    setError(err.message);
                }
            } finally {
                setLoading(false);
            }
        };

        fetchUsers();

        // 清理函数：组件卸载时取消未完成的请求
        // 在严格模式下，这能正确处理 Effect 执行两次的情况
        return () => controller.abort();
    }, []);

    if (loading) return <p>加载中...</p>;
    if (error) return <p>错误：{error}</p>;

    return (
        <ul>
            {users.map(user => (
                <li key={user.id}>{user.name}</li>
            ))}
        </ul>
    );
}

import { useRef, useState } from 'react';

function App() {
    // 用法一：获取 DOM 元素
    const inputRef = useRef(null);

    const focusInput = () => {
        inputRef.current.focus();       // 聚焦输入框
        inputRef.current.value = '';    // 清空输入框
    };

    // 用法二：保存可变值（修改不会触发重新渲染）
    const timerRef = useRef(null);
    const [count, setCount] = useState(0);

    const startTimer = () => {
        timerRef.current = setInterval(() => {
            setCount(prev => prev + 1);
        }, 1000);
    };

    const stopTimer = () => {
        clearInterval(timerRef.current);
    };

    return (
        <div>
            <input ref={inputRef} />
            <button onClick={focusInput}>聚焦并清空</button>

            <p>计数：{count}</p>
            <button onClick={startTimer}>开始</button>
            <button onClick={stopTimer}>停止</button>
        </div>
    );
}

import { useRef, forwardRef } from 'react';

// 子组件：使用 forwardRef 接收父组件传来的 ref
const CustomInput = forwardRef(function CustomInput({ label }, ref) {
    return (
        <div>
            <label>{label}</label>
            <input ref={ref} />
        </div>
    );
});

// 父组件：可以通过 ref 直接操作子组件内部的 input
function App() {
    const inputRef = useRef(null);

    const handleClick = () => {
        inputRef.current.focus();
    };

    return (
        <div>
            <CustomInput ref={inputRef} label="用户名" />
            <button onClick={handleClick}>聚焦输入框</button>
        </div>
    );
}

import { useState, useMemo, useCallback } from 'react';

function App() {
    const [count, setCount] = useState(0);
    const [text, setText] = useState('');

    // useMemo：缓存计算结果，依赖不变时不重新计算
    const expensiveResult = useMemo(() => {
        console.log('进行复杂计算...');
        let result = 0;
        for (let i = 0; i < 1000000; i++) {
            result += i;
        }
        return result + count;
    }, [count]);  // 只有 count 变化时才重新计算

    // useCallback：缓存函数引用，依赖不变时返回同一个函数
    const handleClick = useCallback(() => {
        console.log('count:', count);
    }, [count]);  // 只有 count 变化时才创建新函数

    return (
        <div>
            <p>计算结果：{expensiveResult}</p>
            <button onClick={() => setCount(count + 1)}>+1</button>
            <input value={text} onChange={e => setText(e.target.value)} />
            <ChildComponent onClick={handleClick} />
        </div>
    );
}

import { useState, useCallback, memo } from 'react';

// 用 memo 包裹子组件：只有 props 变化时才重新渲染
const ExpensiveChild = memo(function ExpensiveChild({ onClick, data }) {
    console.log('子组件渲染了');
    return (
        <div>
            <p>{data}</p>
            <button onClick={onClick}>点击</button>
        </div>
    );
});

function App() {
    const [count, setCount] = useState(0);
    const [text, setText] = useState('');

    // ❌ 不用 useCallback：每次 App 渲染都创建新函数 → memo 失效 → 子组件每次都重新渲染
    // const handleClick = () => console.log('clicked');

    // ✅ 用 useCallback：函数引用稳定 → memo 生效 → 子组件不会因为 text 变化而重新渲染
    const handleClick = useCallback(() => {
        console.log('clicked');
    }, []);

    return (
        <div>
            <input value={text} onChange={e => setText(e.target.value)} />
            <button onClick={() => setCount(count + 1)}>count: {count}</button>
            {/* 当只修改 text 时，ExpensiveChild 不会重新渲染 */}
            <ExpensiveChild onClick={handleClick} data={count} />
        </div>
    );
}

import { createContext, useContext, useState } from 'react';

// 1. 创建 Context
const ThemeContext = createContext();

// 2. 在顶层组件中提供 Context
function App() {
    const [theme, setTheme] = useState('light');

    return (
        <ThemeContext.Provider value={{ theme, setTheme }}>
            <div className={`app ${theme}`}>
                <Header />
                <Main />
            </div>
        </ThemeContext.Provider>
    );
}

// 3. 在任意后代组件中使用 Context
function Header() {
    const { theme, setTheme } = useContext(ThemeContext);

    return (
        <header>
            <p>当前主题：{theme}</p>
            <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
                切换主题
            </button>
        </header>
    );
}

function Main() {
    const { theme } = useContext(ThemeContext);
    return <main>主题色：{theme}</main>;
}

import { useState, useEffect } from 'react';

// 自定义 Hook：窗口大小监听
function useWindowSize() {
    const [size, setSize] = useState({
        width: window.innerWidth,
        height: window.innerHeight,
    });

    useEffect(() => {
        const handleResize = () => {
            setSize({
                width: window.innerWidth,
                height: window.innerHeight,
            });
        };

        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []);

    return size;
}

// 自定义 Hook：本地存储
function useLocalStorage(key, initialValue) {
    const [value, setValue] = useState(() => {
        const stored = localStorage.getItem(key);
        return stored ? JSON.parse(stored) : initialValue;
    });

    useEffect(() => {
        localStorage.setItem(key, JSON.stringify(value));
    }, [key, value]);

    return [value, setValue];
}

// 自定义 Hook：数据请求
function useFetch(url) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                setLoading(true);
                const response = await fetch(url);
                const json = await response.json();
                setData(json);
            } catch (err) {
                setError(err.message);
            } finally {
                setLoading(false);
            }
        };
        fetchData();
    }, [url]);

    return { data, loading, error };
}

// 使用自定义 Hook
function App() {
    const { width, height } = useWindowSize();
    const [name, setName] = useLocalStorage('username', '');
    const { data, loading, error } = useFetch('/api/users');

    return (
        <div>
            <p>窗口尺寸：{width} x {height}</p>
            <input value={name} onChange={e => setName(e.target.value)} />
        </div>
    );
}

import { useState } from 'react';

// ❌ Props Drilling：数据需要经过中间组件层层传递
function App() {
    const [user, setUser] = useState({ name: '张三' });
    return <Layout user={user} />;        // 第1层传递
}

function Layout({ user }) {
    return <Sidebar user={user} />;       // 第2层传递（Layout 自身不需要 user）
}

function Sidebar({ user }) {
    return <UserInfo user={user} />;      // 第3层传递（Sidebar 自身也不需要 user）
}

function UserInfo({ user }) {
    return <p>{user.name}</p>;            // 最终使用者
}

import { useState } from 'react';

// 父组件
function Parent() {
    const [message, setMessage] = useState('Hello');

    return <Child msg={message} />;
}

// 子组件
function Child({ msg }) {
    return <p>{msg}</p>;
}

import { useState } from 'react';

// 父组件
function Parent() {
    const [childData, setChildData] = useState('');

    // 将回调函数传递给子组件
    const getChildData = (data) => {
        setChildData(data);
    };

    return (
        <div>
            <p>子组件传来的数据：{childData}</p>
            <Child onSend={getChildData} />
        </div>
    );
}

// 子组件
function Child({ onSend }) {
    return (
        <button onClick={() => onSend('来自子组件的数据')}>
            发送数据给父组件
        </button>
    );
}

import { useState } from 'react';

// 父组件：管理共享状态
function Parent() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <BrotherA count={count} />
            <BrotherB onAdd={() => setCount(count + 1)} />
        </div>
    );
}

// 兄弟 A：显示数据
function BrotherA({ count }) {
    return <p>计数：{count}</p>;
}

// 兄弟 B：修改数据
function BrotherB({ onAdd }) {
    return <button onClick={onAdd}>+1</button>;
}

import { BrowserRouter, Routes, Route, Link, NavLink } from 'react-router-dom';

function App() {
    return (
        <BrowserRouter>
            {/* 导航链接 */}
            <nav>
                <Link to="/">首页</Link>
                <Link to="/about">关于</Link>
                {/* NavLink 会自动添加 active 类名 */}
                <NavLink to="/contact">联系我们</NavLink>
            </nav>

            {/* NavLink 的 className 支持函数写法，根据激活状态动态设置样式 */}
            <nav>
                <NavLink
                    to="/"
                    className={({ isActive }) =>
                        isActive ? 'nav-link active' : 'nav-link'
                    }
                >
                    首页
                </NavLink>

                {/* 配合 Tailwind CSS 使用 */}
                <NavLink
                    to="/about"
                    className={({ isActive }) =>
                        `px-3 py-2 rounded ${isActive ? 'bg-blue-500 text-white' : 'text-gray-600 hover:text-gray-900'}`
                    }
                >
                    关于
                </NavLink>
            </nav>

            {/* 路由出口 */}
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
                <Route path="/contact" element={<Contact />} />
                <Route path="*" element={<NotFound />} />
            </Routes>
        </BrowserRouter>
    );
}

function Home() { return <h1>首页</h1>; }
function About() { return <h1>关于</h1>; }
function Contact() { return <h1>联系我们</h1>; }
function NotFound() { return <h1>404 - 页面不存在</h1>; }

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Layout />}>
                    {/* index 路由：默认子路由 */}
                    <Route index element={<Home />} />
                    <Route path="about" element={<About />} />
                    <Route path="dashboard" element={<Dashboard />}>
                        <Route index element={<DashboardHome />} />
                        <Route path="settings" element={<Settings />} />
                        <Route path="profile" element={<Profile />} />
                    </Route>
                </Route>
            </Routes>
        </BrowserRouter>
    );
}

// Layout 组件中使用 Outlet 渲染子路由
import { Outlet, Link } from 'react-router-dom';

function Layout() {
    return (
        <div>
            <nav>
                <Link to="/">首页</Link>
                <Link to="/about">关于</Link>
                <Link to="/dashboard">控制台</Link>
            </nav>
            <main>
                <Outlet />  {/* 子路由渲染出口 */}
            </main>
        </div>
    );
}

import { useParams, useSearchParams, useNavigate } from 'react-router-dom';

// 路由配置
<Route path="/user/:id" element={<UserDetail />} />

// 动态路由参数
function UserDetail() {
    // 获取路径参数 /user/123 → id = '123'
    const { id } = useParams();

    return <h1>用户 ID：{id}</h1>;
}

// 查询参数
function SearchPage() {
    // 获取查询参数 ?keyword=react&page=1
    const [searchParams, setSearchParams] = useSearchParams();
    const keyword = searchParams.get('keyword');
    const page = searchParams.get('page');

    return (
        <div>
            <p>搜索：{keyword}，第 {page} 页</p>
            <button onClick={() => setSearchParams({ keyword: 'vue', page: '2' })}>
                修改参数
            </button>
        </div>
    );
}

// 编程式导航
function LoginPage() {
    const navigate = useNavigate();

    const handleLogin = () => {
        // 登录成功后跳转
        navigate('/dashboard');
        // 或替换当前历史记录（用户不能点击后退回到登录页）
        navigate('/dashboard', { replace: true });
        // 后退
        navigate(-1);
    };

    return <button onClick={handleLogin}>登录</button>;
}

import { Navigate, Outlet } from 'react-router-dom';

// 路由守卫组件
function ProtectedRoute() {
    // 判断用户是否已登录（这里简化为读取 token）
    const token = localStorage.getItem('token');

    // 未登录：重定向到登录页
    if (!token) {
        return <Navigate to="/login" replace />;
    }

    // 已登录：渲染子路由
    return <Outlet />;
}

// 路由配置中使用
function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/login" element={<Login />} />

                {/* 受保护的路由：需要登录才能访问 */}
                <Route element={<ProtectedRoute />}>
                    <Route path="/dashboard" element={<Dashboard />} />
                    <Route path="/profile" element={<Profile />} />
                    <Route path="/settings" element={<Settings />} />
                </Route>

                <Route path="*" element={<NotFound />} />
            </Routes>
        </BrowserRouter>
    );
}