## 1. useState ```javascript const [count, setCount] = useState(0); // 调用 setState → 触发 re-render setCount(1); setCount(c => c + 1); // 例外：新旧值相同 → React 会跳过 re-render（Object.is 比较） setCount(0); // 当前已经是 0 → 不触发 ``` ## 2. useReducer useState 的升级版，适合状态逻辑复杂、多个子状态相互依赖的场景。 ```javascript const initialState = { todos: [], filter: 'all', loading: false }; function reducer(state, action) { switch (action.type) { case 'ADD_START': return { ...state, loading: true }; case 'ADD_SUCCESS': return { ...state, loading: false, todos: [...state.todos, { text: action.text, done: false }] }; case 'TOGGLE': return { ...state, todos: state.todos.map((todo, i) => i === action.index ? { ...todo, done: !todo.done } : todo ) }; case 'SET_FILTER': return { ...state, filter: action.filter }; default: return state; } } function TodoListWithReducer() { const [state, dispatch] = useReducer(reducer, initialState); async function handleAdd(text) { dispatch({ type: 'ADD_START' }); await saveTodo(text); dispatch({ type: 'ADD_SUCCESS', text }); // 意图清晰 } function handleToggle(index) { dispatch({ type: 'TOGGLE', index }); } } ``` 配合 immer 处理嵌套状态 ```javascript import produce from 'immer'; function reducer(state, action) { return produce(state, draft => { switch (action.type) { case 'TOGGLE': // 直接 mutate draft，immer 内部生成新对象 draft.todos[action.index].done = !draft.todos[action.index].done; break; case 'ADD': draft.todos.push({ text: action.text, done: false }); break; } }); } ``` ## 3. useContext 跨层级传递数据，避免 props 逐层透传（prop drilling）。 ```javascript // 1. 创建 Context（通常单独一个文件） const ThemeContext = createContext({ theme: 'light', setTheme: () => {}, }); // 2. 在顶层提供数据 function App() { const [theme, setTheme] = useState('light'); return ( // value 变化时，所有消费该 context 的组件 re-render {/* 中间层不需要传任何 props */} ); } // 3. 中间层完全不感知 function Layout() { return ; } function Sidebar() { return ); } ``` **useContext 的性能问题与解决方案** ```javascript // 问题：Context value 是对象时，任何字段变化都导致所有消费者 re-render const AppContext = createContext(null); function App() { const [user, setUser] = useState({ name: 'Tom' }); const [theme, setTheme] = useState('light'); return ( // user 变化 → 所有消费 AppContext 的组件 re-render // 即使有些组件只用了 theme，不关心 user ); } // 解决方案：拆分 Context，按关注点分离 const UserContext = createContext(null); const ThemeContext = createContext(null); function App() { const [user, setUser] = useState({ name: 'Tom' }); const [theme, setTheme] = useState('light'); return ( ); } // 只关心 theme 的组件不再受 user 变化影响 function Button() { const { theme } = useContext(ThemeContext); // 只订阅 ThemeContext return ; } ``` ## 4. useSyncExternalStore 订阅 React 之外的数据源（浏览器 API、第三方 store），保证并发模式下数据一致性。 ```javascript // 基本语法 const value = useSyncExternalStore( subscribe, // 订阅函数：store 变化时调用 callback getSnapshot, // 获取当前值（同步） getServerSnapshot // SSR 时用（可选） ); // 封装 window.innerWidth function useWindowWidth() { return useSyncExternalStore( // subscribe：告诉 React 怎么订阅变化 (callback) => { window.addEventListener('resize', callback); return () => window.removeEventListener('resize', callback); // 返回取消订阅 }, // getSnapshot：React 需要时调用，获取当前快照 () => window.innerWidth, // getServerSnapshot：SSR 场景 () => 1024 ); } function App() { const width = useWindowWidth(); return

窗口宽度：{width}px

; } ``` 订阅自定义 store ```javascript // 手写一个简单的外部 store function createStore(initialState) { let state = initialState; const listeners = new Set(); return { getState: () => state, setState: (newState) => { state = { ...state, ...newState }; listeners.forEach(l => l()); // 通知所有订阅者 }, subscribe: (listener) => { listeners.add(listener); return () => listeners.delete(listener); // 返回取消订阅 }, }; } const userStore = createStore({ name: 'Tom', age: 18 }); // 在组件中订阅 function UserCard() { const user = useSyncExternalStore( userStore.subscribe, userStore.getState, ); return (

{user.name}

); } ``` **实际意义** Redux、Zustand、Jotai 等状态管理库在 React 18 下都基于 useSyncExternalStore 实现，以保证并发模式下不撕裂。 --- **间接触发 re-render 的 Hook** ## 5. useTransition 主动标记某个更新为"不紧急"，让高优先级更新（用户输入）先执行，低优先级更新（耗时渲染）可以被打断。 ### 没有 useTransition 时的问题 ```javascript function SearchPage() { const [query, setQuery] = useState(''); const [results, setResults] = useState([]); function handleChange(e) { setQuery(e.target.value); setResults(heavySearch(e.target.value)); // 耗时操作，阻塞输入框响应 } return ( <> {/* heavySearch 执行期间，输入框卡顿 */} ); } ``` ### useTransition 解决方案 ```javascript function SearchPage() { const [query, setQuery] = useState(''); const [results, setResults] = useState([]); const [isPending, startTransition] = useTransition(); function handleChange(e) { // 高优先级：输入框立即响应（SyncLane） setQuery(e.target.value); // 低优先级：搜索结果可以慢慢来（TransitionLane） startTransition(() => { setResults(heavySearch(e.target.value)); }); } return ( <> {/* 搜索中显示加载态，不让用户面对空白 */} {isPending ?

搜索中...

: } ); } ``` isPending 的工作时序 ``` 用户输入 "a"： setQuery("a") → SyncLane → 立即渲染，输入框显示 "a" startTransition(...) → isPending = true → re-render，显示"搜索中..." TransitionLane 开始后台构建用户继续输入 "ab"（TransitionLane 还没完成）： setQuery("ab") → SyncLane → 打断 TransitionLane，先渲染输入框 "ab" startTransition(...) → 丢弃 "a" 的搜索，重新开始 "ab" 的搜索 "ab" 的搜索完成： isPending = false → re-render，显示 "ab" 的搜索结果 ``` 配合 Suspense 使用（更常见的模式） ```javascript function SearchPage() { const [query, setQuery] = useState(''); const [isPending, startTransition] = useTransition(); function handleChange(e) { startTransition(() => { setQuery(e.target.value); }); } return ( <> {/* isPending 时保留旧内容 + 半透明遮罩，而不是显示 Loading */}

}> {/* SearchResults 内部用 use(fetch(query)) 获取数据 */}

); } ``` ## 6. useDeferredValue 与 useTransition 目的相同，但用于无法访问 setState 的场景（比如接收父组件传来的 props）。 useTransition vs useDeferredValue ``` useTransition：你能控制 setState 的地方用它，包裹 setState 调用 useDeferredValue：你只有值，无法控制 setState（比如来自 props），用它 ``` 基本用法: ```javascript function SearchPage({ query }) { // query 来自父组件，你无法控制它的 setState // deferredQuery 是 query 的"延迟版本" // query 变化时：deferredQuery 先保持旧值（紧急渲染） // 然后在后台用新值再渲染一次（延迟渲染） const deferredQuery = useDeferredValue(query); return (

{/* 输入框直接用 query，立即响应 */}

搜索：{query}

{/* 列表用 deferredQuery，延迟更新 */}

); } ``` 触发两次渲染的机制 ```javascript 父组件传入新 query = "hello"：第一次渲染（紧急，SyncLane）： query = "hello" ← 立即更新 deferredQuery = "hell" ← 还是旧值，HeavyList 不重新渲染第二次渲染（延迟，TransitionLane）： query = "hello" deferredQuery = "hello" ← 现在才更新，HeavyList 重新渲染 ``` 配合 React.memo 才能发挥作用 ```javascript // 没有 React.memo：父组件 re-render → HeavyList 无论如何都会 re-render // deferredValue 没有意义 function HeavyList({ query }) { /* ... */ } // 有 React.memo：query prop 没变 → HeavyList 跳过 re-render // deferredValue 在第一次渲染时传旧值，HeavyList 确实不会重渲 const HeavyList = React.memo(function HeavyList({ query }) { // 只有 query 真正变化时才重新渲染 return

; }); function SearchPage({ query }) { const deferredQuery = useDeferredValue(query); const isStale = query !== deferredQuery; // 是否正在等待延迟更新 return (

{/* 半透明表示加载中 */}

); } ``` ``` const deferredQuery = useDeferredValue(query); // query 变化时： // 第一次 re-render：deferredQuery 还是旧值（紧急渲染） // 第二次 re-render：deferredQuery 更新为新值（延迟渲染） // 一次 query 变化 → 触发两次 render ``` 选用决策：状态逻辑复杂？多个子状态联动？ → useReducer 数据需要跨多层传递？ → useContext 订阅浏览器 API 或第三方 store？ → useSyncExternalStore 自己控制 setState，想降低优先级？ → useTransition 只有值（来自 props），想延迟渲染？ → useDeferredValue --- **不触发 re-render 的 Hook** ``` // useRef：修改 current 不触发 re-render const ref = useRef(0); ref.current = 100; // 静默修改，React 不知道，不触发 // useEffect / useLayoutEffect：本身不触发 // 但如果 effect 内部调用了 setState → 那是 setState 触发的，不是 effect 本身 useEffect(() => { setCount(1); // 这里是 setState 触发了 re-render，不是 useEffect }, []); // useMemo / useCallback：只是缓存值，不触发 re-render const memoVal = useMemo(() => compute(), [dep]); const memoFn = useCallback(() => {}, [dep]); // useId：生成稳定 id，不触发 const id = useId(); ``` ## 汇总对比 | Hook| 触发 re-render| 触发条件| |--------|--------|--------| | useState| ✓| 调用 setState，且新旧值不同| | useReducer | ✓| 调用 dispatch，且新旧 state 不同 | | useContext | ✓| Provider 的 value 变化| | useSyncExternalStore | ✓| 外部 store 变化| | useTransition| ✓（间接） | isPending 状态切换 | | useDeferredValue| ✓（间接）| 触发两次渲染：紧急一次 + 延迟一次| | useRef| ✗| 修改 current 不通知 React| | useEffect| ✗| 自身不触发，内部 setState 才触发| | useLayoutEffect| ✗| 同上| | useMemo| ✗| 只是缓存计算结果| | useCallback| ✗| 只是缓存函数引用| | useId| ✗| 生成稳定 id| 一个容易踩坑的场景： ```javascript function Component() { const ref = useRef(0); const [, forceUpdate] = useState(0); // 用来手动触发 re-render function handleClick() { ref.current += 1; console.log(ref.current); // 值变了 // 但页面不会更新！因为 ref 变化不触发 re-render // 必须手动触发： // forceUpdate(n => n + 1); } return

{ref.current}

; // 永远显示旧值 } ``` **核心规律：** 只有 React 感知到的状态变化才触发 re-render。useState/useReducer 的更新走 React 的调度系统，React 知道；useRef 直接修改对象属性，React 完全不知道。

React-reRender哪些Hooks会触发re-render？