皮皮网

1.为何要使用React Hooks？

为何要使用React Hooks？

       åœ¨äº†è§£React Hooks之前，我们必须先知道React的函数组件性质以及的函数组件为什么要用Hooks。

        大伙儿都知道，无组件不React，而React的组件又分为类式组件和函数式组件，为什么函数式组件大受React开发者的推广？

        首先我们从源码的角度来简单谈一下类式组件和函数式组件的区别：

        定义类组件时，我们必须继承React.Component

        同时，它具有一个render函数

        咱们见好就收，毕竟具体操作需要涉及源码，不是一时半会解释的清的。那么render加载组件时，发生了什么？

        1.根据组件标签，找到组件

        2.由于是类式组件，创建新的实例，并通过该实例调用到原型上的render方法

        3.将虚拟Dom转化为真实DOM

        类式组件被定义为复杂的组件，这不是React所希望的，React想要的组件是纯函数组成的管道，那么便引出了作为简单组件的函数组件。

        而函数组件作为一个函数，是没有继承React.Component的，他只需要两步 1.找到组件 2.渲染组件 ，所以也就 不存在生命周期，以及状态及this。

        这就意味着，函数组件实现有关state的管理，需要借助redux，秉承redux能不用就不用的准则（其实有的时候还蛮香的，全局管理方便），往往会另功能简单的React组件变得笨重。

        于是React团队自.8版本以来，推出了稳定的React HOOKS来解决上述问题。

        React约定钩子的前缀为use，所以需要自定义钩子时，一般使用use为前缀创建钩子。除此之外，React默认提供了四种钩子：

        1）useState

        相当于一种静态声明，目的是引入状态，此时的钩子保存状态。useState()接收函数状态的初始值，具有两个参数，第一个为状态变量，第二个为改变状态的方法，比如const [number,源码早期wps源码setNumber] = useState(0)

        2)useEffect

        副作用钩子，用来替代生命周期，最常见是向服务器请求数据

        useEffect()作为常用的钩子之一，接收两个参数，第一个参数是函数，第二个参数是一个数组，给出依赖项，数组里的值代表需要监测的对象。

        问题来了，生命周期那里体现？

        当组件参数发生改变时，useEffect()就会执行。组件第一次渲染时，useEffect()也会执行。是不是相当于生命周期中的 componentDidMount() 呢？而useEffect()下的return，一般写在第一个参数的异步操作后，相当于 componentWillUnmount() ，在组件卸载前执行，做收尾工作。

        3）useReducer

        属于action钩子，useReducer()将算出新的state，返回一个数组。例如const [state, dispatch] = useReducer(ReducerFunc, initState)

        第一个值是当前状态值，第二个值是发送action的dispatch。与Redux的Reducer一样，能够共享状态，但是不同之处是没法提供中间件和时间旅行(time travel)。

        4)useContext

        共享状态的一个钩子，在组件外部建立一个Context，包裹组件时，可以将被包裹组件的状态共享给组件内部调用的其他组件，即：

        1.外部建立Context()

        2.包裹含有状态的组件1

        3.在其他函数组件内部调用该Context()时，可以将组件1的状态共享

        但是有一点需要注意的是，使用useContext进行的数据流管理，每当context更新时，所有 使用 到该context的组件都会重新渲染。所以需要方法对useContext()进行优化，减少不必要的更新，优化方法可以参考： 如何优雅地处理使用React Context 导致的不必要渲染问题？

        除此之外还有一些自带的钩子，比如：

        5)useCallback和useMemo

        可以用做React性能优化

        react很烦，一但更新数据，render依次diff刷新节点，拦都拦不住。useCallback和useMemo就是拦住他刷新的方法。

        假设React组件中有个button，同时声明了click方法，每次render时，button和click方法都会重新render。于是可以使用useCallback()，避免组件重复无意义的渲染。

        比如：

        原因是缓存了相同的引用，以此避免了无效render。

        useMemo参数用法一致，不过useCallback一般用于缓存函数，useMemo用于缓存计算结果之类。

        useCallback(fn, deps)相当于useMemo(()=>fn, deps)

        *可以推出，使用useCallback实现useMemo的方法：

        useMemo(fun,...deps)  

        useCallback(fun(...deps), [...deps])

        这两者是等价的。