js的===比较及react hook的memo使用

最新推荐文章于 2025-04-24 17:39:50 发布

luxiaopengyou

最新推荐文章于 2025-04-24 17:39:50 发布

阅读量216

点赞数

CC 4.0 BY-SA版权

分类专栏： react js 文章标签： react

本文链接：https://blog.csdn.net/luxiaopengyou/article/details/116006627

js 同时被 2 个专栏收录

19 篇文章

订阅专栏

react

6 篇文章

订阅专栏

本文探讨了React Hook中的`useRef`如何用于优化性能，通过保存对象引用避免不必要的组件渲染。`useMemo`与`useCallback`的比较也在文中提及，它们在确保对象地址不变时能有效减少组件更新。此外，还展示了在实际代码中如何利用这些Hook来提升应用效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如以下代码所示：
1、b是对a的引用，两者都是指向同一个地址，所以首先输出true
2、b修改了key，也就是修改了那个地址上的内容，但是地址没变，所以a还是===b。

let a = { value: 1 };
let b = a;
console.log(b === a);

b.value = 2;
console.log(b === a);

结论

===比较的是地址

拓展

1、react hook的memo比较的是preProp和curProp的某个对象getTextLen，这个对象只要地址没变，就不会更新。
2、所以可以用useRef的current把getTextLen保存起来，如此每回虽然更改current的值，但是getTextLen是个引用，每回都指向同一个地址，可以起到缓存作用。

function EditArticle() {
  const [title, setTitle] = useState('');
  const getTextLen = useRef(() => [0, 0]);
  getTextLen.current = () => [title.length, content.length];

  return (
    <div className="App">
      文章标题 <input value={title} onChange={e => setTitle(e.target.value)} />
            <MemoArticleTypeSetting getTextLen={getTextLen} />  // 使用子组件
    </div>
  );
}

//子组件
const ArticleTypeSetting = ({ getTextLen }) => {
  console.log(' --- ArticleTypeSetting 组件重新渲染 --- ');
  
    console.log(
      '埋点 >>> 切换类型，当前「标题」和「内容」长度：',
      getTextLen.current(),
    );
  };

  return (
    <div>
      文章类型组件，当选择类型时上报「标题」和「内容」长度
    </div>
  );
};
const MemoArticleTypeSetting = memo(ArticleTypeSetting, (pre, cur) => {
  return pre.getTextLen === cur.getTextLen;
});