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. useStateuseEffect 依赖

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

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

    复制代码
    typescript复制代码useEffect(() => {
        // 依赖a和b
    }, [a, b]);
  2. useEffect 清理函数

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

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

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

    • 易错点 :在useMemouseCallback中忘记依赖数组,导致没有性能优化效果。

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

    复制代码
    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;
        }
    };
相关推荐
木觞清1 分钟前
喜马拉雅音频链接逆向实战
开发语言·前端·javascript
一枚前端小能手5 分钟前
「周更第6期」实用JS库推荐:InversifyJS
前端·javascript
Hilaku6 分钟前
"事件委托"这个老古董,在现代React/Vue里还有用武之地吗?
前端·javascript·vue.js
前端缘梦11 分钟前
Webpack 5 核心升级指南:从配置优化到性能提升的完整实践
前端·面试·webpack
汤姆Tom18 分钟前
现代 CSS 架构与组件化:构建可扩展的样式系统
前端·css
偷光18 分钟前
浏览器中的隐藏IDE: Console (控制台) 面板
开发语言·前端·ide·php
时间的情敌25 分钟前
对Webpack的深度解析
前端·webpack·node.js
拜无忧33 分钟前
【案例】可视化模板,驾驶舱模板,3x3,兼容移动
前端·echarts·数据可视化
向葭奔赴♡39 分钟前
前端框架学习指南:提升开发效率
前端·javascript·vue.js
小高00744 分钟前
🔥🔥🔥Vue 3.5 核弹级小补丁:useTemplateRef 让 ref 一夜失业?
前端·javascript·vue.js