子组件

没有改变时组件也要进行一次更新。

实际上这一次更新是没有必要的。

如果要避免组件

是一个高阶组件用来记忆memorize组件参数Child需要被记忆的组件或者说是需要避免不必要更新的组件。

返回值MemoChildReact

Child

并不是所有的组件都适合使用memo比如child2组件每次都需要重新渲染使用memo反而会使性能变得更低逻辑也变得更复杂

基本用法

中调用以此通过记忆组件渲染结果的方式来提高组件的性能表现。

这意味着在这种情况下React

React.memo

如果更新前后的引用相同复用上一次的渲染结果不会重新渲染该组件。

如果更新前后的引用不同重新渲染该组件。

默认情况下其只会对复杂对象做浅层对比如果你想要控制对比过程那么请将自定义的比较函数通过第二个参数传入来实现

React.memo

onClick{changeAge}修改age/buttonCallback

//div)

修改父组件的state值后函数子组件内部的代码运行了相对而言有点费性能

优化如下

使用React.memo包裹子组件缓存上一次的结果默认情况下其只会对复杂对象做浅层对比如果你想要控制对比过程那么请将自定义的比较函数通过第二个参数传入来实现。

子组件Callback.jsx

onClick{changeAge}修改age/buttonCallback

fn{fn}

此时父组件的state数据改变后会引起子组件的内部代码运行。

打印了结果相对而言性能有损耗。

优化如下

onClick{changeAge}修改age/buttonCallback

fn{fn}

因为fn函数被缓存了地址没有发生改变React.memo就认为props数据没有发生改变所以没有表要重新运行函数。

在函数组件中定义的一般的普通函数在每次组件更新渲染时都会重新生成一个函数此时函数地址发生改变了就会引起子组件内部代码运行损耗性能。

优化使用useCallback将函数缓存每次组件更新渲染时这个函数地址没有发生改变所以传入到子组件的props数据没有发生发生改变所以子组件内部代码没有重新执行。

React.memo是数据的浅对比也就是地址的对比只要传入参数地址发生改变就会重新执行子组件的代码。

useMemo

用于缓存一些耗时的计算结果返回值只有当依赖项改变时才重新进行计算。

useCallback(func,

React.PureComponent与之对应的函数组件可以使用

React.memo它们都会在自身

有什么共同点呢前者可以在组件内部使用可以拥有比后者更细粒度的依赖控制。

它们两个与

useCallback