React.memo
React 的渲染机制，组件内部的 state 或者 props 一旦发生修改，整个组件树都会被重新渲染一次，即时子组件的参数没有被修改，甚至无状态组件
会造成性能浪费
React.memo 是 React 官方提供的一个高阶组件，用于缓存我们的需要优化的组件
React 中的组件被设计为在状态或 props 值发生变化时重新渲染。但是，这可能会影响应用程序的性能，因为即使更改只是为了影响父组件，附加到父组件的所有其他子组件都将重新呈现。当父组件重新渲染时，其所有子组件也会重新渲染。
React Memo 是一个高阶组件，它包装组件以记忆渲染的输出并避免不必要的渲染。这提高了性能，因为它会记住结果并跳过渲染以重用上次渲染的结果。
已经记忆化的组件，怎么触发更新
- 即使一个组件被记忆化了，当它自身的状态发生变化时，它仍然会重新渲染。memoization 只与从父组件传递给组件的 props 有关。
- 即使组件已被记忆化，当其使用的 context 发生变化时，它仍将重新渲染。记忆化只与从父组件传递给组件的 props 有关。
- useMemo
- 见拓展（下面）
- 自定义比较函数（见Memo参数-第二个参数，下面）
两种方式
- 直接创建(类式创建)
const myComponent = React.memo((props) => { /* render using props */ }); export default myComponent; - 函数组件
const myComponent = (props) => {
/* render using props */
};
export const MemoizedComponent = React.memo(myComponent);
仅当 props 值发生变化或组件的状态和上下文发生变化时，memo组件才会重新渲染
参数
React.memo(Component, arePropsEqual?)
- Component
组件 - arePropsRqual
可选参数，为一个函数
接受两个参数：一个函数，接受两个参数：组件的前一个 props 和新的 props。如果旧的和新的 props 相等，即组件使用新的 props 渲染的输出和表现与旧的 props 完全相同，则它应该返回 true。否则返回 false。通常情况下，你不需要指定此函数。默认情况下，React 将使用 Object.is 比较每个 prop。
function MyComponent(props) {
/* 使用 props 渲染 */
}
function shouldMemo(prevProps, nextProps) {
/*
如果把 nextProps 传入 render 方法的返回结果与
将 prevProps 传入 render 方法的返回结果一致则返回 true，
否则返回 false
*/
}
export default React.memo(MyComponent, shouldMemo);
应用场景
-
当props没有改变时跳过重新渲染
-
使用state更新记忆化(memoized)组件
切记，不可以普遍使用该组件，不能都进行缓存，太多缓存，会造成负优化
拓展
useMemo
useMemo(calculateValue, dependencies)
在组件的顶层调用 useMemo 来缓存每次重新渲染都需要计算的结果，它在每次重新渲染的时候能够缓存计算结果文章来源：https://www.toymoban.com/news/detail-622176.html
const cachedValue = useMemo(calculateValue, dependenies)
- calculateValue
要缓存计算的函数。之后组件更新，如果dependenies没有发生变化，React将直接返回相同值。否则，将会再次调用calculateValue并返回最新结果，然后进行缓存以便下次进行使用。 - dependenies
跟一般钩子的依赖项作用一样
参考资料
官网
掘金文章来源地址https://www.toymoban.com/news/detail-622176.html
到了这里，关于React性能优化之Memo、useMemo的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
