诸暨北京网站制作公司有哪些,wordpress 子主题路由,网页设计与网站建设选择题,用jquery做网站文章目录 前言介绍forwardRefmemo适用场景优点缺点后言 前言 hello world欢迎来到前端的新世界 #x1f61c;当前文章系列专栏#xff1a;前端面试 #x1f431;#x1f453;博主在前端领域还有很多知识和技术需要掌握#xff0c;正在不断努力填补技术短板。(如果出现错… 文章目录 前言介绍forwardRefmemo适用场景优点缺点后言 前言 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 (divMyComponent ref{childRef} //div);
};
memo memomemo 是用于优化函数组件的渲染性能的高阶函数。它可以包裹一个函数组件并返回一个经过优化的组件。 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 进行浅比较会引入一定的计算开销对于简单的组件可能不值得使用。 后言 创作不易要是本文章对广大读者有那么一点点帮助 不妨三连支持一下您的鼓励就是博主创作的动力
