React Hooks介绍

React Hooks

hooks函数用于在函数式组件中，实现了函数式编程。
使用hooks的理由：

1. 高阶组件为了复用，导致代码层级复杂
2. 使用类组件时，生命周期的复杂
3. 函数式组件中无状态，为了使用函数式组件，所以就有了hooks

主要包含：useState(),useEffect(),useLayoutEffect(),useCallback(),useMemo(),useRef(),useContext(),useReducer(),useNavigate(),useLocation()等，下面简单介绍一下hooks的用法。

useState()

保存组件状态，初始化组件中需要定义的状态

const [menu,setMenu]=useState([])

useEffect()

是一个副作用函数，主要用于数据的请求，执行异步操作。

useEffect(()=>{ axios.get(`/articles/${id}`).then(res => { settitle(res.data.title) setcontent(res.data.content) setcategory(res.data.category) }) },[id])

这里要注意第二个参数，当存在依赖时，一定要进行赋值，否则数据一直不会改变。如果不传第二个参数，会导致页面进入死循环。所以当没有依赖时，也要传个空数组。

useLayoutEffect()

简单来说就是调用时机不同， useLayoutEffect 和原来componentDidMount & componentDidUpdate 一致，在react完成DOM更新后马上同步调用的代码，会阻塞页面渲染。而 useEffect 是会在整个页面渲染完才会调用的代码。

useCallback()

记忆函数：防止函数被重新渲染，起到了缓存的作用，只要当自己的依赖项改变时，函数才会重新渲染。当与自己函数无关的组件重新渲染时，不会影响到自身。

useMemo()

记忆组件：类似于Vue中的computed计算属性，返回的是一个函数的结果。
useCallback 的功能完全可以由 useMemo 所取代，如果你想通过使用 useMemo 返回一个记忆函数也是完全可以
的。

useRef()

作用：保存引用值，useState()也具有保存值的作用
const mytext=useRef(null)
绑定在Dom元素中，用户获取当前Dom,绑定在组件中，用户获取整个组件，绑定在表单中，用于获取整个表单对象。

useContext()

结合 var GlobalContext= React.createContext()
作用：减少组件层级，结合生产消费模式，实现非父子之间的通信

useReducer()

基于Redux设计思想，结合useContext()，将状态全部放在外部统一保存起来。