react中关于useCallback的用法
react useCallback的用法
useCallback是react中比较重要的一个hook
useCallback 用来返回一个函数，在父子组件传参或者通用函数封装中,起到举足轻重的作用。
基础用法
useCallback的用法与useState的用法基本一致，但最后会返回一个函数，用一个变量保存起来。
返回的函数a会根据b的变化而变化，如果b始终未发生变化，a也不会重新生成，避免函数在不必要的情况下更新。
记得子组件导出时使用memo包裹一下，其作用是对组件前后两次进行浅对比，阻止不必要的更新
const a = useCallback(() => {
return function() {
console.log(b)
}
},[b])
console.log(a)
console.log(a())第一种用法，父子组件函数式传参
既然使用useCallback减少了函数式参数不必要的更新，子组件收到的参数不变，自然也不会更新，从而减少了组件间不必要的更新。
父组件
import React, { useState, useEffect, useCallback, useRef } from 'react';
import CC from './cc';
const Props: React.FC = () => {
const [loading, setLoading] = useState(true);
const [p, setP] = useState('1');
const [ccVisible, setCCVisible] = useState(false);
console.log('-- Props --');
const onClick = useCallback(() => {
console.log('onClick');
setCCVisible(true);
}, []);
const onClose = useCallback(() => {
console.log('onClose');
setCCVisible(false);
}, []);
useEffect(() => {
setTimeout(() => {
setP('2');
setLoading(false);
}, 1000);
}, []);
if (loading) {
return <div>loading</div>;
}
return (
<div>
<p>
<span onClick={onClick2}>ddd</span>
</p>
<CC visible={ccVisible} onClick={onClick} onClose={onClose} text={p} />
</div>
);
};
export default Props;子组件
import React, { useState, useEffect, memo } from 'react';
import { Modal } from 'antd';
interface CCProps {
visible: boolean;
text: string;
onClick: () => void;
onClose: () => void;
}
const CC: React.FC<CCProps> = ({ visible, onClick, onClose, text }) => {
console.log('-- CC --');
const [ccc, setCCC] = useState('00000');
const onClickC = () => {
console.log('onClickC');
};
useEffect(() => {
setTimeout(() => {
console.log('-- effect setCCC --');
setCCC('3333');
}, 2000);
return () => {
console.log('-- delete CC --');
};
}, []);
return (
<div>
{visible ? 'show' : null}
<p onClick={onClick}>323 - {ccc}</p>
<p>
<span onClick={onClickC}>ccc -- ddddddd</span>
</p>
<Modal visible={visible} onCancel={onClose} footer={null}>
Modal
</Modal>
</div>
);
};
export default memo(CC);react useCallback函数使用说明
React 中useCallback的作用：函数相等性检查。
useCallback的函数原型
useCallback(callbackFun, deps)
如果deps给出的依赖值不变 ，则useCallback在两次渲染阶段之间返回相同的函数实例。
考察如下代码：
function func_factory() {
return (a, b) => a + b;
}
const sum1 = func_factory();
const sum2 = func_factory();
sum1(1, 2); // => 3
sum2(1, 2); // => 3
sum1 === sum2; // => false
sum1 === sum1; // => truesum1 和 sum2 是将两个数字相加的函数，它们是由 func_factory() 函数创建的。
函数 sum1 和 sum2 共享相同的代码源，但是它们是不同的对象，比较它们 sum1 === sum2 结果为 false。这就是JavaScript的工作方式，对象（包括函数对象）仅等于其自身。
在React中， 共享相同代码的不同函数实例往往在React组件内部创建。
当 React 组件主体创建一个函数（例如回调或事件处理程序）时，这个函数会在每次渲染时重新创建。
例如如下代码：
handleClick 在 MyComponent 的每次渲染中都是一个不同的函数对象。
import React from 'react';
function MyComponent() {
// handleClick在每次渲染时重新创建
const handleClick = () => {
console.log('Clicked!');
};
// ...
}因为内联函数很“便宜”，所以React在每次渲染时重新创建函数不是问题，React的每个组件有几个内联函数是可以接受的。
然而，在某些情况下，你需要保留一个函数的一个实例，在React中以下情况需要保持内联函数的的变量值不变：
1）包装在 React.memo()（或 shouldComponentUpdate ）中的组件接受回调prop。
2）当函数用作其他hooks的依赖项时 useEffect(...，[callback])
useCallback 函数可以保证在deps不变的情况下，相同的代码片段返回同一个函数对象。
例如如下代码：
import React, { useCallback } from 'react';
function MyComponent() {
// handleClick是同一个函数对象
const handleClick = useCallback(() => {
console.log('Clicked!');
}, []);
// ...
}handleClick 变量将在 MyComponent 不同的渲染周期之间始终保持返回相同的回调函数对象实例。
一个用于理解useCallback的示例
如下代码，需要渲染一个大的列表，
import React from 'react';
function MyBigList({ items, handleClick }) {
const map = (item, index) => (
<div onClick={() => handleClick(index)}>{item}</div>;
);
return <div>{items.map(map)}</div>;
}
export const MyBigList = React.memo(MyBigList);MyBigList 渲染了一个项目列表，这个列表可能很大，可能有几百个元素。要保留重新渲染的列表，可以将其封装到 React.memo 中。
MyBigList 的父组件需要提供元素列表和点击事件处理回调函数。
调用MyBigList的父组件及其示例代码如下：
import React from 'react';
import useSearch from './fetch-items';
function MyParent({ term }) {
const handleClick = useCallback((item) => {
console.log('You clicked ', item);
}, [term]);
const items = useSearch(term);
return (
<MyBigList
items={items}
handleClick={handleClick}
/>
);
}handleClick 回调函数由 useCallback() 记忆。只要 term 变量保持不变，useCallback() 就会返回相同的函数对象实例。
现在由于某些原因重新启用了 MyParent 组件，handleClick 仍保持不变，并且不会破坏 MyBigList的记忆，列表将避免重新渲染，提高性能。
一个错误使用useCallback的示例
import React, { useCallback } from 'react';
function MyComponent() {
const handleClick = useCallback(() => {
// handle the click event
}, []);
return <MyChild onClick={handleClick} />;
}
function MyChild ({ onClick }) {
return <button onClick={onClick}>I am a child</button>;
}以上示例代码用useCallback记住 handleClick 是否有意义？
答案时：没有意义，因为调用 useCallback() 其实需要很多工作，每次渲染 MyComponent 时，都会调用 useCallback() Hook。
从内部来讲，React确保返回相同的对象函数实例。即便如此，内联函数仍然在每次渲染时重新创建，useCallback 只是跳过了它，返回内部记录的原始实例而已。
即使用 useCallback() 返回相同的函数实例，也不会带来任何好处，因为优化要比没有优化花费更多。
不要忘记增加的代码复杂性，你必须确保 useCallback() 的 deps 与您在 memoized 回调中使用的 deps 保持同步。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
react-redux是redux官方react绑定库，能够使react组件从redux store中读取数据，并且向store分发actions以此来更新数据，这篇文章主要介绍了react-redux的设置,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了关于hooks中useEffect()的使用总结,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要介绍了react如何实现表格多条件搜索问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
小编需要封装一个通过Popover弹出框里可以自定义渲染内容的组件，渲染内容暂时有: 单选框, 复选框，接下来通过本文给大家分享React封装CustomSelect组件思路,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了详解React 服务端渲染方案完美的解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要给大家介绍了关于React中this丢失的四种解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者使用React具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
详解React中的useMemo和useCallback的区别
React中的useMemo和useCallback是两个重要的Hooks。常常被用于优化组件的性能。虽然这两个Hooks看起来很相似，但它们彼此之间还是有很大的区别的，随着小编一起来学习吧2023-04-04
这篇文章主要为大家详细介绍了如何利用React+hook+antd实现联动模糊搜索功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-02-02
这篇文章主要介绍了React 如何向url中添加参数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了React利用路由实现登录界面的跳转，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
最新评论