React 掌握及对比常用的8个Hooks，优化及使用场景

1、useState

在函数组件中，可以使用useState来定义函数组件的状态。使用useState来创建状态。

• 1.引入
• 2.接收一个参数作为初始值
• 3.返回一个数组，第一个值为状态，第二个值为改变状态的函数

2、 useEffect

useEffect又称副作用hooks。作用：给没有生命周期的组件，添加结束渲染的信号。执行时机：在渲染结束之后执行

• 什么是副作用？

  • 副作用 ( side effect ): 数据获取，数据订阅，以及手动更改 React 组件中的 DOM 都属于副作用
  • 因为我们渲染出的页面都是静态的，任何在其之后的操作都会对他产生影响，所以称之为副作用

• 使用：

  • 1.第一个参数，接收一个函数作为参数
  • 2.第二个参数，接收【依赖列表】，只有依赖更新时，才会执行函数
  • 3.返回一个函数，先执行返回函数，再执行参数函数

2.1 不接受第二个参数的情况下

如果不接受第二个参数，那么在第一次渲染完成之后和每次更新渲染页面的时候，都会调用useEffect的回调函数。

2.2 接受第二个参数的情况下

第二个参数传入一个数组，这个数组表示的是更新执行所依赖的列表，只有依赖列表改变时（当数组中的任意一项变化的时候，useEffect会被重新执行 ），才会触发回调函数

• 传入的为空数组[]，那么即告诉useEffect不依赖于state、props中的任意值，useEffect就只会运行一次，常用场景为页面获取数据的方法可以写入此处进行调用，以获取页面初始数据。
• 传入一个值构建的数组、或者多个值构建的数组，如[num]、[num,val]，上述代码变更为如下。那么此时只有当数组中的值（任意一项即可）改变时，才会重新触发回调函数。

3、 useLayoutEffect

一般将useLayoutEffect称为有DOM操作的副作用hooks。作用是在DOM更新完成之后执行某个操作。执行时机：在DOM更新之后执行。

与useEffect对比

• 相同点
  • 1.第一个参数，接收一个函数作为参数
  • 2.第二个参数，接收【依赖列表】，只有依赖更新时，才会执行函数
  • 3.返回一个函数，先执行返回函数，再执行参数函数
  • （所以说执行过程的流程是一样的）
• 不同点
  • 执行时机不同。useLayoutEffect在DOM更新之后执行；useEffect在render渲染结束后执行。执行示例代码会发现useLayoutEffect永远比useEffect先执行，这是因为DOM更新之后，渲染才结束或者渲染还会结束

4、 useMemo

使用useMemo可以传递一个创建函数和依赖项，创建函数会需要返回一个值，只有在依赖项发生改变的时候，才会重新调用此函数，返回一个新的值。简单来说，作用是让组件中的函数跟随状态更新（即优化函数组件中的功能函数）。

• 使用：
  • 1.接收一个函数作为参数
  • 2.同样接收第二个参数作为依赖列表（可以与useEffect、useLayoutEffect进行对比学习）
  • 3.返回的是一个值。返回值可以是任何，函数、对象等都可以。
  • 使用场景有复杂计算逻辑优化、父子组件传值重新优化等；

5、 useCallback

useMemo讲完我们来讲一个跟其很相似的叫useCallback，作用也是让某些操作、方法跟随状态的更新而去执行。

与useMemo对比。

• 可以简单这样看作，useMemo(() => Fn,deps)相当于useCallback(Fn,deps) 不同点：
• useCallback是缓存的是一个函数，对传过来的回调函数优化，返回的是一个函数；useMemo返回值可以是任何，函数，对象等都可以。
• 复杂计算逻辑的场景不适合使用useCallback来缓存，因为传入的函数内容会不断执行。

相同点：

• 在使用方法上，useMemo与useCallback相同。接收一个函数作为参数，也同样接收第二个参数作为依赖列表

useCallback适用场景

可以对父子组件传参渲染的问题进行优化。简单来说就是，父组件的传入函数不更新，就不会触发子组件的函数重新执行

• 通常而言，父组件更新了，那么子组件也会更新。但是如果父组件传入子组件的内容不变，那么子组件某些操作（某些操作是指需要跟随传入内容的改变而同步进行的操作）是没必要执行的，这会影响页面性能，所以我们可以对这情况进行优化。

简单总结使用场景判断：

• 在子组件不需要父组件的值和函数的情况下，只需要使用memo函数包裹子组件即可
• 如果有函数传递给子组件，使用useCallback
• 缓存一个组件内的复杂计算逻辑需要返回值时，使用useMemo
• 如果有值传递给子组件，使用useMemo。

6 、useRef

简单来说useRef就是返回一个子元素索引，此索引在整个生命周期中保持不变。作用也就是：长久保存数据。注意事项，保存的对象发生改变，不通知。属性变更不会重新渲染；

7、useContext

useContext是让子组件之间共享父组件传入的状态的。作用通俗地说是带着子组件去流浪。

• 需要引入useContext，createContext两个内容
• 通过createContext创建一个context句柄
• Context.Provider来确定数据共享范围
• 通过value来分发内容
• 在子组件中，通过useContext(Context句柄)来获取数据