React-Hooks基础

函数组件功能的变迁：

• React 函数组件在16.8版本之前没有状态
• 函数组件在16.8版本之前 一般用类组件做状态管理 函数组件做UI渲染
• 在16.8版本之后 React出了Hooks使得函数组件有了自己的状态同时也有了生命周期

为什么要出Hooks ：

• ① 类组件在使用高阶组件时为了复用 这样会使得组件的层级会嵌套的比较深
• ② 生命周期比较复杂
• ③ 因为在设计代码时出现的不确定性，无法确定是否需要状态，改变代码结构成本比较大

React Hooks简介 ：

• 'Hooks'的单词意思为“钩子”。
• React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。

Hooks 注意 ：

• ① Hooks只能给函数组件使用
• ② Hooks只能写在函数组件的顶层（不能被嵌套）

Hooks函数：

• ① useState ： 定义State的 给函数组件定义状态
• ② useEffect ： 处理副作用（异步操作）
• ③ useContext ： 减少组件层级
• ④ useReducer ： 提供一个简易的redux仓库，就是不能使用redux提供的中间件
• ⑤ useCallback : 记忆函数 ， 当根组件重新渲染时 所有的子组件都会重新渲染 ， useCallback 就是解决这个问题的
• ⑥ useMemo ： 记忆组件 ， 用来缓存函数的返回值的
• ⑦ useRef ： 保存引用值
• ⑧ uselmperativeHandle ： 通过 useImperativeHandle 用于让父组件获取子组件内的索引
• ⑨ useLayoutEffect ：同步执行副作用

频繁使用的Hooks函数：

• ① ： useState
• ② ： useEffect
• ③ ： useCallback 面试常问
• ④ ： useMemo 面试常问
• ⑤ ： useContext
• ⑥ ： useReducer