// 点击按钮后数字 +1
$('#btn').on('click', () => {
    const newCount = parseInt($('#count').text()) + 1;
    $('#count').text(newCount);                    // 手动改 DOM
    if (newCount >= 10) $('#count').addClass('big'); // 手动改样式
});

function Counter() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <p className={count >= 10 ? 'big' : ''}>{count}</p>
            <button onClick={() => setCount(count + 1)}>+1</button>
        </div>
    );
}

const [count, setCount] = useState(0);       // count 是 state
const [name, setName] = useState('');        // name 是 state
const [user, setUser] = useState(null);      // user 是 state
const [todos, setTodos] = useState([]);      // todos 是 state

const [user, setUser] = useState({ name: 'Coya' });
 
user.name = 'Bob';      // ❌ 直接改，React 不知道
setUser(user);          // ❌ 传同一个引用，React 跳过更新
 
setUser({ ...user, name: 'Bob' });  // ✅ 新对象，React 知道变了

function App() {
    const [count, setCount] = useState(0);
 
    return (
        <div>
            <p>{count}</p>
            <button onClick={() => setCount(count + 1)}>+1</button>
        </div>
    );
}

// 父
function Parent() {
    const [user, setUser] = useState({ name: 'Coya' });
    return <Child user={user} />;          // 把 user 通过 props 传
}
 
// 子
function Child({ user }) {                  // 接收 props
    return <p>Hello, {user.name}!</p>;
}

// 父
function Parent() {
    const [name, setName] = useState('');
    return (
        <div>
            <p>当前：{name || '(空)'}</p>
            <Child onChange={setName} />    {/* 把 setName 作为回调传下去 */}
        </div>
    );
}
 
// 子
function Child({ onChange }) {
    return (
        <input onChange={e => onChange(e.target.value)} />  // 触发时调用
    );
}

// A 和 B 是兄弟，想共享 count
function Parent() {
    const [count, setCount] = useState(0);
    return (
        <>
            <A count={count} />
            <B count={count} onIncrement={setCount} />
        </>
    );
}

import { createContext, useContext, useState } from 'react';
 
// 1. 创建 Context
const UserContext = createContext(null);
 
// 2. 在顶层提供
function App() {
    const [user, setUser] = useState({ name: 'Coya' });
    return (
        <UserContext.Provider value={{ user, setUser }}>
            <Grandparent />
        </UserContext.Provider>
    );
}
 
// 3. 任何子组件直接用
function GrandChild() {
    const { user } = useContext(UserContext);    // 直接拿到，不用 props 传
    return <p>{user.name}</p>;
}

<UserContext.Provider value={{ user, setUser }}>   // ⚠️ 每次都是新对象

const value = useMemo(() => ({ user, setUser }), [user]);
<UserContext.Provider value={value}>

import { useState } from 'react';
 
// 顶层组件（应用根）
function TodoApp() {
    // 1. 所有 todos 数据放这里
    const [todos, setTodos] = useState([
        { id: 1, text: '学 React', done: false },
        { id: 2, text: '写项目', done: false },
    ]);
    const [input, setInput] = useState('');
 
    // 2. 业务逻辑（纯函数，不碰 UI）
    const addTodo = (text) => {
        setTodos([...todos, { id: Date.now(), text, done: false }]);
    };
    const toggleTodo = (id) => {
        setTodos(todos.map(t => t.id === id ? { ...t, done: !t.done } : t));
    };
    const deleteTodo = (id) => {
        setTodos(todos.filter(t => t.id !== id));
    };
 
    // 3. 渲染：纯函数（数据 → UI）
    return (
        <div>
            <h1>Todo List</h1>
            <input
                value={input}
                onChange={e => setInput(e.target.value)}
                placeholder="要做啥？"
            />
            <button onClick={() => { addTodo(input); setInput(''); }}>添加</button>
 
            <ul>
                {todos.map(todo => (
                    <li key={todo.id}>
                        <input
                            type="checkbox"
                            checked={todo.done}
                            onChange={() => toggleTodo(todo.id)}
                        />
                        <span style={{ textDecoration: todo.done ? 'line-through' : '' }}>
                            {todo.text}
                        </span>
                        <button onClick={() => deleteTodo(todo.id)}>删</button>
                    </li>
                ))}
            </ul>
 
            <p>共 {todos.length} 项，已完成 {todos.filter(t => t.done).length}</p>
        </div>
    );
}