繁体   English   中英

如何创建一个永远不会重新渲染的 React 组件

[英]How to create a React component that will never be re-rendered

是否可以创建一个永远不会重新渲染的 React 组件,即使 props 或 state 发生变化,或者它正在列表中渲染? 我在其他地方看到的答案使用shouldComponentUpdateReact.memouseMemo ,但所有这些在文档中都有注释:

应该组件更新

此方法仅作为性能优化存在。 不要依赖它来“阻止”渲染,因为这会导致错误。

反应备忘录

此方法仅作为性能优化存在。 不要依赖它来“阻止”渲染,因为这会导致错误。

使用备忘录

您可能依赖 useMemo 作为性能优化,而不是语义保证。 在未来,React 可能会选择“忘记”一些以前记忆的值并在下一次渲染时重新计算它们,例如为屏幕外组件释放内存。 编写您的代码,使其在没有 useMemo 的情况下仍能正常工作——然后添加它以优化性能。

是否有推荐的方法来创建永远不会重新渲染的组件(类或功能)?

用例:我有一个组件列表,每个组件本质上都是围绕Quill (富文本编辑器)的 React 包装器。 由于它们各自管理自己的状态,因此我不希望在列表更改时重新呈现任何现有组件,或者内容将被重置/清除。 我目前正在使用shouldComponentUpdate并始终返回 false,这似乎有效,但文档让我好奇是否有更好的方法(而且我找不到其他人提出建议)。

作为实时 Web 应用程序体验,不建议声明 less 组件。 但是我们可以创建没有重新渲染的反应组件

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> import React from 'react'; const App = () => { return (<h1>Only change when object change</h1>) } export default React.memo(App);

import React from 'react';
const App = () => {
  return (<h1>Only change when object change</h1>)
}
export default React.memo(App);

是的,可以创建一个永远不会重新渲染的 React 组件,即使它的 props 或状态发生变化,或者如果它正在列表中渲染。 这可以通过使用“React.memo”高阶组件来实现,它包装了一个功能组件,并且仅在其依赖项之一发生更改时才重新呈现它。

这是一个如何创建永远不会重新渲染的组件的示例:

import React from 'react';

const MyComponent = (props) => {
  // Render component here
  return <div>{props.message}</div>;
}

export default React.memo(MyComponent);

'React.memo' 高阶组件使用浅比较来比较包装组件的先前和当前道具。 如果道具没有改变,包裹的组件将不会被重新渲染。

请记住,使用“React.memo”可以通过防止不必要的重新渲染来提高应用程序的性能,但如果过度使用它也会使您的代码更难理解和维护。 仔细考虑使用“React.memo”的权衡并仅在实际需要时使用它是很重要的。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM