网站设计汕头,北京快三开奖走势图一定牛,厦门网站建设制作,易企秀h5制作模板免费有组件如下,上面变化秒数, 下面是大量计算的子组件,上面每一秒钟变化一次,这时候子组件会不断重新渲染, 浪费资源 父组件如下
import React, { memo, useEffect, useMemo, useState } from react;
import type { ReactNode, FC } from react;
import HugeCount from ./Te;
int… 有组件如下,上面变化秒数, 下面是大量计算的子组件,上面每一秒钟变化一次,这时候子组件会不断重新渲染, 浪费资源 父组件如下
import React, { memo, useEffect, useMemo, useState } from react;
import type { ReactNode, FC } from react;
import HugeCount from ./Te;
interface IProps {children?: ReactNode;
}const template: FCIProps () {const [time, setTime] useState(new Date());useEffect(() {console.log(渲染主体组件);setTimeout(() {setTime(new Date());}, 1000);}, [time]);return (div{time.getSeconds()}HugeCount //div);
};export default memo(template);子组件如下
import React, { memo, useEffect, useMemo, useState } from react;
import type { ReactNode, FC } from react;interface IProps {children?: ReactNode;data: {};bad: any;
}const template: FCIProps (props) {const [num, setNum] useState(100);const handleChange (e: React.ChangeEventHTMLInputElement) {setNum(Number(e.target.value));props.bad();};const hugeCount () {console.log(大量计算);return num;};const result useMemo(hugeCount, [num]);// const result useMemo(()hugeCount(), [num]);useEffect(() {console.log(渲染大量计算组件);});return (divinput typetext onChange{(e) handleChange(e)} /div大量计算结果:{result}/div/div);
};export default template;什么是纯组件? 组件 的核心特性是避免不必要的渲染它通过浅比较 props 和 state 来决定是否更新 UI。纯组件本身不抑制副作用它只是优化了渲染的过程。 先说state, 大量计算的子组件的state并未变化, 所以理应不变, 这时候先优化自身导出,用memo 这时候可了, 再说props,我在父组件传这个给子组件,然而秒数刷新子组件重新渲染,为什么 const data {name:23}
因为这个是引用类型,父组件秒数变化时刷新页面, 这个data会重新生成地址,所以props变了,子组件就刷新 ,那怎么办?
用useMemo,或者useState, 这2有缓存功能 const [data, setData] useState(33);
同理,你想传函数, 用useCallback,不然父组件重新渲染, 你子组件收到的函数是新的地址!! 然后重新渲染, 浪费性能 function bad() {console.log(hahah);}const badFun React.useMemo(() bad, []); 小useMemo细节,2种写法都可, 前者比如是一个无参数, 后者可传参 const result useMemo(hugeCount, [num]); const result useMemo(()hugeCount(), [num]);
