父子组件都使用memo，兄组件切换显示，弟组件重新渲染，memo为啥失效？

作者站长头像
站长
· 阅读数 4

父组件：

<div className={'myScreenDetail'}>
      {isView && <ImageView imgUrl={imgSrc} setIsView={setIsView} />}
      <ImgShow />
    </div>

子组件：

<ImgShow />
 useEffect(() => {
    console.log('渲染了');
  }, []);

父组件和子组件都是用了memo:父子组件都使用memo，兄组件切换显示，弟组件重新渲染，memo为啥失效？,切换isView，理应ImgShow组件不重新渲染，但是isView切换，都会打印“渲染了”，memo感觉失效了，这是为什么啊？求大佬指教父子组件都使用memo，兄组件切换显示，弟组件重新渲染，memo为啥失效？

回复
1个回答
avatar
test
2024-06-25

请把 App 组件内部定义的其他组件全部提取出去 单独定义，因为 app更新 这些函数都会重新定义

import "./styles.css";
import { memo, useEffect, useState } from "react";
export default function App() {
  const [isView, setIsView] = useState(false);

  useEffect(() => {
    console.log("渲染1");
  });

  return (
    <div className="App">
      <ImgShow setIsView={setIsView} isView={isView}/>
    </div>
  );
}

const Test = memo(() => {
  useEffect(() => {
    console.log("渲染2");
  });
  return <div>测试1111111</div>;
});

const ImgShow = memo(({setIsView , isView}) => {
  
  useEffect(() => {
    console.log("渲染3");
  });
  return (
    <div>
      <div
        style={{
          width: "100px",
          height: "100px",
          backgroundColor: "red"
        }}
        onClick={() => {
          setIsView(!isView);
          console.log(5555555, isView);
        }}
      ></div>
      <Test />
    </div>
  );
});
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容