React: hook(5) useCallback

最新推荐文章于 2025-08-20 11:19:25 发布

amadeus_liu2

最新推荐文章于 2025-08-20 11:19:25 发布

阅读量95

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/amadeus_liu2/article/details/126501362

React 专栏收录该内容

34 篇文章

订阅专栏

本文通过一个简单的Counter组件展示了React Hooks中的useState和useCallback用法。useState用于管理状态，而useCallback则用于优化性能，避免不必要的函数重新创建。文章详细解释了这两个Hook的工作原理，并在实际代码中演示了它们的应用。

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

import logo from './logo.svg';
import { Routes, Route, Link } from "react-router-dom";
import {react,useState,useEffect,useLayoutEffect,useContext,useReducer,useCallback} from "react"
import './App.css';
import React from "react"



function Counter() {
  const [count,setCount] = useState(0);
  const memoizedCallback = useCallback(
    () => {
      console.log("current count is :" + count);
    },[count],
  );
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(count-1)}>-</button>
      <button onClick={() => setCount(count+1)}>+</button>

      <button onClick={memoizedCallback}>test callback</button>
    </>
  );
}



export default Counter;