目錄
高階組件：
要清楚每一步的返回值，對理解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
……
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 ]