使用useMemo和Callback Hooks（没掌握）

最新推荐文章于 2025-04-20 18:39:06 发布

qq_21696621

最新推荐文章于 2025-04-20 18:39:06 发布

阅读量141

点赞数

分类专栏： React Hook 文章标签： react react-hook

React Hook 专栏收录该内容

5 篇文章

订阅专栏

本文通过具体示例对比了在React中使用与不使用memo高阶组件的情况，以及useMemo Hook的效果。展示了如何减少不必要的组件渲染，提高应用性能。

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

参考：https://blog.youkuaiyun.com/wu_xianqiang/article/details/103981087

没使用memo例子

每次点击button，Counter组件都会被渲染两次；

import React,{Component,useState,useMemo,memo} from 'react';


const Counter = ({value, children}) => {
  console.log('Render: ', children)

  return (
      <div>
          {children}: {value}
      </div>
  )
}


export default function App(){
  const [count1, setCount1] = React.useState(0)
  const [count2, setCount2] = React.useState(0)

  const increaseCounter1 = () => {
      setCount1(count1 => count1 + 1)
  }

  return (
      <>
          <button onClick={increaseCounter1}>Increase counter 1</button>
          <Counter value={count1}>Counter 1</Counter>
          <Counter value={count2}>Coutner 2</Counter>
      </>
  )
}

使用memo例子

每次点击button，只会渲染count变化的那个Counter组件

import React,{Component,useState,useMemo,memo} from 'react';


const Counter = memo(({value, children}) => {
  console.log('Render: ', children)

  return (
      <div>
          {children}: {value}
      </div>
  )
});


export default function App(){
  const [count1, setCount1] = React.useState(0)
  const [count2, setCount2] = React.useState(0)

  const increaseCounter1 = () => {
      setCount1(count1 => count1 + 1)
  }

  return (
      <>
          <button onClick={increaseCounter1}>Increase counter 1</button>
          <Counter value={count1}>Counter 1</Counter>
          <Counter value={count2}>Coutner 2</Counter>
      </>
  )
}

useMemo例子

import React,{Component,useState,useMemo} from 'react';

function Counter(props){
  return (
    <h1>{props.count}</h1>
  );
}

export default function App() {
  const [count,setCount] = useState(0);
  const double =  useMemo(()=>{
    return count *2;
  },[count===3]);
  return (
    <div>
      <button
        type="button"
        onClick={()=>{setCount(count+1)}}
      >
        Click({count}),double:({double})
      </button>
      <Counter count={count}/>
    </div>
  );
}