React 核心原理与虚拟 DOM

// Fragment：不产生额外 DOM 节点地包裹多个子节点
function List() {
  return (
    <>
      <li>A</li>
      <li>B</li>
    </>
  );
}

// 一个 React 元素大致长这样
const element = {
  $$typeof: Symbol.for('react.element'), // 标记它是合法 React 元素，防 XSS
  type: 'div',                            // 字符串=原生标签；函数/类=组件
  key: null,                              // 列表 diff 用的身份标识
  ref: null,                              // 引用真实 DOM 或组件实例
  props: {                                // 属性与 children
    className: 'container',
    children: 'Hello, World!',
  },
};

// 1. 手写 createElement：返回描述对象
function createElement(type, props, ...children) {
  return {
    type,
    props: {
      ...props,
      children: children.map(child =>
        typeof child === 'object' ? child : createTextElement(child)
      ),
    },
  };
}

function createTextElement(text) {
  return {
    type: 'TEXT_ELEMENT',
    props: { nodeValue: text, children: [] },
  };
}

// 2. 手写 render：把虚拟 DOM 变成真实 DOM
function render(element, container) {
  const dom =
    element.type === 'TEXT_ELEMENT'
      ? document.createTextNode('')
      : document.createElement(element.type);

  // 把非 children 的 props 赋到真实 DOM 上
  Object.keys(element.props)
    .filter(key => key !== 'children')
    .forEach(name => {
      dom[name] = element.props[name];
    });

  // 递归渲染子节点
  element.props.children.forEach(child => render(child, dom));
  container.appendChild(dom);
}

// 3. 使用：与 React 心智完全一致
const vdom = createElement('div', { id: 'app' },
  createElement('h1', null, 'Hello'),
  createElement('p', null, '手写虚拟 DOM')
);
render(vdom, document.getElementById('root'));

旧树              新树
  A                 A
 / \                 \
B   C                 C
                     /
                    B
// B 从 A 的直接子节点变成了 C 的子节点（跨层移动）
// React 不会"移动 B"，而是：删除旧 B 子树 → 在 C 下新建 B

// 类型从 ArticleList 变成 Grid，React 直接卸载前者、挂载后者，不复用内部 DOM
{layout === 'list' ? <ArticleList data={data} /> : <Grid data={data} />}

// 反模式：每次 Parent 渲染，Inner 都是"新类型"，导致 Inner 状态每次被重置
function Parent() {
  function Inner() { return <input />; }  // 别这么写！
  return <Inner />;
}

// 正确：把组件定义提到外层，类型稳定
function Inner() { return <input />; }
function Parent() {
  return <Inner />;
}

// 列表从 [A, B, C, D] 变为 [D, A, B, C]（把 D 移到最前）

// 无 key（按位置比较）：
//   位置0: A→D 更新，位置1: B→A 更新，位置2: C→B 更新，位置3: D→C 更新
//   结果：4 个节点全部更新，开销大

// 有稳定 key：
//   React 识别出还是 A B C D 这四个，只是 D 移动到了最前
//   结果：一次移动操作，其余复用，开销小

// 场景：可勾选的待办列表，在头部插入一项
// 用 index 当 key —— 灾难
function BadList() {
  const [todos, setTodos] = React.useState([
    { id: 'a', text: '任务A' },
    { id: 'b', text: '任务B' },
  ]);
  const prepend = () =>
    setTodos([{ id: 'c', text: '任务C' }, ...todos]);
  return (
    <>
      <button onClick={prepend}>头部插入</button>
      {todos.map((t, index) => (
        // key=index：插入后 index=0 的位置从"任务A"变成"任务C"
        // React 认为 key=0 只是内容更新，把已勾选状态、input 焦点留在了原位置
        <label key={index}>
          <input type="checkbox" /> {t.text}
        </label>
      ))}
    </>
  );
}

// 用稳定 id 当 key —— 正确
function GoodList() {
  /* ...同上... */
  return (
    <>
      {/* ...button... */}
      {todos.map(t => (
        // key=t.id：React 知道"任务C"是新增，A/B 原样复用，勾选与焦点不错位
        <label key={t.id}>
          <input type="checkbox" /> {t.text}
        </label>
      ))}
    </>
  );
}

// 你写的是合成事件，React 内部并不会给这个 button 单独 addEventListener
function Button() {
  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    // e 是 SyntheticEvent，不是原生 MouseEvent
    console.log(e.type);            // 'click'
    console.log(e.nativeEvent);     // 需要原生事件时通过这个属性拿
    e.stopPropagation();            // 阻止的是合成事件的冒泡
    e.preventDefault();             // 阻止默认行为
  };
  return <button onClick={handleClick}>Click</button>;
}

// 坑 1：React 17+ 事件委托到根容器（而非 document），
// 若用原生 addEventListener 在 document 上 stopPropagation，
// 可能拦不到 React 的合成事件，反之亦然——混用原生与合成事件要小心。

// 坑 2：想在原生事件里阻止 React 合成事件，用 e.stopImmediatePropagation()
useEffect(() => {
  const handler = (e: Event) => {
    e.stopImmediatePropagation();
  };
  document.addEventListener('click', handler);
  return () => document.removeEventListener('click', handler);
}, []);

function Parent() {
  return <Child title="标题" count={3} />;
}
function Child({ title, count }: { title: string; count: number }) {
  return <h2>{title} - {count}</h2>;
}

function Parent() {
  const [msg, setMsg] = React.useState('');
  return <Child onSend={setMsg} />;  // 把"改状态的能力"以回调下发
}
function Child({ onSend }: { onSend: (v: string) => void }) {
  return <button onClick={() => onSend('来自子组件')}>发送</button>;
}

const UserContext = React.createContext<User | null>(null);

function App() {
  const [user] = React.useState<User>({ id: 1, name: 'Alice' });
  return (
    <UserContext.Provider value={user}>
      <DeepChild />
    </UserContext.Provider>
  );
}
function DeepChild() {
  const user = React.useContext(UserContext); // 跨任意层级直接读
  return <span>{user?.name}</span>;
}

type InputHandle = { focus: () => void };

const FancyInput = React.forwardRef<InputHandle, {}>(function FancyInput(_, ref) {
  const inputRef = React.useRef<HTMLInputElement>(null);
  React.useImperativeHandle(ref, () => ({
    focus: () => inputRef.current?.focus(),
  }), []);
  return <input ref={inputRef} />;
});

function Form() {
  const ref = React.useRef<InputHandle>(null);
  return (
    <div>
      <FancyInput ref={ref} />
      <button onClick={() => ref.current?.focus()}>聚焦输入框</button>
    </div>
  );
}

// 受控组件：value + onChange，state 是唯一数据源
function ControlledInput() {
  const [value, setValue] = React.useState('');
  return (
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

// 非受控组件：defaultValue + ref，提交时才读值
function UncontrolledInput() {
  const inputRef = React.useRef<HTMLInputElement>(null);
  const handleSubmit = () => {
    console.log(inputRef.current?.value); // 需要时才读
  };
  return (
    <>
      <input defaultValue="初始值" ref={inputRef} />
      <button onClick={handleSubmit}>提交</button>
    </>
  );
}

// 错误：原地修改，引用没变，React 认为没更新，界面不刷新
const [list, setList] = React.useState<number[]>([1, 2, 3]);
list.push(4);          // 突变！引用未变
setList(list);         // 不触发重渲染

// 正确：产生新数组
setList(prev => [...prev, 4]);              // 追加
setList(prev => prev.filter(x => x !== 2)); // 删除
setList(prev => prev.map(x => x === 2 ? 20 : x)); // 修改

// 嵌套对象的不可变更新：逐层展开
const [user, setUser] = React.useState({
  name: 'Alice',
  address: { city: '北京', zip: '100000' },
});

// 只改 city，其余保持
setUser(prev => ({
  ...prev,
  address: { ...prev.address, city: '上海' },
}));

import { produce } from 'immer';
setUser(produce(draft => {
  draft.address.city = '上海'; // 写起来像可变，Immer 底层产出新引用
}));

function Demo() {
  const [count, setCount] = React.useState(0);
  const handleClick = () => {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
    // count 此时仍是本次渲染的快照值 0，三次都基于 0 → 最终只 +1，结果是 1
  };
  return <button onClick={handleClick}>{count}</button>;
}

// 用函数式更新拿到"最新排队后的值"，三次各自 +1，结果是 3
const handleClick = () => {
  setCount(prev => prev + 1);
  setCount(prev => prev + 1);
  setCount(prev => prev + 1);
};

// React 18：以下两次 setState 会被自动合并为一次渲染
function handleAsync() {
  fetch('/api').then(() => {
    setCount(c => c + 1);
    setFlag(f => !f);
    // React 17：渲染两次；React 18：只渲染一次
  });
}

// 需要退出批处理、强制立即同步渲染（罕见），可用 flushSync
import { flushSync } from 'react-dom';
flushSync(() => setCount(c => c + 1)); // 这一句立刻渲染并提交

// useLayoutEffect vs useEffect 的时机差异
function Tooltip() {
  const ref = React.useRef<HTMLDivElement>(null);
  // useLayoutEffect：DOM 变更后、浏览器绘制前同步执行 —— 适合读取布局、避免闪烁
  React.useLayoutEffect(() => {
    const rect = ref.current!.getBoundingClientRect();
    // 在绘制前调整位置，用户看不到中间态
  });
  // useEffect：绘制后异步执行 —— 适合发请求、订阅等不阻塞绘制的副作用
  React.useEffect(() => {
    const id = setInterval(() => {}, 1000);
    return () => clearInterval(id);
  }, []);
  return <div ref={ref} />;
}

// 竞态问题：快速切换 id 时，慢请求可能后到，覆盖新请求结果
function Profile({ id }: { id: number }) {
  const [data, setData] = React.useState<User | null>(null);
  React.useEffect(() => {
    let ignore = false; // 标志位守卫
    fetchUser(id).then(res => {
      if (!ignore) setData(res); // 已被清理则丢弃结果
    });
    return () => { ignore = true; }; // id 变化或卸载时，让旧请求结果作废
  }, [id]);
  return <div>{data?.name}</div>;
}

// 并发特性示例：把耗时的列表过滤标记为"过渡"，保持输入框流畅
function SearchableList({ all }: { all: string[] }) {
  const [text, setText] = React.useState('');
  const [isPending, startTransition] = React.useTransition();
  const [query, setQuery] = React.useState('');

  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setText(e.target.value);          // 高优先级：输入框立即响应
    startTransition(() => {
      setQuery(e.target.value);       // 低优先级：过滤可被打断
    });
  };

  const filtered = all.filter(x => x.includes(query));
  return (
    <>
      <input value={text} onChange={onChange} />
      {isPending && <span>更新中…</span>}
      <ul>{filtered.map(x => <li key={x}>{x}</li>)}</ul>
    </>
  );
}

// 问题演示：memo 失效
const Child = React.memo(function Child({ onClick }: { onClick: () => void }) {
  console.log('Child render');
  return <button onClick={onClick}>click</button>;
});

function Parent() {
  const [count, setCount] = React.useState(0);
  // 每次 Parent 渲染，handleClick 都是新函数引用
  const handleClick = () => console.log('clicked');
  return (
    <div>
      <span>{count}</span>
      <button onClick={() => setCount(c => c + 1)}>+1</button>
      {/* 尽管用了 memo，Child 每次仍重渲染，因为 onClick 引用每次都变 */}
      <Child onClick={handleClick} />
    </div>
  );
}

// 修复：useCallback 稳定函数引用，memo 才真正生效
function Parent() {
  const [count, setCount] = React.useState(0);
  // 空依赖：handleClick 引用在组件整个生命周期内保持不变
  const handleClick = React.useCallback(() => {
    console.log('clicked');
  }, []);
  return (
    <div>
      <span>{count}</span>
      <button onClick={() => setCount(c => c + 1)}>+1</button>
      <Child onClick={handleClick} /> {/* 现在 count 变化不再触发 Child 重渲染 */}
    </div>
  );
}

function ProductList({ products, keyword }: { products: Product[]; keyword: string }) {
  // 假设过滤 + 排序对 1 万条数据要 30~50ms
  const visible = React.useMemo(() => {
    console.log('recompute filter');
    return products
      .filter(p => p.name.includes(keyword))
      .sort((a, b) => a.price - b.price);
  }, [products, keyword]); // 只有 products 或 keyword 变化才重算

  return (
    <ul>
      {visible.map(p => <li key={p.id}>{p.name} - ${p.price}</li>)}
    </ul>
  );
}

// 用 Profiler API 在代码里测量渲染耗时
import { Profiler } from 'react';

function onRender(id: string, phase: 'mount' | 'update', actualDuration: number) {
  console.log(`[${id}] ${phase} 耗时 ${actualDuration.toFixed(2)}ms`);
}

<Profiler id="ProductList" onRender={onRender}>
  <ProductList products={products} keyword={keyword} />
</Profiler>;

// 反模式：用 index 当 key
function TodoListBad({ todos }: { todos: Todo[] }) {
  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>
          <input defaultValue={todo.text} />
        </li>
      ))}
    </ul>
  );
}
// 在头部插入一项后：原来 index=0 的项现在是 index=1...
// React 认为 key=0 的位置"内容变了"，把新项的内容更新到了旧 DOM 上，
// 而 input 是非受控的，其内部 DOM 状态（用户已输入的文字）会错位到别的行。

// 正确：用数据自身稳定唯一 id 当 key
function TodoListGood({ todos }: { todos: Todo[] }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          <input defaultValue={todo.text} />
        </li>
      ))}
    </ul>
  );
}

// 1. 三元表达式：二选一
{isLogin ? <Dashboard /> : <LoginForm />}

// 2. && 短路：满足条件才渲染
{hasError && <ErrorBanner />}

// 3. 提前 return：整个组件的分支
function Page({ loading, error, data }: PageProps) {
  if (loading) return <Spinner />;
  if (error) return <ErrorView error={error} />;
  return <Content data={data} />;
}

// 4. 映射表：多分支替代 if-else 链
const statusView = {
  idle: <Idle />,
  loading: <Spinner />,
  success: <Result />,
  error: <ErrorView />,
};
return statusView[status];

// 坑：当 count 为 0 时，0 && (...) 返回 0，React 会把数字 0 渲染到页面上！
{count && <Badge count={count} />}   // 页面上出现一个孤零零的 "0"

// 正确写法：显式转布尔，或用三元
{count > 0 && <Badge count={count} />}
{count ? <Badge count={count} /> : null}

// HOC：给任意组件注入 loading 逻辑
function withLoading<P extends object>(Component: React.ComponentType<P>) {
  return function WithLoading(props: P & { loading: boolean }) {
    const { loading, ...rest } = props;
    if (loading) return <Spinner />;
    return <Component {...(rest as P)} />;
  };
}

const UserListWithLoading = withLoading(UserList);

// render props：MouseTracker 只负责追踪坐标，渲染交给使用方
function MouseTracker({ render }: { render: (pos: { x: number; y: number }) => React.ReactNode }) {
  const [pos, setPos] = React.useState({ x: 0, y: 0 });
  return (
    <div onMouseMove={(e) => setPos({ x: e.clientX, y: e.clientY })}>
      {render(pos)}
    </div>
  );
}

<MouseTracker render={({ x, y }) => <p>坐标：{x}, {y}</p>} />;

// 自定义 Hook：把鼠标追踪逻辑抽出来，任何组件都能用
function useMousePosition() {
  const [pos, setPos] = React.useState({ x: 0, y: 0 });
  React.useEffect(() => {
    const handler = (e: MouseEvent) => setPos({ x: e.clientX, y: e.clientY });
    window.addEventListener('mousemove', handler);
    return () => window.removeEventListener('mousemove', handler);
  }, []);
  return pos;
}

// 使用：一行搞定，无嵌套、无额外组件层
function Demo() {
  const { x, y } = useMousePosition();
  return <p>坐标：{x}, {y}</p>;
}

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>
);

// StrictMode 双调用会暴露的 bug：effect 没清理导致订阅重复
useEffect(() => {
  const conn = createConnection(); // 若不清理，双调用后会有两个连接
  conn.connect();
  return () => conn.disconnect(); // 正确清理，双调用也安全
}, []);

// 快照陷阱：点击后 3 秒弹出的是"点击那一刻"的 count，而非最新值
function Counter() {
  const [count, setCount] = React.useState(0);
  function handleClick() {
    setCount(count + 1);
    setTimeout(() => {
      alert(count); // 弹出的是本次渲染快照里的 count，不是 +1 后的值
    }, 3000);
  }
  return <button onClick={handleClick}>{count}</button>;
}

// Context 优化：value 用 useMemo，避免每次 Provider 渲染都让所有消费者更新
function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = React.useState<'light' | 'dark'>('light');
  const value = React.useMemo(() => ({ theme, setTheme }), [theme]);
  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
}

// 虚拟列表思路：只渲染可视区域内的行，1 万条数据也只渲染 ~20 个 DOM 节点
import { FixedSizeList } from 'react-window';

function BigList({ items }: { items: string[] }) {
  return (
    <FixedSizeList height={400} itemCount={items.length} itemSize={40} width={300}>
      {({ index, style }) => <div style={style}>{items[index]}</div>}
    </FixedSizeList>
  );
}

// 同一功能两种写法对照
// 类组件
class ClassCounter extends React.Component<{}, { count: number }> {
  state = { count: 0 };
  increment = () => this.setState(s => ({ count: s.count + 1 }));
  render() {
    return <button onClick={this.increment}>{this.state.count}</button>;
  }
}

// 函数组件
function HookCounter() {
  const [count, setCount] = React.useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}