常用 Hooks
-
useState
:声明状态变量。typescript 复制代码 const [count, setCount] = useState<number>(0);
-
useEffect
:副作用处理。typescript复制代码useEffect(() => { // 执行副作用 return () => { // 清理副作用 }; }, [dependency]);
-
useContext
:使用上下文。typescript 复制代码 const value = useContext<MyContextType>(MyContext);
-
useReducer
:复杂状态逻辑管理。typescript 复制代码 const [state, dispatch] = useReducer(reducer, initialState);
-
useMemo
:性能优化,记住计算结果。typescript 复制代码 const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
-
useCallback
:性能优化,记住函数定义。typescript复制代码const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]);
Hooks 使用的易错点
-
useState
和useEffect
依赖-
易错点 :在
useEffect
中忘记依赖数组,导致无限循环。 -
解决方案 :确保在
useEffect
中添加依赖数组。
typescript复制代码useEffect(() => { // 依赖a和b }, [a, b]);
-
-
useEffect
清理函数-
易错点 :在
useEffect
中没有正确地清理副作用,导致内存泄漏。 -
解决方案 :确保在
useEffect
中返回一个清理函数。
typescript复制代码useEffect(() => { const subscription = subscribeToSomething(); return () => { subscription.unsubscribe(); }; }, []);
-
-
useMemo
和useCallback
依赖-
易错点 :在
useMemo
和useCallback
中忘记依赖数组,导致没有性能优化效果。 -
解决方案 :确保在
useMemo
和useCallback
中添加依赖数组。
typescript复制代码const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]);
-
-
useReducer
初始状态-
易错点 :在
useReducer
中直接修改状态对象。 -
解决方案 :确保在
reducer
函数中返回新的状态对象。
typescript复制代码const reducer = (state: StateType, action: ActionType): StateType => { switch (action.type) { case 'UPDATE': return { ...state, value: action.payload }; default: return state; } };
-