React FreezeReact 狀態(tài)管理庫(kù)

React Freeze 是一個(gè) React 狀態(tài)管理庫(kù)，可有效避免 React 的 re-render，在不丟失組件和頁(yè)面狀態(tài)的情況下凍結(jié)組件樹(shù)并將其替換為占位視圖。

值得注意的是，雖然凍結(jié)的組件樹(shù)被替換為占位視圖，但實(shí)際的組件并沒(méi)有被卸載，因此它們的 React 狀態(tài)和相應(yīng)的本地視圖實(shí)例會(huì)被保留（用于 React-dom 的 DOM 元素或 React Native 應(yīng)用的平臺(tái)原生視圖），保持諸如滾動(dòng)位置、輸入狀態(tài)或加載的圖像（對(duì)于<img>組件）不變。

使用

從 npm 安裝react-freeze軟件包

yarn add react-freeze

在 app 導(dǎo)入Freeze組件

import { Freeze } from "react-freeze";

將需要凍結(jié)的組件包裹起來(lái)并傳遞freeze選項(xiàng)來(lái)控制是否應(yīng)該暫停該組件中的渲染：

function SomeComponent({ shouldSuspendRendering }) {
  return (
    <Freeze freeze={shouldSuspendRendering}>
      <MyOtherComponent />
    </Freeze>
  );
}