上文 对比之前的组件优化说明React.memo的作用我们说了 React.memo的妙用 但是 它却并非万能
我们来看这个情况
我们子组件代码编写如下
import React from "react";
const ChildComponent = ({ dom1funt }) => {
console.log("ChildComponent 被重新渲染");
return (
<div>
<button onClick={dom1funt}>dom1funt</button>
</div>
);
};
export default React.memo(ChildComponent)
这里 我们接收了父组件 props中的一个 dom1funt 函数
然后点击dom1funt按钮 触发这个dom1funt
然后 父组件代码编写如下
import React, { useState } from 'react';
import Dom1 from './components/dom1';
function ParentComponent() {
const [count, setCount] = useState(0);
const memoizedHandleClick = () => {
console.log('按钮被点击了');
setCount(count + 1);
};
const dom1funt = () => {
console.log('子组件函数');
}
return (
<div>
<button onClick={memoizedHandleClick}>{ count }</button>
<Dom1 dom1funt={dom1funt} />
</div>
);
}
export default ParentComponent;
父组件 我们定义了这个传给子组件的 dom1funt
但是它不是主角 我们点击count所在的按钮触发的 memoizedHandleClick才是
我们运行项目
然后 我们疯狂点击这个 按钮
我们可以看到 memoizedHandleClick 触发了 但是 从输出 ChildComponent 被重新渲染我 我们就可以看出 这个子组件 一直再被重新渲染 命名套了React.memo
React.memo只是能让你在没用父组件东西时不参与重新渲染 但是我们用了父组件的 dom1funt
但是还是问题啊 我们又不用memoizedHandleClick
也不需要setCount和count 那子组件凭什么参与这种渲染
那么 我们可以这样写 将父组件代码修改如下文章来源:https://www.toymoban.com/news/detail-502326.html
import React, { useState, useCallback } from 'react';
import Dom1 from './components/dom1';
function ParentComponent() {
const [count, setCount] = useState(0);
const memoizedHandleClick = () => {
console.log('按钮被点击了');
setCount(count + 1);
};
const dom1funt = useCallback(() => {
console.log('子组件函数');
}, []);
return (
<div>
<button onClick={memoizedHandleClick}>{ count }</button>
<Dom1 dom1funt={dom1funt} />
</div>
);
}
export default ParentComponent;
我们给父组件套上了 useCallback
再次 疯狂点击 count 对应的按钮
这次 我们的子组件就不会一直重新渲染了
这就是useCallback作用中的性能优化文章来源地址https://www.toymoban.com/news/detail-502326.html
到了这里,关于React Hook之useCallback 性能优化的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!