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

作用:缓存计算的结果

相关推荐
AI视觉网奇5 小时前
rknn yolo11 推理
前端·人工智能·python
gplitems1235 小时前
Gunslinger – Gun Store & Hunting WordPress Theme: A Responsible
开发语言·前端·javascript
Winson℡8 小时前
React Native 中的 useCallback
javascript·react native·react.js
wyzqhhhh8 小时前
less和sass
前端·less·sass
Nan_Shu_6149 小时前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
excel10 小时前
Vue3 中的双向链表依赖管理详解与示例
前端
前端小白从0开始11 小时前
Chrome DevTools高级用法:性能面板内存泄漏排查
前端·chrome·chrome devtools
EveryPossible11 小时前
带有渐变光晕
前端·javascript·css
jojo是只猫11 小时前
Vue 3 开发的 HLS 视频流播放组件+异常处理
前端·javascript·vue.js
卓码软件测评11 小时前
第三方软件登记测试机构:【软件登记测试机构HTML5测试技术】
前端·功能测试·测试工具·html·测试用例·html5