[react] 纯组件优化子

最新推荐文章于 2025-08-13 09:25:50 发布

高山我梦口香糖

最新推荐文章于 2025-08-13 09:25:50 发布

阅读量624

点赞数 2

CC 4.0 BY-SA版权

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/Madman528/article/details/144859248

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

父组件如下

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