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 => <div>my name is {props.name}</div>;

?

// function Wrapper(comp, props) {?? //X，嘗試如何能完成裝飾功能

//???? // return comp;

//???? // return comp(props);

//???? return <div>Test {comp}<br />{props}</div>;

// }

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

// ReactDom.render(<NewRoot name='magedu' />, document.getElementById('root'));

?

// function Wrapper(Component, props) {?? //X，沒法傳props，需進一步柯里化

//???? return (<div>

//???????? {props.name}

//???????? <hr />

//???????? <Component />

//???? </div>)

// }

// ReactDom.render(<Wrapper name='magedu'/>, document.getElementById('root'));

?

// function Wrapper(Component) {?? //可用箭頭函數簡化

//???? return function(props) {

//???????? return (<div>

//???????????? {props.name}

//???????????? <br />

//???????????? <Component />

//???????? </div>)

//???? }

// }

?

let Wrapper = Component => props =>

??? <div>

??????? {console.log(props,typeof(props))}?? // Object {name: "magedu"} "object"

??????? {props.name}

??????? <hr />

??????? {/* <Component name={props.name}/> */}

??????? <Component {...props}/>?? //類似py的kwargs，解構，給組件增加了屬性；可使增強后的Root擁有name屬性

??? </div>

?

@Wrapper

class Root extends React.Component {

??? render() {

??????? return (<div>

??????????? my name is {this.props.name}?? {/*Root也顯示name*/}

??????????? <br />

??????? </div>)

??? }

}

?

ReactDom.render(<Root name='magedu' />, document.getElementById('root'));

?

?

例，帶參裝飾器;

let Wrapper = id => Component => props =>?? //增加id參數

??? <div id='rooot'>

??????? {console.log(props,typeof(props))}

??????? {props.name}

??????? <hr />

??????? {/* <Component name={props.name}/> */}

??????? <Component {...props}/>

??? </div>

?

@Wrapper('wrapper')

class Root extends React.Component {

??? render() {

??????? return (<div>

??????????? my name is {this.props.name}

??????????? {console.log(this.props)}

??????????? <br />

??????? </div>)

??? }

}

?

ReactDom.render(<Root name='magedu' />, document.getElementById('root'));

?

例：

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

??? <div id='rooot'>

??????? {console.log(props,typeof(props))}

??????? {props.name}

??????? <hr />

??????? {/* <Component name={props.name}/> */}

??????? <Component {...props}/>

??? </div>

?

let Root = props =>

??? <div>

??????? Root

??????? <br />

??????? {props.name}

??? </div>

let NewRoot = Wrapper('wrapper')(Root);?? //裝飾器的@只能用于裝飾類，若要裝飾函數這樣寫

ReactDom.render(<NewRoot name='magedu' />, 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 ]

?

?

?

?

?

?