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} />
        </>
      )
    }
    

      

     

     

  • 相关阅读:
    蓝桥杯基础练习题4(16进制转8进制)2
    实验三
    文法
    用文法描述词法规则
    词法分析程序的功能
    个人对于编译原理的一些看法的。
    完成登录与注册
    javaScript基础
    css实例
    导航,头部,CSS基础
  • 原文地址:https://www.cnblogs.com/panpanwelcome/p/15267788.html
Copyright © 2011-2022 走看看