React核心原理

// 你写的 JSX
const element = <h1 className="title">Hello</h1>;

// 编译后的结果（React 17 之前）
const element = React.createElement('h1', { className: 'title' }, 'Hello');

// React 17+ 使用新的 JSX Transform，不再需要手动引入 React
import { jsx as _jsx } from 'react/jsx-runtime';
const element = _jsx('h1', { className: 'title', children: 'Hello' });

// createElement 的返回值结构
{
  $$typeof: Symbol(react.element),
  type: 'h1',
  key: null,
  ref: null,
  props: {
    className: 'title',
    children: 'Hello'
  }
}

{
  tag: 0,              // 组件类型标记（FunctionComponent=0, ClassComponent=1, HostComponent=5...）
  type: App,           // 组件函数/类，或 DOM 标签字符串如 'div'
  key: null,
  stateNode: null,     // 对应的真实 DOM 节点或类组件实例

  // 链表指针——构成树结构
  return: parentFiber, // 父节点
  child: firstChild,   // 第一个子节点
  sibling: nextFiber,  // 右边的兄弟节点

  // 工作单元
  pendingProps: {},    // 本次更新待处理的 props
  memoizedProps: {},   // 上次渲染使用的 props
  memoizedState: {},   // 上次渲染使用的 state（Hooks 链表也挂在这里）
  updateQueue: null,   // 更新队列

  // 副作用
  flags: 0,           // 标记该节点需要执行的操作（Placement/Update/Deletion）
  subtreeFlags: 0,    // 子树的副作用标记（React 18 优化）

  // 双缓冲
  alternate: null,    // 指向另一棵树中对应的 Fiber 节点
}

处理 Fiber A → 还有时间？→ 处理 Fiber B → 还有时间？→ 处理 Fiber C → 时间用完
  ↓
交还主线程 → 浏览器处理用户输入/绘制
  ↓
下一帧继续从 Fiber D 开始

// 差：用 index 做 key，在列表头部插入时所有项都会重新渲染
{items.map((item, index) => <Item key={index} data={item} />)}

// 好：用唯一标识做 key
{items.map(item => <Item key={item.id} data={item} />)}

// 组件代码
function Counter() {
  const [count, setCount] = useState(0);     // Hook 1
  const [name, setName] = useState('React'); // Hook 2
  useEffect(() => { /* ... */ }, [count]);   // Hook 3
  return <div>{count} - {name}</div>;
}

// Fiber.memoizedState 指向的链表结构
Hook1(useState:0) → Hook2(useState:'React') → Hook3(useEffect) → null

{
  memoizedState: any,   // 当前值（useState 存 state，useEffect 存 effect 对象，useRef 存 ref 对象）
  baseState: any,       // 基础 state（用于中断恢复）
  baseQueue: null,      // 未处理的低优先级更新
  queue: {              // 更新队列（useState 的 dispatch 产生的更新会挂到这里）
    pending: null,
    dispatch: null,
    lastRenderedReducer: null,
    lastRenderedState: null,
  },
  next: nextHook,       // 指向下一个 Hook 节点
}

// ❌ 错误：条件调用导致顺序不稳定
function Bad({ showName }) {
  const [count, setCount] = useState(0);
  if (showName) {
    const [name, setName] = useState('React'); // 条件 Hook
  }
  useEffect(() => { /* ... */ }, []);
}

// 第一次渲染 showName=true：Hook1(count) → Hook2(name) → Hook3(effect)
// 第二次渲染 showName=false：Hook1(count) → Hook2(effect) ← 错位！
// React 把 effect 的链表节点当成 useState 来处理，直接崩溃

function basicStateReducer(state, action) {
  return typeof action === 'function' ? action(state) : action;
}

function handleClick() {
  setCount(count + 1); // 此时 count 仍是旧值
  setCount(count + 1); // 还是基于同一个旧值，结果只加 1

  // 如果要基于最新值更新，使用函数式写法：
  setCount(prev => prev + 1);
  setCount(prev => prev + 1); // 基于上一次的结果，正确加 2
}

setState → Render Phase（计算新虚拟DOM）
  → Commit Phase（同步更新真实DOM）
  → 浏览器绘制（用户看到新画面）
  → useEffect 回调执行

useEffect(() => {
  const timer = setInterval(() => console.log('tick'), 1000);
  return () => clearInterval(timer); // 清除上一次的定时器
}, []);

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

  useEffect(() => {
    const timer = setInterval(() => {
      console.log(count); // 永远打印 0！因为闭包捕获的是初始渲染时的 count
      setCount(count + 1); // 永远是 0 + 1 = 1
    }, 1000);
    return () => clearInterval(timer);
  }, []); // 空依赖数组，effect 只在 mount 时执行一次

  return <div>{count}</div>;
}

// 方案一：使用函数式更新，不依赖闭包中的 count
setCount(prev => prev + 1);

// 方案二：将 count 加入依赖数组（但每次 count 变化都会重新创建定时器）
useEffect(() => {
  const timer = setInterval(() => {
    setCount(count + 1);
  }, 1000);
  return () => clearInterval(timer);
}, [count]);

// 方案三：用 useRef 保存最新值
const countRef = useRef(count);
countRef.current = count; // 每次渲染都更新 ref
useEffect(() => {
  const timer = setInterval(() => {
    setCount(countRef.current + 1); // ref.current 始终是最新值
  }, 1000);
  return () => clearInterval(timer);
}, []);

// ❌ 每次渲染都会执行 computeExpensiveValue，即使值被忽略
const [data, setData] = useState(computeExpensiveValue());

// ✅ 只在首次渲染时执行
const [data, setData] = useState(() => computeExpensiveValue());

// 用途一：引用 DOM 节点
function TextInput() {
  const inputRef = useRef(null);
  const focusInput = () => inputRef.current.focus();
  return <input ref={inputRef} />;
}

// 用途二：保存"最新值"，解决闭包陷阱
function LatestValue({ value }) {
  const latestRef = useRef(value);
  latestRef.current = value; // 每次渲染都更新，但不触发重渲染

  useEffect(() => {
    const timer = setTimeout(() => {
      console.log(latestRef.current); // 永远拿到最新的 value
    }, 3000);
    return () => clearTimeout(timer);
  }, []);
}

function ParentComponent({ items }) {
  // ✅ items 不变时，filteredList 不会重新计算
  const filteredList = useMemo(
    () => items.filter(item => item.active),
    [items]
  );

  // ✅ 引用稳定，传给子组件不会导致子组件因 props 变化而重渲染
  const handleClick = useCallback(
    (id) => { console.log('clicked', id); },
    [] // 没有外部依赖，函数引用永远不变
  );

  return <ChildList items={filteredList} onClick={handleClick} />;
}

// 配合 React.memo 才有意义——React.memo 浅比较 props，引用不变则跳过渲染
const ChildList = React.memo(({ items, onClick }) => {
  return items.map(item => <div key={item.id} onClick={() => onClick(item.id)}>{item.name}</div>);
});

const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext); // "dark"
  return <button className={theme}>Click</button>;
}

// Action
const increment = { type: 'counter/increment', payload: 1 };

// Reducer
function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case 'counter/increment':
      return { value: state.value + action.payload };
    default:
      return state;
  }
}

// Store
const store = createStore(counterReducer);
store.dispatch(increment);

import { createSlice, configureStore } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state, action) => { state.value += action.payload; },
    // RTK 内部使用 Immer，可以"直接修改" state（实际上是生成新对象）
  },
});

const store = configureStore({ reducer: { counter: counterSlice.reducer } });

import { create } from 'zustand';

const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

// 组件中使用——只订阅 count，其他字段变化不会触发重渲染
function Counter() {
  const count = useCounterStore((state) => state.count);
  const increment = useCounterStore((state) => state.increment);
  return <button onClick={increment}>{count}</button>;
}

setState
  → Render Phase（可中断，计算 Diff，打标记）
  → Commit Phase
    → Before Mutation（读 DOM 快照）
    → Mutation（操作真实 DOM，执行 useLayoutEffect 清除函数）
    → Layout（执行 useLayoutEffect 回调）
  → 浏览器绘制
  → useEffect 异步执行

// React 17
ReactDOM.render(<App />, document.getElementById('root'));

// React 18 — 启用并发特性
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

import { Suspense, lazy } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

function SearchPage() {
  const [query, setQuery] = useState('');
  const [filteredItems, setFilteredItems] = useState(allItems);
  const [isPending, startTransition] = useTransition();

  function handleChange(event) {
    const value = event.target.value;
    setQuery(value); // 高优先级：立即更新输入框

    startTransition(() => {
      // 低优先级：过滤计算可以被中断，不阻塞输入
      setFilteredItems(allItems.filter(item => item.name.includes(value)));
    });
  }

  return (
    <>
      <input value={query} onChange={handleChange} />
      {isPending && <span>Filtering...</span>}
      <ItemList items={filteredItems} />
    </>
  );
}

function SearchResults({ query }) {
  const deferredQuery = useDeferredValue(query);
  // deferredQuery 可能"滞后"于 query
  // React 先用旧的 deferredQuery 渲染，保持界面不卡顿
  // 空闲时再用新值重新渲染

  const isStale = query !== deferredQuery; // 可以据此显示加载状态

  return (
    <div style={{ opacity: isStale ? 0.7 : 1 }}>
      <ExpensiveList query={deferredQuery} />
    </div>
  );
}