hook 和普通函数的区别采用高阶函数包裹的方式，面对复杂逻辑可能出现多层嵌套、难以解读的糟糕场景。hook相对来说更

x	class	hook
简洁		简洁
逻辑复用	采用高阶函数包裹的方式，面对复杂逻辑可能出现多层嵌套、难以解读的糟糕场景

Hook 的一些钩子函数

useState()       // 状态钩子
const [ count,  setCount ] = useState(0)

useContext()     // 共享状态钩子
const CountContext = React.createContext()
 <CountContext.Provider value={{ count: 10 }}>
 </CountContext.Provider>
 //使用context的获取方式
const countObj = useContext(CountContext)
console.log(countObj.count) // 10
 
useReducer()     // action 钩子

useEffect()      // 副作用钩子 页面渲染完成后执行
useEffect(()=>{
  // componentDidMount & componentDidUpdate
  return ()=>{
  // componentWillUnmount
  }
}, [])

useCallback()    // 记忆函数 因：函数传递给jsx的每一个方法的引用都是一直变化的 果：防止不必要的渲染 返回一个有记忆的函数 函数的引用不再改变
useMemo()        // useCallback 不会执行第一个参数函数，而是将它返回给你，而 useMemo 会执行第一个函数并且将函数执行结果返回给你 所以 useCallback 常用记忆事件函数，生成记忆后的事件函数并传递给子组件使用。而 useMemo 更适合经过函数计算得到一个确定的值，比如记忆组件。只有数组里面的依赖有更改才会触发更新
useRef().       // 保存引用值 生成对DOM对象的引用 ref.current访问
useImperativeHandle(). // 父组件获取子组件内的索引
useLayoutEffect()      // 同步执行副作用 优先于useEffect componentDidMount 阻塞页面渲染

React Hooks 中 Capture Value 特性/ 触发方法时传递的是什么值就是什么值触发，也就是每次运行时都有固定的值它并不会自动引用最新的值所以使用ref可以保留对这个dom的引用，始终使用的都是它的最新值而不是每次运行时的值。

hook 和 普通函数的区别

hook 和普通函数的区别