上海紫博蓝网站在线crm管理系统
有组件如下,上面变化秒数, 下面是大量计算的子组件,上面每一秒钟变化一次,这时候子组件会不断重新渲染, 浪费资源
父组件如下
import React, { memo, useEffect, useMemo, useState } from 'react';
import type { ReactNode, FC } from 'react';
import HugeCount from './Te';
interface IProps {children?: ReactNode;
}const template: FC<IProps> = () => {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: FC<IProps> = (props) => {const [num, setNum] = useState(100);const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {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 (<div><input type='text' 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]);