react中的forwardRef 和memo的区别解析
作者：斗
介绍
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 进行浅比较会引入一定的计算开销，对于简单的组件可能不值得使用。
到此这篇关于react中的forwardRef 和memo的区别？的文章就介绍到这了,更多相关react中的forwardRef 和memo的区别？内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！