React Hook 常用的钩子

前言

偶尔看见一篇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...