关于react.js:React-Hook-常用的钩子

4次阅读

共计 1258 个字符,预计需要花费 4 分钟才能阅读完成。

前言

偶然看见一篇 React hook 的罕用钩子,看见了几篇文,大略晓得了如何用,和其中的含意,然而还未实际,将尽可能使用到下一个需要,在来欠缺实现逻辑局部,先记录一下含意,以便查找。

哈哈哈哈哈,未完待续。

罕用的钩子

useState

useState 和 class 中的 state 一样,存入变量扭转,界面从新渲染的值。
注:

  • 在查看谋篇 typescript 代码标准时,有多少 state 值时,应用多个 useState,尽量将多个变量,应用对象的模式,合并成一个。
  • 如果须要应用 state 简单的场景时,尽量应用 useReducer 来代替 useState。

useReducer

当 state 简单时,有多个不同状态时,将会应用 useReducer,和 react 中的 redux 相似。

useEffect

useEffect 将能够模仿 react 中的 componentDidMount,componentDidUpdate,componentWillUnmount。

useEffect(()=>{// 这个相当于 componentDidMount},[])

ueEffect(()=>{// 这个相当于 componentWillUnmount},[])

ueEffect(()=>{
    // 这个相当于 componentDidUpdate
    // 当 changeValue 扭转时触发
},[changeValue])

useCallback

这个能够缓存函数,应用 React Hook 有时候会反复定义函数,当应用 useCallback 包裹次函数,会产生缓存,因而不会反复定义。 如果在父组件定义的函数,将函数传入子组件。那么次函数必须要被 useCallBack 包裹。否则父组件每次渲染会使子组件渲染,因为子组件认为这个函数扭转了

useRef

能够获取 Dom,并且操作 Dom。

  • 能够应用 useref 拜访 dom
  • 能够和 React.forwardRef 一起应用获取自定义组件的 Dom,自定义组件须要被 React.forwardRef 包裹。

useMemo

包裹在组件里面,通过对 props 进行浅比拟,缩小渲染,进步性能,这个要和 useCallBack 来包裹函数,配合应用。

useContext

应用 React。creatContext 包裹在父组件外,应用 useContent 在子组件,或者孙子组件,等等等,来回去传入的值,不须要通过 props 一层一层传。

useImperativeHandle

能够使父组件调用子组件暴露出的办法和属性。

useLayoutEffect

当 dom 更新后,会同时登程执行该函数,会阻止浏览器的渲染,等改函数执行之后,将一起渲染界面,会产生视觉阻塞,尽量应用 useEffect 代替。

面试常考

useLayoutEffect 和 useEffect 的区别。
useMemo
useCallbcak
useRef

总结

本文记录一下本人在文中所看到内容,因为未实际,没有贴代码,将会在实际后补全,如有有余,欢送指出。

对于这个好文章:
https://juejin.cn/post/689596…

正文完
 0