React Freeze

React 状态管理库
授权协议 MIT
开发语言 TypeScript
所属分类 Web应用开发、 常用JavaScript包
软件类型 开源软件
地区 不详
投 递 者 逑阳泽
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

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>
  );
}
  • 搭建React源码本地调试环境         要调试react的源码,就需要在使用cli创建的项目中,把reactd打包版本切换为本地的源代码,源代码需要在react项目中下载到本地,然后在cli创建的项目中修改相关的配置,使得项目远行时从本地的react源代码目录中查找引用相对应的react packages源码包。这样我们在进行本地调试时就可以清楚地知道运行的详细过程。 JSX转换为Reac

  • 这里介绍一下React18的4个新特性: Automatic batching Concurrent APIs SSR for Suspense New Render API Automatic bacthing 在 React 中使用setState来进行dispatch组件的State变化,当setState在组件中被调用后,并不会立即触发重新渲染。React 会执行全部事件处理函数,然后触发

  • 目录 1.前言: 2.为什么要用对象冻结 ? 3 特点: 4.语法 5.代码示例: 6.核心注意点  6.1 代码实现示例:   1.前言: 在正式进入正文前,先说下const const 定义的是常量,且不能再修改,但是它只能对简单类型的数据生效,对于复杂类型就无效了(const保存的是引用地址),如果想冻结对象的话,那就可以使用今天介绍的对象冻结。 vue2中的Object.definePro

  • 介绍 (Introduction) Adobe After Effects can be an intuitive way to generate web animations, but there has historically been problems converting these animations to web apps. It is usually necessary to u

  • 前言: react与Vue谁更好一直是一个比较争议的问题,这里我先直接引用一下Vue设计者尤雨溪的回答 虽然Vue和React两者在定位上有一些交集,但差异也是很明显的。 Vue 使用的是 web 开发者更熟悉的模板与特性,Vue的API跟传统web开发者熟悉的模板契合度更高,比如Vue的单文件组件是以模板+JavaScript+CSS的组合模式呈现,它跟web现有的HTML、JavaScript

  • 创建react元素 jsx被Babel编译为React createElement方法在调用后返回的就是ReactElement,就是vitualDom。 createElement 文件位置:packages/react/src/ReactElement.js /** 创建 React Element type 元素类型 config 配置属性 包含props属性和特殊属性 childr

  • react核心知识笔记 10.6更新 1、对象的不可变性:原理Object.freeze()不可扩展不可删除不可修改 17+的版本 扩展:Object.seal()不可扩展不可删除可以修改 注意点:Object.freeze()默认是浅冻结,深层采用递归。应用场景:immutable不可变数据类型,react内部采用freeze。immer相对于immutable更轻量。 function dee

  • 在看VUE官方文档讲到data的时候有提到这样一句话: 这里唯一的例外是使用 Object.freeze(),这会阻止修改现有的 property,也意味着响应系统无法再追踪变化 所以记录一下Object.freeze()的作用. Object.freeze()方法可以冻结一个对象 一个被冻结的对象再也不能被修改 不能添加新属性 不能删除已有属性 不能修改已有属性的可枚举性、可配置性、可写性 不能

 相关资料
  • 来自服务器的数据以及是否挂起或导致错误 UI状态如切换,警报和错误消息 自定义主题,凭据和本地化 许多其他类型的状态 Redux using ng2-redux Angular Services and RxJS(推荐)

  • 管理应用程序状态是个难题。您需要在多个后端,Web workers和UI组件之间进行协调。 像Redux和Flux这样的模式旨在通过使这种协调更加明确来解决这个问题。在本文中,我将展示如何使用RxJS在几行代码中实现类似的模式。然后我将展示如何使用这种模式来实现一个简单的Angular 2应用。 在谈论架构模式时,我喜欢从描述其核心属性开始。你可以写在餐巾背上的东西。The devil, of c

  • 建议使用基于redux封装出来的rematch, anujs也自带了这个框架。 rematch的官网 https://github.com/rematch/rematch resolve: { alias: { react: "anujs", "react-dom": "anujs", rematch: "anujs/dist/Rematch.js

  • 属性是用于标识您的应用程序的操作的唯一字符串。 使用lisp-case(例如)是一个常见的惯例,但是只要在整个项目中是一致的,您可以随意使用任何写法。 示例: 为了简化操作创建,您可以创建一个工厂函数来处理应用程序中重复的部分: 由此产生的创建操作变得更加简洁和干净:

  • Mpx 参考 vuex 设计实现了外部状态管理系统(store),其中的概念与 api 与 vuex 保持一致,为了更好地支持状态模块管理和跨团队合作场景,我们提出多实例 store 作为 vuex 中 modules 的替代方案,该方案在模块拆分及合并上的灵活性远高于 modules。 介绍 Store 是一个全局状态管理容器,能够轻松实现复杂场景下的组件通信需求,store 与简单的全局状态对

  • 类 Flux 状态管理的官方实现 由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长。为了解决这个问题,Vue 提供 vuex: 我们有受到 Elm 启发的状态管理库。vuex 甚至集成到 vue-devtools,无需配置即可访问时光旅行。 React 的开发者请参考以下信息 如果你是来自 React 的开发者,你可能会对 vuex 和 redux 间的差异表示关注,

  • Redux应用程序中的Reducer不应该改变state,而是返回一个副本,并且无副作用。 这鼓励你把你的应用程序想象成从一系列事件中“计算”的UI。 让我们来看看一个简单的计数器reducer。 我们可以看到,我们正在传递一个初始状态和一个动作。为了处理每个动作,我们设置了一个switch语句。而不是每个reducer需要显式订阅分发器,每个动作都会传递到每个reducer,它处理它感兴趣的动作

  • 超文本传输​​协议(HTTP)是一种无状态协议。 当客户端与服务器断开连接时,ASP.NET引擎会丢弃页面对象。 这样,每个Web应用程序都可以向上扩展以同时处理大量请求,而不会耗尽服务器内存。 但是,需要一些技术来在请求之间存储信息并在需要时检索它。 此信息,即当前会话中当前用户的所有控件和变量的当前值称为State。 ASP.NET管理四种类型的状态: 查看状态 控制状态 会话状态 申请国 查