如何創建一個永遠不會重新渲染的 React 組件

Question

是否可以創建一個永遠不會重新渲染的 React 組件，即使 props 或 state 發生變化，或者它正在列表中渲染？ 我在其他地方看到的答案使用shouldComponentUpdate 、 React.memo或useMemo ，但所有這些在文檔中都有注釋：

應該組件更新：

此方法僅作為性能優化存在。 不要依賴它來“阻止”渲染，因為這會導致錯誤。

反應備忘錄：

此方法僅作為性能優化存在。 不要依賴它來“阻止”渲染，因為這會導致錯誤。

使用備忘錄：

您可能依賴 useMemo 作為性能優化，而不是語義保證。 在未來，React 可能會選擇“忘記”一些以前記憶的值並在下一次渲染時重新計算它們，例如為屏幕外組件釋放內存。 編寫您的代碼，使其在沒有 useMemo 的情況下仍能正常工作——然后添加它以優化性能。

是否有推薦的方法來創建永遠不會重新渲染的組件（類或功能）？

用例：我有一個組件列表，每個組件本質上都是圍繞Quill （富文本編輯器）的 React 包裝器。 由於它們各自管理自己的狀態，因此我不希望在列表更改時重新呈現任何現有組件，或者內容將被重置/清除。 我目前正在使用shouldComponentUpdate並始終返回 false，這似乎有效，但文檔讓我好奇是否有更好的方法（而且我找不到其他人提出建議）。

Answer 1

作為實時 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);

Answer 2

是的，可以創建一個永遠不會重新渲染的 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”的權衡並僅在實際需要時使用它是很重要的。