react useCallback的常规使用方式?
<h1 id="怎么使用好usecallback来达到减少render次数的效果">怎么使用好useCallback，来达到减少render次数的效果</h1><h2 id="react优化方式">react优化方式</h2>
<ol>
<li>减少render次数</li>
<li>减少计算量</li>
</ol>
<ul>
<li>下面的代码，当handleClick1时间触发时，PageB组件也会重新渲染</li>
</ul>
<pre><code>import React, { memo, useCallback, useState } from 'react'
function PageA (props) {
const { onClick, children } = props
console.log(111, props)
return <div onClick={onClick}>{children}</div>
}
function PageB ({ onClick, name }) {
console.log(222)
return <div onClick={onClick}>{name}</div>
}
function UseCallback() {
const = useState(0)
const = useState(0)
const handleClick1 = () => {
setA(a + 1)
}
const handleClick2 =() => {
setB(b + 1)
}
return (
<>
<PageA onClick={handleClick1}>{a}</PageA>
<PageB onClick={handleClick2} name={b} />
</>
)
}
export default UseCallback
</code></pre>
<ul>
<li>使用useCallback进行处理</li>
</ul>
<ol>
<li>点击事件handleClick1触发时，PageB组件也会重新渲染，当PageB组件比较耗时时，就会造成新能问题</li>
<li>PageB组件重新渲染的原因在于每次重新渲染，onClick都会重新定义，即上次的与这次的不一致</li>
<li>思路：通过useCallback包裹onClick来达到缓存的效果，即useCallback的依赖项不变时不重新生成</li>
<li>用过memo方法包裹PageB组件，并且通过useCallback包裹PageB组件的onClick方法，memo与PureComponent比较类似，前者是对Function Component的优化，后者是对Class Component的优化，都会对传入组件的数据进行浅比较，useCallback则会保证handleClick2不会发生变化</li>
</ol>
<pre><code>import React, { memo, useCallback, useState } from 'react'
function PageA (props) {
const { onClick, children } = props
console.log(111, props)
return <div onClick={onClick}>{children}</div>
}
function PageB ({ onClick, name }) {
console.log(222)
return <div onClick={onClick}>{name}</div>
}
const PageC = memo(PageB)
function UseCallback() {
const = useState(0)
const = useState(0)
const handleClick1 = () => {
setA(a + 1)
}
const handleClick2 = useCallback(() => {
setB(b + 1)
}, )
return (
<>
<PageA onClick={handleClick1}>{a}</PageA>
<PageC onClick={handleClick2} name={b} />
</>
)
}
export default UseCallback
</code></pre><br><br>
来源：https://www.cnblogs.com/sk-3/p/13808854.html
頁:
[1]