React useMemo函数

第一个参数是回调函数,返回计算的结果,第二个参数是依赖项,该函数只监听count1变量的变化

cpp 复制代码
import { useReducer, useState } from 'react';
import './App.css';

// 定义一个Reducer函数 根据不同的action进行不同的状态修改 

function reducer(state,action){
  switch(action.type){
    case `INC`:
      return state+1
    case `DEC`:
      return state-1 
    case `SET`:
      return action.payload
    default:
      return state


  }
}

// 调用useReducer函数将reducer函数作为参数并设定初始状态



// 斐波那契数列
function fiber(n){
  console.log(`正在进行斐波那契计算`)
  if(n < 3){
    return 1
  }
  else return fiber(n-1)+fiber(n-2)
}
function App() {
  const [state,dispatch] = useReducer(reducer,0)
  const [count1,setCount1] = useState(0)
  const [count2,setCount2] = useState(0)

  const result = fiber(count1)


  return (
    <div className="App">
     
     {result}
    <button onClick={()=>{dispatch({type:`INC`})}}>+</button>
    <button onClick={()=>{dispatch({type:`DEC`})}}>-</button>
    <button onClick={()=>{dispatch({type:`SET`,payload:9527})}}>更新</button>
    
    <button onClick={()=>{setCount1(count1+1)}}>更新count1</button>
    <button onClick={()=>{setCount2(count2+1)}}>更新count2</button>



    
    </div>
  );
}

export default App;

不使用useMemo函数时,在其他State发生变化时UI也会被重新渲染

作用:缓存计算的结果

相关推荐
袁煦丞14 分钟前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆15 分钟前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记25 分钟前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆25 分钟前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户214118326360226 分钟前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端
程序员海军27 分钟前
AI领域又新增协议: AG-UI
前端·openai·agent
我想说一句29 分钟前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
真夜29 分钟前
CommonJS与ESM
前端·javascript
LaoZhangAI30 分钟前
GPT-image-1 API如何传多图:开发者完全指南
前端·后端
G等你下课31 分钟前
从点击到执行:如何优雅地控制高频事件触发频率
前端·javascript·面试