React 常用 Hooks 和使用的易错点

常用 Hooks

1. useState：声明状态变量。

   typescript
   复制代码
   const [count, setCount] = useState<number>(0);

2. useEffect：副作用处理。

   typescript复制代码useEffect(() => {
       // 执行副作用
       return () => {
           // 清理副作用
       };
   }, [dependency]);

3. useContext：使用上下文。

   typescript
   复制代码
   const value = useContext<MyContextType>(MyContext);

4. useReducer：复杂状态逻辑管理。

   typescript
   复制代码
   const [state, dispatch] = useReducer(reducer, initialState);

5. useMemo：性能优化，记住计算结果。

   typescript
   复制代码
   const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

6. useCallback：性能优化，记住函数定义。

   typescript复制代码const memoizedCallback = useCallback(() => {
       doSomething(a, b);
   }, [a, b]);

Hooks 使用的易错点

1. useState 和 useEffect 依赖

   • 易错点：在useEffect中忘记依赖数组，导致无限循环。

   • 解决方案：确保在useEffect中添加依赖数组。

   typescript复制代码useEffect(() => {
       // 依赖a和b
   }, [a, b]);

2. useEffect 清理函数

   • 易错点：在useEffect中没有正确地清理副作用，导致内存泄漏。

   • 解决方案：确保在useEffect中返回一个清理函数。

   typescript复制代码useEffect(() => {
       const subscription = subscribeToSomething();
   ​
       return () => {
           subscription.unsubscribe();
       };
   }, []);

3. useMemo 和 useCallback 依赖

   • 易错点：在useMemo和useCallback中忘记依赖数组，导致没有性能优化效果。

   • 解决方案：确保在useMemo和useCallback中添加依赖数组。

   typescript复制代码const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
   const memoizedCallback = useCallback(() => {
       doSomething(a, b);
   }, [a, b]);

4. useReducer 初始状态

   • 易错点：在useReducer中直接修改状态对象。

   • 解决方案：确保在reducer函数中返回新的状态对象。

   typescript复制代码const reducer = (state: StateType, action: ActionType): StateType => {
       switch (action.type) {
           case 'UPDATE':
               return { ...state, value: action.payload };
           default:
               return state;
       }
   };