[react] 纯组件优化子

 有组件如下,上面变化秒数, 下面是大量计算的子组件,上面每一秒钟变化一次,这时候子组件会不断重新渲染, 浪费资源

父组件如下

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]);