React进阶用法和hooks的个人使用见解(Typescript版本) - 3.useCallback+useMemo+memo性能优化

最新推荐文章于 2025-06-17 11:07:09 发布

置顶

Mack Liu

最新推荐文章于 2025-06-17 11:07:09 发布

阅读量6.7k

点赞数 11

CC 4.0 BY-SA版权

分类专栏： react TypeScript 文章标签： memo useCallback useMemo Hooks

本文链接：https://blog.youkuaiyun.com/weixin_43902189/article/details/99689963

本文探讨React进阶用法，重点聚焦在useCallback、useMemo和memo的性能优化场景。通过创建test.tsx文件，展示如何使用memo优化React组件性能。进一步讲解了在何时与如何使用useCallback和useMemo，特别是在处理对象属性时的优化策略，并预告了useReducer、useContext和createContext的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

3.useCallback+useMemo+memo性能优化场景使用

`注意:hooks只能在函数(无状态组件)中使用`

`当父组件引入子组件的情况下，往往会造成组件之间的一些不必要的浪费，下面我们通过例子来了解一下场景`

3.1创建一个test.tsx文件，我们拷贝上篇博客的useState的案例

import React, {
   
    useState } from 'react';
function Test() {
   
   
    const [count, setCount] = useState<number>(100);
    return (
        <>
            <h2>{
   
   count}</h2>
            <button onClick={
   
   () => setCount(count + 1)}>++</button>
            {
   
   /* 引入子组件 */}
            <TestChild/>
        </>
    )
}
export default Test;
//创建一个子组件
function TestChild(): JSX.Element {
   
   
    console.log('TestChild运行了?');
    return(
        <h3>我是子组件</h3>
    );
}

`这时我们开启服务运行一下这个小案例,会发现，我们的子组件并没有对应的需要更新的操作但是还是触发了，这时候我们需要使用React的memo来优化一下代码`

我们会发现

3.2使用memo优化react性能

import React, {
   
    useState,memo } from 'react';
//在TestChild子组件使用之前，使用memo包裹一下
const MemoTestChild = memo(TestChild);//对子组件进行处理
function Test() {
   
   
    const [count, setCount] = useState<number>(100);
    return (
        <>
            <h2>{
   
   count}</h2>
            <button onClick={
   
   () => setCount(count + 1)}>++</button>
            {
   
   /* 引入子组件 */}
            {
   
   /* <TestChild/> */}
            <MemoTestChild/>
        </>
    )
}
export default Test;
//创建一个子组件
function TestChild(): JSX.Element {
   
   
    console.log('TestChild运行了?');
    return(
        <h3>我是子组件</h3>
    );
}