hooks/useMemo 优化子组件重复渲染

  1. 父组件每次进行变化时子组件里面的方法都会再执行一遍,这样就造成了很大的性能损耗;
    下面是性能有问题的子组件,父组件点击志玲时子组件里面的changeXiaohong方法都会执行一遍
import React, { useState, useMemo } from "react";

function Example7() {
  const [xiaohong, setXiaohong] = useState("小红待客状态");
  const [zhiling, setZhiling] = useState("志玲待客状态");
  return (
    <>
      <button
        onClick={() => {
          setXiaohong(new Date().getTime());
        }}
      >
        小红
      </button>
      <button
        onClick={() => {
          setZhiling(new Date().getTime() + ",志玲向我们走来了");
        }}
      >
        志玲
      </button>
      <ChildComponent name={xiaohong}>{zhiling}</ChildComponent>
    </>
  );
}
function ChildComponent({ name, children }) {
  function changeXiaohong(name) {
    console.log("她来了,她来了。小红向我们走来了");
    return name + ",小红向我们走来了";
  }

  const actionXiaohong = changeXiaohong(name)   
// const actionXiaohong = useMemo(()=>changeXiaohong(name),[name]) 
  return (
    <>
      <div>{actionXiaohong}</div>
      <div>{children}</div>
    </>
  );
}
export default Example7;

控制台:点击了志玲,也会执行 changeXiaohong 函数
在这里插入图片描述

const actionXiaohong = changeXiaohong(name) 替换成 const actionXiaohong = useMemo(()=>changeXiaohong(name),[name]) 就可以解决组件重复渲染的问题

发布了17 篇原创文章 · 获赞 1 · 访问量 394
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览