![](https://img-blog.csdnimg.cn/2019092715111047.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
React Hooks
文章平均质量分 83
记录 开发中 常用的hooks
起风的秋天@
一名努力成长的大学生
展开
-
React Hooks小记(十)_useCallback
之前我们所学的 useMemo能够达到缓存某个的效果,而当前要学习的 useCallback用来对组件内的函数进行缓存,它返回的是。会返回一个 memorized回调函数供组件使用,从而防止组件每次 rerender 时反复创建相同的函数,能够节省内存开销,提高性能。其中:1. cb 是一个函数,用于处理业务逻辑,这个 cb 就是2. array 是,当 array 中的变化时才会重新执行 useCallback。a. 如果省略 array,则每次更新都会重新计算。原创 2024-06-28 07:00:00 · 926 阅读 · 0 评论 -
React Hooks小记(八)_useContext
count值是:{count}重置原创 2024-06-27 07:00:00 · 1571 阅读 · 0 评论 -
React Hooks 小记(七)_useReducer
<button>修改 name 的值</button><Son1 /><Son2 /></div>原创 2024-06-26 18:20:49 · 899 阅读 · 0 评论 -
React Hooks小记(九)_useMemo 和 memo 函数
当父组件被重新渲染的时候,也会触发子组件的重新渲染,这样就多出了。如果子组件的状态没有发生变化,则子组件是必须要被重新渲染的。在 React 中,我们可以使用 React.memo()函数来解决上述的问题,从而达到的目的。的例如,在下面的代码中,父组件声明了 count 和 flag 两个状态,子组件依赖于父组件通过 props 传递的 num。起来,只有props发生变化的时候,才会触发子组件的重新渲染。原创 2024-06-27 07:15:00 · 307 阅读 · 0 评论 -
React Hooks小记(六)_useLayoutEffect
useLayoutEffect 和 useEffect 的使用方式很相似:2. 只有在数组中的发生改变时才会再次执行副作用函数3. useLayoutEffect 也可以返回一个。原创 2024-06-18 07:00:00 · 416 阅读 · 0 评论 -
React Hooks小记(五)_useEffect
/ 记录鼠标的位置// 副作用函数// 1. 要绑定或解绑的 mousemove 事件处理函数// 2. 组件首次渲染完毕后,为 window 对象绑定 mousemove 事件// 3. 返回一个清理的函数,在每次组件卸载时,为 window 对象解绑 mousemove 事件}, [])在MouseInfo// 调用自定义的 hook,获取鼠标的位置信息return (<>-- 输出鼠标的位置信息 -->原创 2024-06-17 08:00:00 · 997 阅读 · 0 评论 -
React Hooks小记(四)_useImperativeHandle
暴露给外部组件哪些功能函数或属性。原创 2024-06-17 07:00:00 · 629 阅读 · 0 评论 -
React Hooks小记(三)_forwardRef
1、原创 2024-06-16 07:30:00 · 217 阅读 · 0 评论 -
React Hooks小记(二)_useRef
函数返回一个可变的ref对象,该对象只有一个 current属性。可以在调用 useRef 函数时为其指定初始值。并且这个返回的 ref 对象在组件的整个生命周期内保持不变。useRef 函数用来解决以下两个问题:1. 获取或的实例对象;2. 存储渲染周期之间;原创 2024-06-16 07:00:00 · 780 阅读 · 0 评论 -
React Hooks小记(一)_useState
useState,能让函数组件拥有自己的状态原创 2024-06-15 09:00:00 · 808 阅读 · 1 评论