React 和 ES6

对象的解构赋值：
示例代码： 对象的解构，数组的解构，以及扩展运算符…，数组使用…扩展运算符，则新对象为数组；对象使用扩展运算符，则新对象为对象；

class App extends Component{
    constructor(props){
        super(props);
        this.state = {
            name: 'React & ES6',
            lesson: '6',
            teacher: {
                teacherName: 'David',
                age: 26
            },
            skills: ['Vue', 'React', 'NodeJS', 'JS', 'Angular'],
            friend: {
                name: 'Jim'
            }
        };
    }
    render(){
        let {
            name,
            lesson,
            teacher: {
                teacherName,
                age
            },
            skills: [s1, s2, s3, ...rest],
            friend: {
                name: fName
            }
        } = this.state;
        // rest为一个数组
        return (<div>
            <div>{name} - {lesson}</div>
            <div>{teacherName} - {age}</div>
            <div>{s1} - {s2} - {s3}</div>
            <div>{rest}</div>
            <div>{fName}</div>
        </div>);
    }
}

扩展运算符示例代码：

class User extends Component {
    render(){
        let {
            name,
            age,
            lesson,
            ...rest
        } = this.props;
        return (<div {...rest}>
            {name} - {age} - {lesson}
        </div>);
    }
}
class App extends Component{
    constructor(props){
        super(props);
        this.state = {
            name: 'David',
            age: 26,
            lesson: 'React'
        };
    }
    render(){
        let {
            name,
            age,
            lesson
        } = this.state;
        // rest为一个数组
        return (<div>
            <User name={name} age={age} lesson={lesson} style={{color: 'red'}} onClick={(e)=> alert('Hello')}/>
        </div>);
    }
}

类的继承：

子类中可以通过super.render() 来调用父类的render方法，来渲染父组件。

class LoadingComponent extends Component {
    constructor(props){
        super(props);
        this.state = {
            loading: false
        };
    }
    render(){
        let {
            loading
        } = this.state;
        return (<div>
            {loading ? 'loading...' : ''}
        </div>);
    }
    showLoading(){
        this.setState({
            loading: true
        });
    }
    hideLoading(){
        this.setState({
            loading: false
        });
    }
}
class App extends LoadingComponent{
    render(){
        return (<div>
            {super.render()}
            APP
        </div>);
    }
    componentDidMount(){
        this.showLoading();
        setTimeout(()=>{
            this.hideLoading();
        }, 3000);
    }
}

Proxy：
代码示例：

对象的代理，示例中展示了对对象get，set的监控。

let obj = new Proxy({
  a: 10,
  b: 20
}, {
    get: function(target, key) {
        console.log('get key', key);
        return target[key] * 10;
    },
    set: function(target, key, value) {
        console.log('set key', key);
        return Reflect.set(target, key, value);
    }
});
window.obj = obj;

控制台里测试：

obj.a
get key a
100
obj.a = 11
set key a
11
obj.a
get key a
110

装饰器Decorator：
方法装饰器： 在下面的例子中，当调用Math的add方法时，会先调用装饰器方法log。

组件装饰器：

需要在User Setting里设置 “javascript.implicitProjectConfig.experimentalDecorators”: true, 来关闭warning。
示例中的称为反向继承，组件装饰器的这种写法比继承写法更加的优雅。

function loading(com){
    class LoadingComponent extends com{
        constructor(props){
            super(props);
            this.state = {
                loading: false
            };
        }
        render(){
            let {
                loading
            } = this.state;
            return (<div>
                {super.render()}
                {loading ? 'loading...' : ''}
            </div>);
        }
        showLoading(){
            this.setState({
                loading: true
            });
        }
        hideLoading(){
            this.setState({
                loading: false
            });
        }
    }
}
@loading
class App extends Component{
    render(){
        return (<div>
            APP
        </div>);
    }
    componentDidMount(){
        this.showLoading();
    }
}

async，await 和promise
示例代码： axiso是网络请求库，需要先安装。

import axiso from 'axiso';
class App extends Component{
    render(){
        return (<div>
            APP
        </div>);
    }
    componentDidMount(){
      axiso.get('http://localhost:7777/api').then((res) => {
        console.log(res.data);
      });
    }
}

第二种写法：

async写在异步方法前，await 后的方法需要返回的是一个promise对象。

import axiso from 'axiso';
class App extends Component{
    render(){
        return (<div>
            APP
        </div>);
    }
    async componentDidMount(){
      let res = await axiso.get('http://localhost:7777/api');
      console.log(res.data);
    }
}

webpack在编译的时候，上面的代码会被编译成下面：
把await后面的代码放进then里面了。

import axiso from 'axiso';
class App extends Component{
    render(){
        return (<div>
            APP
        </div>);
    }
    async componentDidMount(){
      axiso.get('http://localhost:7777/api').then(() => {
         console.log(res.data);
      });
    }
}