当前位置：首页 > news >正文

React Hooks 核心原理与开发技巧

news 2025/10/16 11:01:20

React Hooks 核心原理与开发技巧

🎯 Hooks 核心规则

1. 调用顺序必须稳定

原因：React 使用单向链表存储 Hooks，依赖调用顺序来正确关联状态

// Hooks 链表结构
const hook: Hook = {memoizedState: null,  // 存储状态值next: null,           // 指向下一个 Hook
};// mount 阶段 - 创建链表
function mountWorkInProgressHook() {const hook = { memoizedState: null, next: null };if (workInProgressHook === null) {// 第一个 HookcurrentlyRenderingFiber.memoizedState = workInProgressHook = hook;} else {// 添加到链表末尾workInProgressHook = workInProgressHook.next = hook;}return workInProgressHook;
}

关键点：

Mount 阶段创建 Hook 链表
Update 阶段按顺序读取 Hook 链表
顺序变化会导致状态错乱

2. 列表渲染必须使用稳定 key

正确做法：

{items.map(item => (<ListItem key={item.id} item={item} />  // ✅ 唯一 ID
))}

避免做法：

{items.map((item, index) => (<ListItem key={index} item={item} />    // ❌ 索引会导致问题
))}

原理：

Key 帮助 React 识别元素，决定复用或重新创建
索引作为 Key 在数组变化时会导致无效渲染和状态错乱

⚡ 性能优化技巧

1. memo + useMemo + useCallback 组合

// 子组件
const ExpensiveComponent = memo(({ data, onAction }) => {return <div onClick={onAction}>{data}</div>;
});// 父组件
function Parent() {const [state, setState] = useState();// ✅ 缓存回调const handleAction = useCallback(() => {// 处理逻辑}, [deps]);// ✅ 缓存计算结果const processedData = useMemo(() => {return heavyCalculation(state);}, [state]);return <ExpensiveComponent data={processedData} onAction={handleAction} />;
}

useMemo 源码核心：

function updateMemo(nextCreate, deps) {const hook = updateWorkInProgressHook();const prevState = hook.memoizedState;if (prevState !== null && deps !== null) {const prevDeps = prevState[1];if (areHookInputsEqual(deps, prevDeps)) {return prevState[0]; // 返回缓存值}}const nextValue = nextCreate();hook.memoizedState = [nextValue, deps];return nextValue;
}

使用时机：

组件确实存在性能问题
渲染代价 > 对比代价
避免过度优化

🔧 高级模式

1. useImperativeHandle - 组件 API 设计

const Form = forwardRef((props, ref) => {const [values, setValues] = useState({});useImperativeHandle(ref, () => ({// 暴露受控接口getValues: () => values,setValue: (name, value) => setValues(prev => ({ ...prev, [name]: value })),validate: () => validate(values),reset: () => setValues({})}), [values]);return <form>{/* ... */}</form>;
});// 使用
function App() {const formRef = useRef();const submit = () => {if (formRef.current.validate()) {const data = formRef.current.getValues();}};return <Form ref={formRef} />;
}

🔍 状态更新与闭包问题

1. setState 异步更新机制

function dispatchSetState(fiber, queue, action) {const update = {lane: requestUpdateLane(fiber),action,next: null};// 调度更新（微任务）scheduleUpdateOnFiber(root, fiber, lane, eventTime);
}// 调度使用微任务
const scheduleMicrotask = typeof queueMicrotask === 'function' ? queueMicrotask :typeof Promise !== 'undefined' ? callback => Promise.resolve().then(callback) :setTimeout;

2. 闭包问题解决方案

问题代码：

function Counter() {const [count, setCount] = useState(0);useEffect(() => {setTimeout(() => {console.log(count); // ❌ 总是输出初始值}, 1000);}, []);
}

解决方案：

function Counter() {const [count, setCount] = useState(0);const countRef = useRef(count);// 同步最新值到 refuseEffect(() => {countRef.current = count;});useEffect(() => {setTimeout(() => {console.log(countRef.current); // ✅ 获取最新值}, 1000);}, []);
}

3. useRef 原理

function mountRef(initialValue) {const hook = mountWorkInProgressHook();const ref = { current: initialValue };hook.memoizedState = ref;  // 存储 ref 对象return ref;
}function updateRef() {const hook = updateWorkInProgressHook();return hook.memoizedState; // 返回同一个 ref 对象
}