使用MEMO优化函数组件重复渲染问题

最新推荐文章于 2024-04-28 14:25:48 发布

chxuxu

最新推荐文章于 2024-04-28 14:25:48 发布

阅读量438

点赞数

文章标签：前端 javascript react.js

本文链接：https://blog.csdn.net/chx_xuxu/article/details/130451922

版权

本文介绍了如何使用React的memo和useMemo优化函数组件的渲染，避免无意义的重渲染。通过理解Object.is判断props变化的机制，合理使用memo包裹组件，结合useMemo缓存计算结果，可以提升应用性能。同时，文章讨论了优化props传递、避免状态更新和函数作为依赖项导致的问题，提供了解决方案。

摘要由CSDN通过智能技术生成

描述：

高阶组件memo 可以让被包装组件在它的props数据没有发生变化时避免无意义的渲染。

语法：

const MemoizedComponent = memo(SomeComponent, arePropsEqual?)

memo函数返回组件的记忆版本。只要组件的 props 没有改变，当它的父组件被重新渲染时，这个记忆版本通常不会被重新渲染。但 React 可能仍会重新渲染它：组件记忆是一种性能优化，而不是保证。

arePropsEqual 是一个接受两个参数的函数：组件以前的 props 和它的新 props；用于自定义处理是否发生了props改变。一般不用处理这个函数，react默认使用Object.is判断。Object.is() 方法判断两个值是否为同一个值，如果满足以下任意条件则两个值相等：

都是 undefined
都是 null
都是 true 或都是 false
都是相同长度、相同字符、按相同顺序排列的字符串
都是相同对象（意味着都是同一个对象的值引用）
都是数字且
都是 +0
都是 -0
都是 NaN
都是同一个值，非零且都不是 NaN
Object.is() 与 == 不同。== 运算符在判断相等前对两边的变量（如果它们不是同一类型）进行强制转换（这种行为将 "" == false 判断为 true），而 Object.is 不会强制转换两边的值。
Object.is() 与 === 也不相同。差别是它们对待有符号的零和 NaN 不同，例如，=== 运算符（也包括 == 运算符）将数字 -0 和 +0 视为相等，而将 Number.NaN 与 NaN 视为不相等。

使用方法：

从API描述来看，此功能是其最重要的用途。我们来看下面这个例子：

const Greeting = function Greeting({ name="world" }:any) {

  useEffect(()=>{
    console.log("Greeting重新渲染");
  });
  return <h1>Hello, {name}!</h1>;
};
export default function SkipRebuild (props: ISkipRebuildProps) {

  const [refresh,forceUpdate]=useState(0);
  return (
    <div className="m-Logo">
      <Button onClick={
        ()=>{
          forc