知方号

知方号

react18系列实用教程memo

memo 的语法

如上图所示,在react中,当父组件重新渲染时,子组件也会重新渲染,即便子组件无任何变化,通过 memo 可以实现对组件的缓存,即当子组件无变化时,不再重新渲染子组件,核心代码如下:

import { memo } from "react"; const MemoChild2 = memo(Child2);export default MemoChild2;

将需要缓存的组件作为 memo 函数的参数传入,并将 memo 函数的返回值对外导出即可。

不适用的情况

memo() 函数的本质是通过校验Props中数据的内存地址是否改变来决定组件是否重新渲染组件的一种技术。

所以,当父组件向子组件传递了对象/数组/函数等引用类型的数据时,即便给子组件添加了 memo ,依然会重新渲染,具体演示范例和解决方案详见 useMemo 和 useCallback 的使用教程。

完整范例代码 src/page/Index/Father.jsx import { useState } from "react";import Child1 from "./Child1.jsx";import Child2 from "./Child2.jsx";export default function Father() { console.log("渲染父组件"); const [num, setNum] = useState(0); function increase() { setNum(num + 1); } return ( 父组件 num的值为:{num} +1 );} src/page/Index/Child1.jsx function Child1() { console.log("渲染子组件1"); return ( 子组件1 );}export default Child1; src/page/Index/Child2.jsx import { memo } from "react";function Child2() { console.log("渲染子组件2"); return ( 子组件2(添加了 memo 缓存) );}const MemoChild2 = memo(Child2);export default MemoChild2;

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至lizi9903@foxmail.com举报,一经查实,本站将立刻删除。