react-localstorage

2018-08-08 admin

react-localstorage是什么

什么是react-localstorage,A mixin for automatically synchronizing a component's state with localStorage.

react-localstorage介绍、react-localstorage使用

Simply synchronize a component’s state with localStorage, when available.

Usage

A simple component:

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:

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.

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.

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.

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37536.html

文章标题:react-localstorage

回到顶部