72react_高阶组件_LocalStorage

在三穗等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供成都网站设计、网站建设 网站设计制作按需网站策划,公司网站建设,企业网站建设,品牌网站建设,成都全网营销推广,外贸营销网站建设,三穗网站建设费用合理。

目录

高阶组件：...1

Local Storage：...3

高阶组件：

要清楚每一步的返回值，对理解3-4层的箭头函数有帮助；

装饰器，新版ES2016中装饰器的支持，且只能装饰类；

带参装饰器；

例：

对Root组件进行增强，如在Root的div外部再加入其它div；

import React from 'react';

import ReactDom from 'react-dom';

// let Root = props =>

// function Wrapper(comp, props) {   //X，尝试如何能完成装饰功能

//     // return comp;

//     // return comp(props);

//     return

// }

// let NewRoot = Wrapper(Root, name='magedu');

// ReactDom.render(, document.getElementById('root'));

// function Wrapper(Component, props) {   //X，没法传props，需进一步柯里化

//     return (

// }

// ReactDom.render(, document.getElementById('root'));

// function Wrapper(Component) {   //可用箭头函数简化

//     return function(props) {

//         return (

//     }

// }

let Wrapper =Component => props =>

@Wrapper

class Root extends React.Component {

   render() {

       return (

    }

}

ReactDom.render(,document.getElementById('root'));

例，带参装饰器;

let Wrapper =id => Component => props =>   //增加id参数

@Wrapper('wrapper')

class Root extends React.Component {

   render() {

       return (

    }

}

ReactDom.render(,document.getElementById('root'));

例：

let Wrapper =id => Component => props =>

let Root =props =>

let NewRoot =Wrapper('wrapper')(Root);   //装饰器的@只能用于装饰类，若要装饰函数这样写

ReactDom.render(,document.getElementById('root'));

Local Storage：

browser端持久化方案之一，HTML5标准增加的技术；

Local Storage是为了存储交到的数据，如json；

是key-value存储；

数据会存储在不同的域名下面；

不同browser对单个域名下存储数据的长度支持不同，有的最多支持2M；

browser-->F12，Application-->Storage下：

注：

Session Storage，会话级的，browser关闭会话结束，数据清除；

Local Storage、Session Storage、Cookies是kv存储；

IndexedDB、Web SQL可直接用SQL语句；

store.js：

是一个兼容所有browser的Local Storage包装器，不需要借助cookie或flash；

store.js会根据浏览器自动选择使用Local Storage或global storage或userData来实现本地存储功能；

https://github.com/marcuswestin/store.js

查看文档中的API：

store.set('user',{name:'marcus'})

store.get('user')   #类似py的dict，支持默认值

store.clearAll()

store.each(function(value,key) {

         console.log(key,'==',value)

})   #迭代，注意key、value的顺序，是反的

var store = require('store')   #同import store from 'store'，用新语法得用babel转译

$ npm i store --save

……

+ store@2.0.12

added 69 packages in 29.036s

例：

E:\git_practice\js\react-mobx-starter-master\test.js，注意路径；

let store =require('store');

store.set('user','jowin');

console.log(store.get('user'));

store.remove('user');

console.log(store.get('user'));

console.log(store.get('user','default_value'));

store.set('user', {name: 'jowin',age: 28});

console.log(store.get('user').name,store.get('user').age);

store.set('school', {name: 'magedu'});

store.each(function(value,key) {

   console.log(key,'==',value)

});

输出：

jowin

undefined

default_value

jowin 28

user == { name: 'jowin', age: 28 }

school == { name: 'magedu' }

date =new Date();

console.log(date);

console.log(date.valueOf());

输出：

2018-11-15T01:13:11.079Z

1542244391079

m =new Map();

m.set(1,'a');

m.set(2,'b');

m.set(3,'c');

console.log(m);

let t =m.forEach((value,key)=> console.log(key,'==',value));

console.log(t);

t = [...m.values()].map(item => item +1);

console.log(t);

k = [...m.keys()].map(item => item +1);

console.log(k);

输出：

Map { 1 => 'a', 2 => 'b', 3 => 'c' }

1 '==' 'a'

2 '==' 'b'

3 '==' 'c'

undefined

[ 'a1', 'b1', 'c1' ]

[ 2, 3, 4 ]