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也会被重新渲染

作用:缓存计算的结果

相关推荐
陈振wx:zchen20082 分钟前
前端-ES6-11
前端·es6
菜鸟una44 分钟前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
专注前端30年1 小时前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试
文火冰糖的硅基工坊2 小时前
[嵌入式系统-146]:五次工业革命对应的机器人形态的演进、主要功能的演进以及操作系统的演进
前端·网络·人工智能·嵌入式硬件·机器人
2401_837088502 小时前
ResponseEntity - Spring框架的“标准回复模板“
java·前端·spring
yaoganjili2 小时前
用 Tinymce 打造智能写作
前端
angelQ2 小时前
Vue 3 中 ref 获取 scrollHeight 属性为 undefined 问题定位
前端·javascript
Dontla2 小时前
(临时解决)Chrome调试避免跳入第三方源码(设置Blackbox Scripts、将目录添加到忽略列表、向忽略列表添加脚本)
前端·chrome
我的div丢了肿么办2 小时前
js函数声明和函数表达式的理解
前端·javascript·vue.js
云中雾丽2 小时前
React.forwardRef 实战代码示例
前端