useCallback()和useMemo()

2022-02-16 23:00:22 阅读：168 来源： 互联网

标签：count const useMemo value useCallback useState take

useMemo()和useCallback()都能够起到缓存的作用，只不过useMemo()针对于数据，useCallback()针对于函数

useMemo()

不使用useMemo()

当点击按钮时会改变value的值，同时也会一直执行console.log(1)，即take函数一直在被调用

import React, { useState, useMemo } from 'react'

export default function UseMemo() {
  const [value, setvalue] = useState(0)
  const [count, setcount] = useState(1)
  const take = (count) => {
    console.log(1)
    return count * 3
  }
  const price = take(count)

  return (
    <div>
      <p>value:{value}   count:{price}</p>
      <button onClick={() => setvalue(value + 1)}>value+1</button>
    </div>
  )
}

使用useMemo

使用useMemo()包裹后，点击按钮不会引起take函数的执行，price的值始终都是从缓存里面拿到的，只有在后面的依赖里面添加了依赖，且依赖的值改变了，才会执行被包裹的代码，对性能有一定的提升

import React, { useState, useMemo } from 'react'

export default function UseMemo() {
  const [value, setvalue] = useState(0)
  const [count, setcount] = useState(1)
  const take = (count) => {
    console.log(1)
    return count * 3
  }
  const price = useMemo(() => {
    return take(count)
  }, [])
  return (
    <div>
      <p>value:{value}   count:{price}</p>
      <button onClick={() => setvalue(value + 1)}>value+1</button>
    </div>
  )
}

useCallback()

还没搞清楚，明天再继续

标签：count,const,useMemo,value,useCallback,useState,take
来源： https://www.cnblogs.com/oumannrinn/p/15902717.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

useCallback()和useMemo()