Hooks的基本介绍

1 什么是Hooks

• Hook 是 React 16.8 的新增特性，
  它可以让函数式组件拥有类组件特性【如：保存自己的状态，有自己的生命周期方法】
• 基础的Hook：useState、useEffect、useContext
• 额外的Hook：useReducer、useCallback、useMemo、useRef、useImperativeHandle、useLayoutEffect、useDebugValue

2.为什么需要Hook?

• 在Hook出现之前, 如果我们想在组件中保存状态,或是想在组件的某个生命周期中做一些事情, 那么我们必须使用类组件
  • 但是类组件的学习成本较高的, 你必须懂得ES6的class, 箭头函数
  • 同时，在类组件的同一个生命周期方法中, 可能会编写很多不同的业务逻辑代码，这样就导致了大量不同的业务逻辑代码混杂到一个方法中, 导致代码变得很难以维护
    (诸如: 在组件被挂载的生命周期中, 可能主要注册监听, 可能需要发送网络请求等)
  • 另外，在类组件中共享数据是非常繁琐的, 需要借助Context或者Redux等
• 因此当应用程序变得复杂时, 类组件就会变得非常复杂, 非常难以维护
• Hook就是为了解决以上问题而生的

3.总结各个Hook的基本作用

• useState, // 状态函数，可以定义，修改状态【数据】
• useEffect, // componentDidMount，componentDidUpdate 和 componentWillUnmount。这三个生命周期函数的组合。在组件被挂载或者组件更新完成，和即将被卸载时调用
• useContext, // 父子组件传递数据
• useReducer, // useState的一种替代方案
• useCallback, // 优化代码, 可以让对应的函数只有在依赖发生变化时才重新定义,子组件不会因为父组件数据变化而重新刷新
• useMemo, // 优化代码，类似useCallback, 可以让对应的函数只有在依赖发生变化时才返回新的值。
• useRef, // 专门用来获取元素的
• useImperativeHandle, // 控制函数式组件中ref的权限
• useLayoutEffect // 类似useEffect，但可以用于修改DOM的布局样式