react-localstorage:Facebook的React的简单的组件化本地存储实现

  • g2_615186
    了解作者
  • 78KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-04-06 06:33
    上传日期
React本地存储 只需将组件的状态与localStorage同步(如果可用)。 这是一种老式的Mixin,这意味着它可能已经与您的React应用程序兼容了几年。 如果您是一位年轻的程序员,则可能更喜欢。 安装 npm i react-localstorage --save 用法 一个简单的组件: const React = require ( 'react' ) ; const LocalStorageMixin = require ( 'react-localstorage' ) ; const reactMixin = require ( 'react-mixin' ) ; // This is all you need to do @ reactMixin . decorate ( LocalStorageMixin ) class TestComponent exte
react-localstorage-master.zip
  • react-localstorage-master
  • lib
  • warning.js
    1.5KB
  • test
  • .eslintrc
    271B
  • react-localstorage.test.js
    6.8KB
  • .eslintrc
    108B
  • yarn.lock
    176.7KB
  • .babelrc
    177B
  • .npmignore
    30B
  • react-localstorage.js
    4KB
  • jest.config.js
    65B
  • README.md
    2.8KB
  • .gitignore
    14B
  • CHANGELOG.md
    744B
  • package.json
    1.2KB
内容介绍
React-LocalStorage ================== Simply synchronize a component's state with `localStorage`, when available. This is an old-style Mixin, which means it's probably compatible with your React application if it's a few years old. If you're a hip young programmer, you might prefer [a hook, instead](https://usehooks.com/useLocalStorage/). # Install [![React-LocalStorage](https://nodei.co/npm/react-localstorage.png)](https://npmjs.org/package/react-localstorage) ```sh npm i react-localstorage --save ``` Usage ----- A simple component: ```javascript const React = require('react'); const LocalStorageMixin = require('react-localstorage'); const reactMixin = require('react-mixin'); // This is all you need to do @reactMixin.decorate(LocalStorageMixin) class TestComponent extends React.Component { static displayName = 'TestComponent'; state = {counter: 0}; onClick() { this.setState({counter: this.state.counter + 1}); } render() { return <span onClick={this.onClick}>{this.state.counter}</span>; } } ``` Options ------- The key that state is serialized to under `localStorage` is chosen with the following code: ```javascript function getLocalStorageKey(component) { if (component.getLocalStorageKey) return component.getLocalStorageKey(); if (component.props.localStorageKey === false) return false; if (typeof component.props.localStorageKey === 'function') return component.props.localStorageKey.call(component); return component.props.localStorageKey || getDisplayName(component) || 'react-localstorage'; } ``` If you are synchronizing multiple components with the same `displayName` to localStorage, you must set a unique `localStorageKey` prop on the component. You may set a function as well. Alternatively, you may define the method `getLocalStorageKey` on the component's prototype. This gives you the freedom to choose keys depending on the component's props or state. To disable usage of localStorage entirely, pass `false` or a function that evaluates to `false`. Filtering --------- If you only want to save parts of state in localStorage, set `stateFilterKeys` to an array of strings corresponding to the state keys you want to save. ```javascript getDefaultProps: function() { return { stateFilterKeys: ['one', 'two'] }; } ``` You can do this by setting a `stateFilterKeys` prop or define the method `getStateFilterKeys` on the component's prototype. ```javascript getStateFilterKeys: function() { return ['one', 'two']; } ``` Server Rendering ---------------- `LocalStorageMixin` will call `setState` on `componentDidMount`, so it will not break server rendering checksums. This is new as of `0.2.0`. Tests ------ We use `jest` as the test runner. To run the test, simply `yarn install` all the dependencies and run `yarn test`.
评论
    相关推荐
    • CProgrammingNotes:这是Facebook C编程组的C存储
      #C编程说明 小组的注意事项: :
    • Facebook开源的时序数据库存储引擎Beringei.zip
      Beringei 是一个高性能的、内存型的时序数据库存储引擎。时间序列通常用作统计,仪表和计数器的表示,用于监视系统的性能和运行状况。Beringei 有以下特性:支持非常快的内存存储,由磁盘支持持久化非常高效的流压缩...
    • DeleteFB:自动清理您的Facebook状态
      我无法保证Facebook不会将数据永远存储在冷存储中。 但是,此工具的目的更多是为了清理您的在线形象,而不必担心您几年前写的内容。 就我个人而言,我这样做是为了减少与我的Facebook个人资料的联系(因此感到需要...
    • Facebook的WindowsSDKwinsdkfb.zip
      winsdkfb 是为 Facebook 准备的 Windows SDK,允许开发者集成 Facebook 到 Windows 应用。支持功能:认证登录退出 登录按钮 资料图片控制 对话框反馈对话框 请求对话框 图像自定义存储回复用户反馈 上传图片 类似 ...
    • Facebook Fresco
      Fresco是Facebook最新推出的一款用于Android应用中展示图片的强大图片库,可以从网络、本地存储和本地资源中加载图片。其中的Drawees可以显示占位符,直到图片加载完成。而当图片从屏幕上消失时,会自动释放内存。
    • 下沉:使用Facebook个人资料照片为您的Google联系人提供高分辨率照片
      Sink将您的每个Google联系人与他们的Facebook个人资料链接起来,并存储这些链接以进行快速更新。 安装 要安装所需的依赖项,请运行以下命令。 这仅需要执行一次。 $ pip install -r requirements.txt Google OAuth...
    • facebook-clone
      用于和存储的多个后端。 富有表现力,直观的 。 数据库不可知。 。 。 Laravel易于访问,功能强大,并提供大型,强大的应用程序所需的工具。 学习Laravel Laravel拥有所有现代Web应用程序框架中最广泛,最...
    • Messer:Facebook Messenger的命令行消息传递
      Facebook Messenger的命令行消息传递 Messer是您的终端的功能丰富的Facebook Messenger客户端。 发送和接收消息,查看聊天记录等等! 安装 $ npm install -g messer 快速开始 需要node版本12.x 安装messer 运行...
    • Facebook-CryptD-Messages:Facebook的CryptD消息
      下载存储库中所有文件的zip版本 在任何地方提取下载的文件 打开您的Chromium或Chrome浏览器,然后转到“设置”>“扩展程序” 启用开发人员模式以能够添加解压缩的扩展 单击“加载解压缩的扩展名”按钮,然后导航到...
    • GaussDB_100_1.0.1-DATABASE-REDHAT-64bit.tar.gz
      guassdb100在redhat上安装包,单机部署的包,安装步骤请看我的文中介绍,经过大量实验搭建总结出来的文档