pureComponent和Memo、useMemo

266 阅读2分钟

1、component和pureComponent的区别,因为react是状态改版是当前组件及子组件全部渲染一遍。子组件可以通过shouldComponentUpdate方法判断是否更新当前子组件,会做一层浅比较props属性(如果是对象类型,则会认为没变化,不刷新子组件)

2、shouldComponentUpdate方法通过返回true和false,来判断是否执行渲染函数render.

3、pureComponent是添加了内置的shouldComponentUpdate方法,但是当子组件使用了pureComponent时,子组件下面的子组件,也应该使用purecompoent.因为子组件不刷新时,子组件的子组件也不会刷新。

4、react.memo其实和pureComponent是一样的目的。只是memo是针对函数组件,不是类组件。

// 函数组件
const ConstText2 = React.memo(function(props) {
  const { count } = props;
  console.log('const rendered', count);
  return <div>{count}</div>
});

5、react.memo和usememo区别,-
useMemo() 是一个 React Hook,我们可以使用它在组件中包装函数。 我们可以使用它来确保该函数中的值仅在其依赖项之一发生变化时才重新计算(juejin.cn/post/699183…

memo是对函数组件缓存避免重复刷新子组件

6、useCallBack和useMemo区别

useCallBack:

根据我们之前的理解,我们知道每次App组件渲染时这个handleCount都是重新创建的一个新函数。

未使用useCallback创建的函数m可以明确的知道每次渲染时handleCount都是重新创建的一个新函数。

问题:它有什么问题呢?当我们将handleCount作为props传递给其他组件时会导致像PureComponentshouldComponentUpdateReact.memo等相关优化失效(因为每次都是不同的函数) 参考(juejin.cn/post/684490…

useMemo:

他们的唯一区别就是:useCallback是根据依赖(deps)缓存第一个入参的(callback)。useMemo是根据依赖(deps)缓存第一个入参(callback)执行后的值

原文地址 knightyun.github.io/2021/05/09/…