React FreezeReact 状态管理库

联合创作 · 2023-09-22 01:39

React Freeze 是一个 React 状态管理库,可有效避免 React 的 re-render,在不丢失组件和页面状态的情况下冻结组件树并将其替换为占位视图。

值得注意的是,虽然冻结的组件树被替换为占位视图,但实际的组件并没有被卸载,因此它们的 React 状态和相应的本地视图实例会被保留(用于 React-dom 的 DOM 元素或 React Native 应用的平台原生视图),保持诸如滚动位置、输入状态或加载的图像(对于<img>组件)不变。

使用

从 npm 安装react-freeze软件包

yarn add react-freeze

在 app 导入Freeze组件

import { Freeze } from "react-freeze";

将需要冻结的组件包裹起来并传递freeze选项来控制是否应该暂停该组件中的渲染:

function SomeComponent({ shouldSuspendRendering }) {
  return (
    <Freeze freeze={shouldSuspendRendering}>
      <MyOtherComponent />
    </Freeze>
  );
}
浏览 8
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报