You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
当我们将 B 用 memo 包裹后,状态 a 的更新将不会导致 B 组件重新渲染。其实仅仅优化这一点还远远不够的,比如说我们子组件用到了容器组件的某个变量或者函数,那么当容器内部的 state 更新之后,这些变量和函数都会重新赋值,这样就会导致即使子组件使用了 memo 包裹也还是会重新渲染,那么这个时候我们就需要使用useMemo和useCallback了。
functionAutoFocusIpt(){constinputEl=useRef(null);constuseEffect(()=>{// `current` 指向已挂载到 DOM 上的文本输入元素inputEl.current.focus();},[]);return(<><inputref={inputEl}type="text"/></>);}
react hooks 核心 API 使用注意事项
需要考虑渲染性能,我们知道如果在不做任何处理时,我们在函数组件中使用 setState 都会导致组件内部重新渲染
场景一
当我们在容器组件手动更新了任何 state 时,容器内部的各个子组件都会重新渲染,为了避免这种情况出现,我们一般都会使用 memo 将函数组件包裹,来达到 class 组件的 pureComponent 的效果:
当我们将 B 用 memo 包裹后,状态 a 的更新将不会导致 B 组件重新渲染。其实仅仅优化这一点还远远不够的,比如说我们子组件用到了容器组件的某个变量或者函数,那么当容器内部的 state 更新之后,这些变量和函数都会重新赋值,这样就会导致即使子组件使用了 memo 包裹也还是会重新渲染,那么这个时候我们就需要使用useMemo和useCallback了。
useMemo可以帮我们将变量缓存起来,useCallback可以缓存回调函数,它们的第二个参数和 useEffect 一样,是一个依赖项数组,通过配置依赖项数组来决定是否更新。
此时 a 更新后 B 组件不会再重新渲染。以上几个优化步骤主要是用来优化组件的渲染性能,我们平时还会涉及到获取组件 dom 和使用内部闭包变量的情景,这个时候我们就可以使用useRef。
useRef返回一个可变的 ref 对象,其 .current 属性被初始化为传入的参数(initialValue)。返回的 ref 对象在组件的整个生命周期内保持不变。
实现 redux
useDebounce(防抖)
useDebounce接受三个参数,分别为回调函数,时间间隔以及依赖项数组,它暴露了 cancel API,主要是用来控制何时停止防抖函数用的。具体使用如下:
useThrottle(节流)
实现自定义 useTitle
实现自定义的 useScroll
由以上代码可知,我们在钩子函数里需要传入一个元素的引用,这个我们可以在函数组件中采用 ref 和 useRef 来获取到,钩子返回了滚动的 x,y 值,即滚动的左位移和顶部位移,具体使用如下:
useUpdate(实现组件的强制更新)
The text was updated successfully, but these errors were encountered: