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

作用:缓存计算的结果

相关推荐
NoneCoder1 小时前
CSS 架构与命名规范
前端·css
牧杉-惊蛰6 小时前
Vue3中到达可视区域后执行
前端·javascript·vue.js
GISer_Jing7 小时前
ByteMD详解
前端·javascript
小杨升级打怪中7 小时前
前端面经-VUE3篇(二)--vue3基础知识(二)计算属性(computed)、监听属性(Watch)
前端
IoOozZzzz7 小时前
ES6异步编程中Promise与Proxy对象
前端·javascript·es6
hunandede8 小时前
av_dict_get,av_dict_set,av_dict_set_int
java·前端·javascript
linkingvision8 小时前
Chrome 136 H265 WebRTC 支持 正式版本已包含
前端·chrome·webrtc
光影少年9 小时前
新手学编程前端好还是后端
前端·后端
Deepsleep.9 小时前
CSS Transition入门指南
前端·css
牧杉-惊蛰10 小时前
修改输入框选择框颜色
前端·html