react中的forwardRef 和memo的区别?

前言

hello world欢迎来到前端的新世界


😜当前文章系列专栏:前端面试
🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹
💖感谢大家支持!您的观看就是作者创作的动力

介绍

forwardRef 和 memo 是 React 中用于性能优化和组件复用的两个高阶函数。

forwardRef

forwardRef:通常情况下,父组件通过 ref 属性传递给子组件的引用只能是 DOM 元素或类组件的实例。但有时候我们希望将 ref 传递给函数组件内部的某个具体元素或组件,这时就可以使用 forwardRef。

forwardRef 可以传递一个回调函数来获取从父组件传递过来的 ref,并将其传递给内部的某个特定元素或组件。这样,在父组件中使用 ref 引用子组件时,实际上获取到的是子组件内部指定的元素或组件。

const MyComponent = React.forwardRef((props, ref) => (
  <div ref={ref}>
    {/* 组件内容 */}
  </div>
));

举个例子

const ParentComponent = () => {
  const childRef = useRef();

  useEffect(() => {
    console.log(childRef.current); // 子组件内指定的元素或组件
  }, []);

  return (
    <div>
      <MyComponent ref={childRef} />
    </div>
  );
};

memo

memo:memo 是用于优化函数组件的渲染性能的高阶函数。它可以包裹一个函数组件,并返回一个经过优化的组件。

memo 会对函数组件的输入属性进行浅比较,如果输入属性没有发生变化,那么组件就不会重新渲染。只有当输入属性发生变化时,memo 才会重新调用函数组件进行渲染。

const MemoizedComponent = React.memo(MyComponent);

举个例子

const MyComponent = ({ text }) => {
  // 组件逻辑

  return <div>{text}</div>;
};

const MemoizedComponent = React.memo(MyComponent);

const ParentComponent = () => {
  const [text, setText] = useState('Hello');

  useEffect(() => {
    setTimeout(() => {
      setText('Hello, World!');
    }, 1000);
  }, []);

  return <MemoizedComponent text={text} />;
};

适用场景

forwardRef 的适用场景

  • 当你需要在父组件中直接操作子组件内部的特定元素或组件时,可以使用 forwardRef 将 ref 传递到函数组件内部的特定元素或组件中。
  • 例如,如果你希望在父组件中调用子组件的方法、访问子组件的某个 DOM 元素或组件实例等,就可以使用 forwardRef 来实现。
  • 在这种情况下,forwardRef 可以提高代码的可维护性和可读性,使父组件更方便地控制子组件。

memo 的适用场景

  • 当组件的输入属性没有发生变化时不希望重新渲染组件时,可以使用 memo 进行组件的浅比较。
    = 通过避免不必要的重复渲染,memo 可以显著提高组件的渲染性能,减少不必要的 DOM 操作,改善用户体验。
  • memo 适用于纯展示型组件或受控组件等,在这些组件中,输入属性的变化不会导致组件内部状态的改变,也不会引起副作用。

优点缺点

forwardRef 的优点:

提供了一种简单的方式将 ref 传递给函数组件内部的特定元素或组件。
可以让父组件更方便地操作子组件内部的特定元素或组件,提高了代码的可维护性和可读性。

forwardRef 的缺点:

增加了组件层级,可能会导致额外的性能开销。
可能会破坏组件的封装性,使组件与父组件之间产生紧密耦合。

memo 的优点:

通过浅比较可以避免不必要的组件渲染,提高了组件的性能。
对于纯展示型组件或受控组件等,可以有效减少不必要的 DOM 操作,改善用户体验。

memo 的缺点:

仅适用于基于输入属性的浅比较,如果组件的渲染依赖于其他因素(如上下文、状态等),则可能无法发挥优化作用。
使用 memo 进行浅比较会引入一定的计算开销,对于简单的组件可能不值得使用。

后言

创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: 这个错误提示是因为在函数组件不能直接使用 ref,需要使用 react.forwardRef() 来创建一个 ref。这个函数可以将 ref 传递给子组件,使得子组件可以访问到父组件的 ref。如果你想在函数组件使用 ref,请使用 react.forwardRef() 来创建一个 ref。 ### 回答2: React的组件可以是函数组件或类组件。但是,在函数组件,如果你想要访问该组件的ref属性,则无法直接给函数组件传递ref属性或者在函数组件使用ref属性。 这是因为函数组件是函数,它们不会像类组件那样通过实例对象进行访问。而ref属性是一种特殊的属性,它被React用于访问DOM元素或组件实例。因此,如果你向函数组件传递ref属性,那么尝试访问该ref属性就会失败。 那么如何在函数组件使用ref?答案是使用React.forwardRef()函数。React.forwardRef()是一个高阶函数,它接收一个React组件作为参数并返回一个新的组件。新组件接收props和ref两个参数,并将props传递给原始组件。这样,你就可以在函数组件使用ref属性,而ref属性将被传递到原始组件。 以下是使用React.forwardRef()的示例: ```javascript import React, { forwardRef } from 'react'; const MyComponent = forwardRef((props, ref) => { return <div ref={ref}>Hello World</div>; }); const App = () => { const ref = React.createRef(); return ( <div> <MyComponent ref={ref} /> </div> ); }; ``` 在上面的代码,MyComponent是一个函数组件,并使用React.forwardRef()转换为具有ref属性的新组件。在App组件,我们创建一个ref对象,并将其传递给MyComponent的ref属性。这样我们就可以通过ref.current属性来访问MyComponent的DOM元素或组件实例。 总之,函数组件不能直接使用ref属性,但是可以使用React.forwardRef()函数将函数组件转换为具有ref属性的新组件。这样,函数组件就可以像类组件一样使用ref属性来访问其子组件。 ### 回答3: 在React,Function Component(函数组件)是一种定义组件的方式,与Class Component(类组件)相比较,它更加简洁明了,并且可以方便地进行组合和复用。然而在使用Function Component时,我们需要注意到一点,那就是它们不能使用ref。这是因为Function Component没有实例,也就无法在其通过this.refs来获取DOM元素或组件实例。 如果我们在将ref应用于Function Component时,可能会遇到“function components cannot be given refs. attempts to access this ref will fail. did you mean to use react.forwardref()?”的错误提示。这在React 16.3及以上版本是特别严格的一个规则。在这种情况下,我们需要借助React.forwardRef()来解决这个问题。 React.forwardRef()是一个高阶函数,它接收一个Function Component作为参数,并返回一个新的组件。新的组件,可以通过props参数来获取ref,并将其传递给原始的Function Component。这样一来,我们就可以通过ref来访问到Function Component内部的DOM元素或组件实例了。例如: ``` const MyFunctionComponent = React.forwardRef((props, ref) => { return <div ref={ref}>Hello World!</div>; }); ``` 在上面的代码,我们使用React.forwardRef()来将MyFunctionComponent转换为可以使用ref的Component。在函数组件,我们通过参数ref来访问DOM元素,并将其传递给div元素的ref属性。 需要注意的是,React.forwardRef()只能用于Function Component,不能用于普通的JavaScript函数或Class Component。而且,还需要注意到,使用ref时需要考虑到组件的生命周期等问题,以确保能够正常的获取到DOM元素或组件实例。 综上所述,使用React.forwardRef()可以让我们在Function Component使用ref,并且更加方便地操作DOM元素和组件实例。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鋜斗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值