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钩子函数就这么多了，如有不足，请多多指正！！！