memo,useCallback之间的联系

memo,useMemo,useCallback之间的联系

在React中，我们能积极主动的开展3D渲染操纵以减少不必要的反复3D渲染花销，能通过应用memo,useMemo,useCallback这三个React所提供的具体内容。

可是使用memo,useMemo,useCallback以前，我们一定要确保，在咱们缓存文件的部件不可以发生会影响到缓存文件状态下的物品，例如在待缓存文件的部件中应用useContext等相关信息，我们可以把context内容根据props的方式传到到缓存文件部件中。这么做是因为大家一旦在memo缓存文件部件中采用了useContext来获得前后文的状态下，便会破化缓存文件性，致使必定也会受到再次3D渲染问题。

这儿被破变的状况在react官方网站有提及

memo

memo文本文档

memo作用是在子组件接纳的props未出现更改时绕过再次3D渲染的一个高阶组件，它一般会与useMemo与useCallback开展搭配使用。

参数说明

1. Component: 值得被缓存文件的部件，memo不容易改动部件具体内容，只能回到一个新的记忆力化部件。
2. arePropsEqual: 可选参数，用以帮助分辨部件前后props是不是相同，能接受2个主要参数：prevProps与newProps，假如prevProps == newProps,必须回到true，即部件3D渲染输入参数同样且newProps所造成的个人行为也完全一致。(主要目的是开展深层次的较为，因为自身得比较是浅较为，但是为了可以更好的操纵3D渲染升级，可自设深较为)

传参

memo 回到一个新的 React 部件。它行为和发放给 memo 的部件同样，除开 React 不容易总是会在父亲级被重新3D渲染时再次3D渲染它，除非是它props出现了改变。

应用memo的时候需要注意一个点：

1. 当使用memo后返回部件本身有的state更改后，部件会开启再次3D渲染。
2. 假如memo后部件应用context前后文对象情况下，一定会在context目标发生变化时，开启再次3D渲染，让memo功能失效。

突发情况表明

假定大家传到props是一个目标得话，这个时候应该怎么办？由于我们可以看出，在React开展Props较为时，会用Object.is进行对比，假如是基础类型得话，假如值未出现改动，则一定回到true，但也是目标得话，使用Object.is({}, {})一定会回到false，主要是因为即使两个人都是空对象，可是他们在堆内存地址一定是不一样的，因此一定会回到false，那样是否有怎么样才可以防止呢？

依照官网观点，我们应该将props尽可能降到最低，其实就是尽可能都采用基础类型来避开这样的事情，但如果实在难以避开，必须采用对象类型或是function种类应该怎么办？

这时候便是useMemo与useCallback来进行数据包囊了！

忘掉得出应用实例了：

import { memo } from 'react';

const SomeComponent = memo(function SomeComponent(props) {
 // ...
});

给官网了，懒惰一下

useMemo

useMemo时React中的一个钩子函数公式，在反复3D渲染时它可以将数据进行缓存文件。

注：useMemo都是和数据信息或者调用函数相处，最好不要再useMemo上直接回到一个Component。

实际上假如是了解Vue得话，你就会发现，这个跟Vue里的computed特别像，都会对数据库的缓存文件，再根据deps监视是不是转变在开展重算并更新缓存开启部件再次3D渲染

参数说明：

1. calculateValue: calculateValue是一个调用函数，不会接纳传到参数值，是一个纯函数，而且需要回到一个随意种类数值。React会到初次3D渲染时开启这一calculateValue函数公式并回到实行后获得数值开展回到。再下一次3D渲染中，假如dependencies未出现更改，React会回到一个同样数值，假如发生了变化，便会开启calculateValue，更新缓存数值。
2. dependencies:dependencies主要参数是一个二维数组，里边保留了会开启calculateValue的自变量，一旦这其中的任意一个主要参数发生了变化，便会开启升级，进而升级缓存文件。

应用实例:

import { useMemo } from 'react';

function TodoList({ todos, tab }) {
 const visibleTodos = useMemo(
   () => filterTodos(todos, tab),
   [todos, tab]
  );
}

回到具体内容：

在初次3D渲染时，会回到calculateValue实行后的结果。

在之后的3D渲染中，假如dependencies中监视主要参数未出现更改，就不会有结论回到，维持原先的结论，假如发生了变化，便会回到重新执行calculateValue函数公式后的结果。

适用场景：

1. 帮助部件绕过再次3D渲染

   这什么意思呢？实际上是这样子的，假如我们有一个部件应用memo来申明这一部件不想让在props或者自身state没有改变的现象再次3D渲染，但在传到的props数据中，存有引用类型数据信息，这会产生一个问题，在每一次3D渲染中，因为是引用类型数据信息，那样就会造成它在浅较为时从来不会相同，这就使得memo不能用了，memo部件会一直再次3D渲染，彻底无法达到原先的目地了，针对这种情况，大家就可以使用useMemo来克服了。

   我们可以把引用类型数据信息应用useMemo开展回到，只有在引用类型数据信息确实产生修改了，才导致memo部件进行更新，这样就能有效防止memo部件无效问题。

   实际的事例能够朋友网给的实例

2. useMemo的嵌入应用

   官方网站实例

   略微对官方网站实例做一下解释说明：

   毕竟对于FunctionComponent而言，每一次部件再次3D渲染时，都是会重新执行Function，这就导致每一次建立的数据集合都是会再次申明，这便会出现一个难题，是他的引入详细地址发生了变化了，浅较为的时候也是不一样的啦，那么就会使下边的useMemo立即无效，由于useMemo的deps是会让这一引用对象作出回应，针对这种情况，就能对其这一引用对象应用useMemo，使其仅对基础类型的变化作出回应，然后把这一useMemo的对象，放进到以前的useMemo中，而且改动deps里的回应数据信息，就能解决这些问题了。

3. 应用useMemo记忆力函数公式

   这一先看事例就行了，由于具体函数公式也是一个引用对象，官方网站事例。这儿略微提一点，可以用useCallback这一语法糖，来记忆力函数公式。

useMemo与memo的差异

1. React.memo() 是一个高阶组件，我们可以用它去外包装我们不想再次3D渲染的部件，除非是这其中的 props 产生变化。

2. useMemo() 是一个 React Hook，我们可以用他在部件中包装函数公式。 我们可以用它去保证该函数中数值仅则在依赖项之一变化时才重算。

useCallback

useCallback在元件的高层启用在再次3D渲染中间缓存文件函数定义

参数说明：

1. fn: 必须缓存文件的函数公式。 它能接受一切主要参数并回到一切值（这儿与useMemo不同类型的，useMemo中calculateValue函数是接受不了参数）。在初次3D渲染的时候就会回到这一函数公式（并不能实行）。这一fn的变化都是在于第二个主要参数dependencies的，假如发生变化，便会升级这一函数公式，而且开展回到，进而开启回应。

   这儿最重要的一点就是：React一般不会实行useCallback中传到的fn的，他仅仅只是想去升级传送参数值，实际上就等于是实施了一次bind，改变一下传到的arguments，然后进行回到。

2. dependencies：这一参数和useMemo的第二个主要参数同样，也不转述了，但是这里的dependencies基本上在于危害函数公式过程的传入参数。

传参：

初次3D渲染，回到传到的函数公式

后面3D渲染，假如dependencies页面上危害主要参数未出现更改，则回到缓存文件里的函数公式，假如更改，系统重装后在回到

应用：

1. 帮助部件绕过再次3D渲染

   这个跟useMemo功效同样，如果是一个memo部件，在自身3D渲染时间很慢的情形下，提升时，能将memo部件接收到的props（假定这一props是一个函数公式），那就可以把函数公式应用useCallback开展包囊，防止memo部件无效。终究Function也是一个引用对象（依据原型链）。

2. 对于需要采集数据的调整升级情况

   就像我们必须纪录每一步状态下的情况下，例如对其客户姿势开展收集的情况下，大家就可以使用useCallback来对消费者收集信息进行包囊，由于我们可以看出执行记录动作函数是不容易变化的，因此我们不应该使其影响到了部件3D渲染，因此需要对它进行包囊。

   官方网站给的事例就能够很好地展现出这一点，所以大家可以再去做客户姿势收集的情况下，应用useCallback来降低不必要3D渲染。

3. 提升自定Hook

   这一还没有如何科学研究，终究新手，因此等以后来升级

useCallback和useMemo两个人都是对页面渲染控制，useCallback就好像是useMemo的语法糖，专门用于处理函数的。

汇总

近期开始上班了，所以从Vue转至React，正中间踩了很多的坑，十分感谢文哥的review，让我学会了许多React里的操作技巧，及其着重强调了React中数据所导致的难题等一系列的处理，加油加油，努力做一个优秀的前端开发工程师。