React中的hooks函数

没错！！我又来了！！由于这几天有点忙，一直没更新，跟大家说声抱歉！！所以今天我打算更新两篇关于react的基础知识！首先，我要分享的知识是react中的hooks函数，那么话不多说，跟着我的分享来一块学习吧！！

首先咱们来先了解下hooks函数是什么？

1. 什么是Hook

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的

React 特性

Hook 是一些可以让你在函数组件里 “ 钩入 ” React state 及生命周期等特性的函数

Hook 不能在 class 组件中使用 —— 这使得你不使用 class 也能使用 React

2. 为什么使用Hook

Hook 可以使你在无需修改组件结构的情况下复用逻辑状态

Hook 将组件中相互关联的部分拆分成更小的函数，而并非强制按照生命周期划分

Hook 可以使你在不使用 class 的情况下使用更多的 React 特性

3. useState

作用：

         给函数组件添加一些内部 state，并在 React 重复渲染时保留这个 state

         useState 会返回一对值：当前状态和一个让你更新它的函数

语法

        

     

 使用

          基本使用

声明多个 state 变量

4. useEffect

了解useEffect前我们先来说一下什么是副作用：

在 React 组件中我们把数据获取、订阅或者手动修改过 DOM 等这些行为统称为副作用

作用：    

        useEffect 就是一个 Effect Hook ，给函数组件增加了操作副作用的能力

        它跟 class 组件中的 componentDidMount 、 componentDidUpdate 和

        componentWillUnmount 具有相同的用途，只不过被合并成了一个 API

语法：

没有任何依赖的情况下使用

如果这段数据请求的代码不放在 useEffect 中，而是直接放在 App 这个函数中则会一直

执行。因为当调用了 setList 这个方法就会触发 App 这个函数重新执行

在有依赖的情况下使用

useEffect 的第二个参数是一个数组，如果数组的值为空代表的是不依赖任何数

据，但是如果这个时候要是你在 useEffect 这个回调函数中依赖了其他数据，但是

你没有在第二个参数中声明你依赖的数据，则当依赖的数据发生变化时，

useEffect 这个回调函数不会再次执行

当然我们也可以不传递第二个参数， useEffect 会自动判断你有没有依赖与其他数

据，从而判断是否执行 useEffect这个回调函数

清除副作用函数

当我们组件销毁的时候，往往会清除一些无用的垃圾，比如事件和定时器等。这个时候

我们在在 useEffect 中返回一个函数来清除副作用函数。这个函数在组件销毁的时候执

行或者依赖发生改变时执行

useEffect 和 useLayoutEffec 的区别

简单来说就是调用时机不同， useLayoutEffect 和原来 componentDidMount &

componentDidUpdate 一致，在 react 完成 DOM 更新后马上同步调用的代码，会阻塞页面渲

染。而 useEffect 是会在整个页面渲染完才会调用的代码

官方建议优先使用 useEffect

在实际使用时如果想避免 页面抖动 （在 useEffect 里修改 DOM 很有可能出现）的话，可以把

需要操作 DOM 的代码放在 useLayoutEffect 里。在这里做点 dom 操作，这些 dom 修改会和

react 做出的更改一起被一次性渲染到屏幕上，只有一次回流、重绘的代价

5. useCallback

作用：防止因为组件重新渲染，导致方法被重新创建 ，起到缓存作用 ; 只有第二个参数 变化了，

才重新声明一次

使用

6. useMemo

作用：

        useCallback 的功能完全可以由 useMemo 所取代，如果你想通过使用 useMemo 返回一个

        记忆函数也是完全可以的

        useMemo会把第一个回调函数执行，并且返回一个新的值。 类似于 vue 中的计算属性

和 useCallback 的区别

        useCallback不会执行第一个参数函数，而是将它返回给你，而 useMemo 会执行第一个函数

        并且将函数执行结果返回给你

语法：

使用

7. useRef

作用：

        获取到当前的DOM 元素

        保存变量

语法：

使用 :

8. useContext

作用

        接收一个 context 对象（ React.createContext 的返回值）并返回该 context 的当前值。

        当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value 属

        性 决定

语法

使用

9. useReducer

 

作用

        useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer ，并

        返回当前的 state 以及与其配套的 dispatch 方法

语法

使用

10. 自定义Hooks（了解）

        自定义 Hook 是一个函数，其名称以 use 开头，函数内部可以调用其他的 Hook

        当我们想在两个函数之间共享逻辑时，我们会把它抽离到第三个函数中

今天我要分享的hooks钩子函数就这么多了，如有不足，请多多指正！！！