React Hooks-useMemo篇

Posted 2023-03-20

参考技术A 我们在使用hooks和函数组件编写我们的组件时，第一个要考虑的就是渲染性能，我们知道如果在不做任何处理时，我们在函数组件中使用setState都会导致组件内部重新渲染，为了避免这种情况出现，我们一般都会使用useMemo将函数包裹。

下面我们通过一个实例，来理解下 useMemo的用法。

熟悉react的同学可以很显然的看出，当我们点击父组件的按钮的时候，子组件的name和children都会发生变化。

不管我们是改变name或者content的值，我们发现 changeName的方法都会被调用。

这就意味着我们本来只想修改content的值，但是由于name并没有发生变化，所以无需执行对应的changeName方法。

但是发现他却执行了。 这就意味着性能的损耗，做了无用功。

下面我们使用 useMemo 进行优化

useMemo 可以帮我们将变量缓存起来，它们的第二个参数和useEffect一样，是一个依赖项数组，通过配置依赖项数组来决定是否更新。

优化之后的子组件

这个时候我们点击 改变content值的按钮，发现changeName 并没有被调用。

但是点击改变name值按钮的时候，changeName被调用了。

所以我们可以使用useMemo方法 避免无用方法的调用，当然一般我们changName里面可能会使用useState来改变state的值，那就避免了组件的二次渲染，达到了优化性能的目的。

React使用hooks-useMemo

参考技术A 把“创建”函数和依赖项数组作为参数传入 useMemo ，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。
记住，传入 useMemo 的函数会在渲染期间执行。请不要在这个函数内部执行与渲染无关的操作，诸如副作用这类的操作属于 useEffect 的适用范畴，而不是 useMemo 。
如果没有提供依赖项数组， useMemo 在每次渲染时都会计算新的值。(react文档)