React（五）——useContecxt/Reducer/useCallback/useRef/React.memo/useMemo

---

文章目录

• 项目地址
• 十六、useContecxt
• 十七、useReducer
• 十八、React.memo以及产生的问题
• • 18.1组件嵌套的渲染规律
  • [18.2 React.memo](#18.2 React.memo)
  • [18.3 引出问题](#18.3 引出问题)
• 十九、useCallback和useMemo
• • [19.1 useCallback对函数进行缓存](#19.1 useCallback对函数进行缓存)
  • [19.2 useMemo](#19.2 useMemo)
  • • [19.2.1 基本的使用](#19.2.1 基本的使用)
    • [19.2.2 缓存属性数据](#19.2.2 缓存属性数据)
  • [19.2.3 对于更新的理解](#19.2.3 对于更新的理解)
• 二十、useRef记忆功能
• • [20.1 与useState的区别](#20.1 与useState的区别)

---

项目地址

• 教程作者：
• 教程地址：

• 代码仓库地址：

• 所用到的框架和插件：

  dbt
  airflow

十六、useContecxt

让子组件，子孙组件，不用通过props一层一层传递，可以直接取值，类似于定义一个全局变量，子孙组件都可以直接使用这个全局变量，而不是一层一层获取

1. 创建context，给子组件传值
   
2. 使用context里的数据

十七、useReducer

1. 设置一个函数，用来管理所有状态的操作，其中state表示操作之前的值，action = {type:具体操作的名称, payload:表示操作附带的值}，最后操作结束后return的值去覆盖之前的state的值
   

2. 使用useReducer，第一个参数就是操作状态的函数，参数二，就是初始值，用来被参数一操作的值

注意：这里的state是个数值，所以它可以直接进行加减，但是如果state是对象或者数组，需要解构，使用的时候也是以对象的形式

十八、React.memo以及产生的问题

18.1组件嵌套的渲染规律

1. 当父组件重新渲染，子组件默认情况下，跟着父组件一起重新渲染；
2. 如果子组件重新渲染，父组件是不会重新渲染的；

18.2 React.memo

• 为了解决上面父组件重新渲染，导致子组件也跟着一起渲染的资源浪费问题， 我们使用React.memo,对子组件进行缓存，只有当子组件发生了变化后，才会一起渲染，子组件 重新缓存的情况：
• 1. props属性发生了改变；
• 2. state组件的状态发生改变
• 3. unseContext的值发生了改变

1. 使用memo将子组件包裹起来

2. 但是，下面这种情况，由于父组件给子组件传递了props，子组件虽然设置了memo，但是还是会重新渲染，原因是因为每次父组件重新渲染后，里面传值的内存地址发生了变化，虽然值没变，但是对于子组件来说 发生了变化
   

18.3 引出问题

上面的数组和function为了保持不变，不让子组件重新渲染，需要使用useMemo和useCallback来防止子组件重新渲染

十九、useCallback和useMemo

19.1 useCallback对函数进行缓存

使用useCallback对函数进行缓存，其中参数1，是函数体，参数2是 依赖项，就是被观察是否变化的项，根据变化与否，改变来判断是否重新渲染

19.2 useMemo

19.2.1 基本的使用

1. 假如以下代码，当x或y发生了变化的时候，下面的繁重计算也会发生重新渲染，重新计算，是非常消耗内存的
   
2. 为了解决这一问题，我们需要设计的程序是，只有计算条件发生变化的时候，才对计算部分进行重新渲染，使用useMemo解决这一问题，也是需要依赖项

19.2.2 缓存属性数据

• 解决18里面的arr= [1,2,3]属性，没发生变化，但是传入子组件用的时候，会 导致子组件重新渲染

  const arr = useMemo(()=>[1,2,3],[])

19.2.3 对于更新的理解

只要有方法把不变的状态记住，那么在父组件渲染的时候，子组件就不会重新渲染

• useState
  
• useRef：这里使用useRef更合适，因为不需要渲染
• 

二十、useRef记忆功能

只用于记忆，不用于渲染

20.1 与useState的区别

1. useState是，更改+渲染
2. useRef 只更改不渲染