1
// 声明式
2
function Counter({ initialCount }) {
3
  const [count, setCount] = useState(initialCount);
4

5
  return (
6
    <button onClick={() => setCount(count + 1)}>
7
      Count: {count}
8
    </button>
9
  );
10
}
11

12
// 命令式（jQuery 风格）
13
$('#btn').click(function() {
14
  count++;
15
  $('#count').text('Count: ' + count);
16
});

1
// JSX
2
const element = <h1 className="title">Hello, World!</h1>;
3

4
// 编译后
5
const element = React.createElement(
6
  'h1',
7
  { className: 'title' },
8
  'Hello, World!'
9
);
10

11
// 最终生成虚拟 DOM 对象
12
{
13
  type: 'h1',
14
  props: {
15
    className: 'title',
16
    children: 'Hello, World!'
17
  }
18
}

1
React 15 (Stack Reconciler)     React 16+ (Fiber)
2
┌─────────────────────┐        ┌─────────────────────┐
3
│    同步递归更新      │        │   可中断的异步更新   │
4
│    (不可中断)       │        │   (时间切片)        │
5
│                     │        │                     │
6
│   ██████████████    │        │   ███ ███ ███ ███   │
7
│   (长时间阻塞)      │        │   (分片执行)        │
8
└─────────────────────┘        └─────────────────────┘

1
const fiber = {
2
  // 节点类型
3
  type: 'div',
4
  key: null,
5

6
  // 链表结构
7
  return: parentFiber,    // 父节点
8
  child: firstChildFiber, // 第一个子节点
9
  sibling: nextFiber,     // 下一个兄弟节点
10

11
  // 状态
12
  pendingProps: {},       // 新 props
13
  memoizedProps: {},      // 上次 props
14
  memoizedState: {},      // 上次 state
15

16
  // 副作用
17
  flags: 0,               // 副作用标记（增删改）
18
  subtreeFlags: 0,        // 子树的副作用
19

20
  // 优先级
21
  lane: 0,                // 更新优先级
22
};

1
// 简化实现
2
function workLoop(deadline) {
3
  let shouldYield = false;
4

5
  while (nextUnitOfWork && !shouldYield) {
6
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
7
    shouldYield = deadline.timeRemaining() < 1; // 剩余时间不足 1ms
8
  }
9

10
  if (!nextUnitOfWork && workInProgressRoot) {
11
    commitRoot(); // 提交阶段
12
  }
13

14
  requestIdleCallback(workLoop); // 继续调度
15
}
16

17
requestIdleCallback(workLoop);

1
import {
2
  useState,      // 状态管理
3
  useEffect,     // 副作用
4
  useContext,    // 上下文
5
  useRef,        // DOM/变量引用
6
  useCallback,   // 函数缓存
7
  useMemo,       // 计算缓存
8
  useReducer,    // 复杂状态
9
  useLayoutEffect, // 同步副作用
10
  useImperativeHandle, // 暴露方法
11
} from 'react';
12

13
// 1. useState
14
const [count, setCount] = useState(0);
15
const [user, setUser] = useState({ name: '', age: 0 });
16

17
// 2. useEffect
18
useEffect(() => {
19
  // 副作用逻辑
20
  const timer = setInterval(() => {}, 1000);
21

22
  return () => {
23
    // 清理函数
24
    clearInterval(timer);
25
  };
26
}, [dependency]); // 依赖数组
27

28
// 3. useContext
29
const theme = useContext(ThemeContext);
30

31
// 4. useRef
32
const inputRef = useRef(null);
33
<input ref={inputRef} />;
34
inputRef.current.focus();
35

36
// 5. useCallback
37
const memoizedCallback = useCallback(() => {
38
  doSomething(a, b);
39
}, [a, b]);
40

41
// 6. useMemo
42
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
43

44
// 7. useReducer
45
const [state, dispatch] = useReducer(reducer, initialState);
46
dispatch({ type: 'increment' });

1
// useEffect：不阻塞渲染
2
useEffect(() => {
3
  console.log('useEffect'); // 绘制后执行
4
}, []);
5

6
// useLayoutEffect：阻塞渲染
7
useLayoutEffect(() => {
8
  console.log('useLayoutEffect'); // 绘制前执行
9
  // 适合需要同步测量的场景
10
  const rect = divRef.current.getBoundingClientRect();
11
}, []);
12

13
// 执行顺序
14
// render -> useLayoutEffect -> 浏览器绘制 -> useEffect

1
// useLayoutEffect：避免闪烁
2
function Tooltip({ target }) {
3
  const [position, setPosition] = useState({ top: 0, left: 0 });
4
  const tooltipRef = useRef(null);
5

6
  useLayoutEffect(() => {
7
    // 在绘制前计算位置，避免闪烁
8
    const rect = target.getBoundingClientRect();
9
    setPosition({
10
      top: rect.bottom + 8,
11
      left: rect.left
12
    });
13
  }, [target]);
14

15
  return <div ref={tooltipRef} style={position}>...</div>;
16
}

1
// useCallback：缓存函数
2
const memoizedFn = useCallback(() => {
3
  doSomething(a, b);
4
}, [a, b]);
5

6
// useMemo：缓存计算结果
7
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
8

9
// 等价关系
10
useCallback(fn, deps) === useMemo(() => fn, deps)

1
// useCallback：避免子组件不必要的重渲染
2
const Parent = () => {
3
  const [count, setCount] = useState(0);
4

5
  // ❌ 每次渲染都创建新函数，子组件会重渲染
6
  const handleClick = () => console.log('clicked');
7

8
  // ✅ 缓存函数引用
9
  const handleClickMemo = useCallback(() => {
10
    console.log('clicked');
11
  }, []);
12

13
  return <Child onClick={handleClickMemo} />;
14
};
15

16
const Child = React.memo(({ onClick }) => {
17
  console.log('Child rendered');
18
  return <button onClick={onClick}>Click</button>;
19
});
20

21
// useMemo：缓存昂贵计算
22
const ExpensiveComponent = ({ items }) => {
23
  // ❌ 每次渲染都重新计算
24
  const sorted = items.sort((a, b) => a.price - b.price);
25

26
  // ✅ 只在 items 变化时计算
27
  const sortedMemo = useMemo(() => {
28
    return [...items].sort((a, b) => a.price - b.price);
29
  }, [items]);
30

31
  return <List items={sortedMemo} />;
32
};

1
// 1. 获取 DOM 元素
2
function InputFocus() {
3
  const inputRef = useRef(null);
4

5
  const focusInput = () => {
6
    inputRef.current.focus();
7
  };
8

9
  return (
10
    <>
11
      <input ref={inputRef} />
12
      <button onClick={focusInput}>Focus</button>
13
    </>
14
  );
15
}
16

17
// 2. 保存可变值（不触发重渲染）
18
function Timer() {
19
  const [count, setCount] = useState(0);
20
  const intervalRef = useRef(null);
21

22
  useEffect(() => {
23
    intervalRef.current = setInterval(() => {
24
      setCount(c => c + 1);
25
    }, 1000);
26

27
    return () => clearInterval(intervalRef.current);
28
  }, []);
29

30
  const stop = () => clearInterval(intervalRef.current);
31

32
  return <div>{count}</div>;
33
}
34

35
// 3. 保存上一次的值
36
function usePrevious(value) {
37
  const ref = useRef();
38

39
  useEffect(() => {
40
    ref.current = value;
41
  }, [value]);
42

43
  return ref.current;
44
}
45

46
// 使用
47
const prevCount = usePrevious(count);

1
// 受控组件（推荐）
2
function ControlledForm() {
3
  const [value, setValue] = useState('');
4

5
  const handleChange = (e) => {
6
    setValue(e.target.value);
7
  };
8

9
  return (
10
    <input
11
      value={value}
12
      onChange={handleChange}
13
    />
14
  );
15
}
16

17
// 非受控组件
18
function UncontrolledForm() {
19
  const inputRef = useRef(null);
20

21
  const handleSubmit = () => {
22
    console.log(inputRef.current.value);
23
  };
24

25
  return (
26
    <>
27
      <input ref={inputRef} defaultValue="" />
28
      <button onClick={handleSubmit}>Submit</button>
29
    </>
30
  );
31
}

1
// 1. props（父 -> 子）
2
<Child name="Tom" age={18} />
3

4
// 2. 回调函数（子 -> 父）
5
// 父组件
6
<Child onUpdate={(data) => setParentData(data)} />
7
// 子组件
8
props.onUpdate(newData);
9

10
// 3. Context（跨层级）
11
const ThemeContext = createContext('light');
12

13
function App() {
14
  return (
15
    <ThemeContext.Provider value="dark">
16
      <DeepChild />
17
    </ThemeContext.Provider>
18
  );
19
}
20

21
function DeepChild() {
22
  const theme = useContext(ThemeContext);
23
  return <div>{theme}</div>;
24
}
25

26
// 4. ref（父调子方法）
27
const childRef = useRef();
28
<Child ref={childRef} />
29
childRef.current.someMethod();
30

31
// 5. 状态管理库（Redux/Zustand/Jotai）
32
// 全局状态共享

1
// React.memo：函数组件的浅比较优化
2
const MemoizedComponent = React.memo(function MyComponent(props) {
3
  console.log('rendered');
4
  return <div>{props.name}</div>;
5
});
6

7
// 自定义比较函数
8
const MemoizedWithCompare = React.memo(
9
  MyComponent,
10
  (prevProps, nextProps) => {
11
    return prevProps.id === nextProps.id; // true 不重渲染
12
  }
13
);
14

15
// PureComponent：类组件的浅比较优化
16
class MyComponent extends React.PureComponent {
17
  render() {
18
    return <div>{this.props.name}</div>;
19
  }
20
}
21

22
// 区别
23
// React.memo -> 函数组件
24
// PureComponent -> 类组件
25
// 都是浅比较 props（和 state）

1
// Redux 三大原则
2
// 1. 单一数据源（Store）
3
// 2. State 只读（通过 Action 修改）
4
// 3. 纯函数修改（Reducer）
5

6
// 数据流
7
// View -> Action -> Reducer -> Store -> View
8

9
// Action
10
const increment = () => ({ type: 'INCREMENT' });
11

12
// Reducer
13
function counterReducer(state = { count: 0 }, action) {
14
  switch (action.type) {
15
    case 'INCREMENT':
16
      return { count: state.count + 1 };
17
    default:
18
      return state;
19
  }
20
}
21

22
// Store
23
const store = createStore(counterReducer);
24

25
// 使用
26
store.dispatch(increment());
27
store.subscribe(() => {
28
  console.log(store.getState());
29
});

1
// Zustand 示例（简洁）
2
import { create } from 'zustand';
3

4
const useCounterStore = create((set) => ({
5
  count: 0,
6
  increment: () => set((state) => ({ count: state.count + 1 })),
7
  reset: () => set({ count: 0 }),
8
}));
9

10
// 使用
11
function Counter() {
12
  const { count, increment } = useCounterStore();
13
  return <button onClick={increment}>{count}</button>;
14
}

1
// 1. React.memo 避免不必要渲染
2
const Child = React.memo(({ data }) => {
3
  console.log('Child rendered');
4
  return <div>{data}</div>;
5
});
6

7
// 2. useCallback 缓存函数
8
const Parent = () => {
9
  const [count, setCount] = useState(0);
10

11
  const handleClick = useCallback(() => {
12
    console.log('clicked');
13
  }, []);
14

15
  return <Child onClick={handleClick} />;
16
};
17

18
// 3. useMemo 缓存计算
19
const ExpensiveList = ({ items }) => {
20
  const sortedItems = useMemo(() => {
21
    return [...items].sort((a, b) => a.value - b.value);
22
  }, [items]);
23

24
  return <List items={sortedItems} />;
25
};
26

27
// 4. 列表使用 key
28
{items.map(item => (
29
  <Item key={item.id} data={item} />
30
))}
31

32
// 5. 懒加载组件
33
const LazyComponent = React.lazy(() => import('./HeavyComponent'));
34

35
<Suspense fallback={<Loading />}>
36
  <LazyComponent />
37
</Suspense>
38

39
// 6. 虚拟列表（长列表）
40
import { FixedSizeList } from 'react-window';
41

42
<FixedSizeList
43
  height={400}
44
  itemCount={10000}
45
  itemSize={35}
46
>
47
  {({ index, style }) => (
48
    <div style={style}>Row {index}</div>
49
  )}
50
</FixedSizeList>
51

52
// 7. 避免内联对象/函数
53
// ❌ 每次渲染创建新对象
54
<Child style={{ color: 'red' }} onClick={() => {}} />
55

56
// ✅ 提取到外部或 useMemo
57
const style = useMemo(() => ({ color: 'red' }), []);
58
<Child style={style} />
59

60
// 8. 状态提升 vs 下沉
61
// 只在需要的组件维护状态，避免不必要的重渲染