zoukankan      html  css  js  c++  java
  • reactjs —— useCallback:联动

    原文:

    https://www.react.express/hooks/usecallback

    useCallback

    The useCallback hook lets us memoize functions. The return value will be the same function (comparable with ===) for the lifecycle of the component, unless the dependencies array changes. If the dependencies change, then a new function is returned.

    This can be useful for 2 reasons:

    • As a performance optimization, by preventing unnecessary re-renders when used with memo
    • Using a function as a dependency for another hook, since elements in the dependency array are compared with ===

    In this example, we count the number of times our Logger component runs. Since Logger is wrapped with memo, it'll only run when its props change. In the normalFunction case, the function changes every time we press the button. In the memoizedFunction case, we reuse the same function for 5 button presses, since our count5 variable returns the same value 5 times in a row.

    import React, { memo, useCallback, useState } from 'react'
    
    const Logger = memo((props) => {
      props.log()
      return null
    })
    
    export default function App() {
      const [count, setCount] = useState(0)
      const count5 = Math.floor(count / 5)
    
      const memoizedFunction = useCallback(() => {
        console.log('useCallback')
      }, [count5])
    
      const normalFunction = () => {
        console.log('normal')
      }
    
      return (
        <>
          <button
            onClick={() => {
              setCount(count + 1)
            }}
          >
            Increment {count}
          </button>
          <Logger log={memoizedFunction} />
          <Logger log={normalFunction} />
        </>
      )
    }
    

      

     

     

  • 相关阅读:
    今年暑假不AC
    亲和数
    改革春风吹满地
    hdu人见人爱A^B
    男人必看的10部电影
    富人和穷人之间的经典差异
    今日十句英文
    看透一个人起码要看的。
    人生经典20句
    解决ubuntu中mysql中文乱码问题
  • 原文地址:https://www.cnblogs.com/panpanwelcome/p/15267788.html
Copyright © 2011-2022 走看看