标签:function count const memo reactjs useCallback 联动 return
原文:
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} /> </> ) }
标签:function,count,const,memo,reactjs,useCallback,联动,return 来源: https://www.cnblogs.com/panpanwelcome/p/15267788.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。