ES6学习笔记

1. Arrow Function
   箭头函数与传统的函数相比，首先在写法上有点不一样，其次是在this的指向问题.
   常规方法：

 var obj = {
        name :'dong',
        array:['react.js','angular.js','vue.js'],
        getMessage:function(){
            this.array.forEach(function(item){
                 console.log(this.name +' learn '+ item)
            }.bind(this))   
        }   
 }
 obj.getMessage();

 1.1-如果不使用bind()方法，来暴力绑定this，this就指向window了，还有一种解决办法就是手动留住this

 var obj = {
        name :'dong',
        array:['react.js','angular.js','vue.js'],
        getMessage:function(){
            var me = this;
            me.array.forEach(function(item){
                 console.log(me.name +' learn '+ item)
            })  
        }   
 }
 obj.getMessage();

 1.2-es6的箭头函数
本身没有this ,共享父级作用域下的关键字this

 var obj = {
        name :'dong',
        array:['react.js','angular.js','vue.js'],
        getMessage:function(){
            this.array.forEach((item) =>{
                console.log(this.name +' learn '+ item)
            })  
        }   
 }
 obj.getMessage();

1.3-箭头函数的写法，分表达式和函数体
    表达式：
          var fn1 =() =>"无返回值"
          function fn1(){
               return "无返回值";
          }
          //一个参数
          var fn2 =(a) =>a
          function fn2(a){
               return a;
          }
          //多个参数
          var fn3 =(a,b) =>a+b
          function fn3(a,b){
               return a+b;
          }
          //参数为对象
          var fn4 =([a,b]) =>a+b
    函数体：
         var fn5 =(a,b) => {
            var c = a+b;
            return c*3;
         }

2.为什么要在constructor()中调用super();

2.1-首先先规定这样写的原因不是react本身，是ES6语法这样规定的，在子类的constructor中必须先调用super才能引用this

2.2-super(props)的目的：在constructor中可以使用this.props。通过super（props）调用父类也就是React.Component的构造函数。如果在构造函数中没有调用super（props），那么组件实例被构造之后，类实例的所有成员函数就无法通过this.props访问到父组件传递过来的props值。很明显，给this.props赋值是React.Component构造函数的工作之一

3.关于使用ES6的import

• Example：（写一个移动端的手机面板panel-header的公共组件，图标和标题动态载入）
  

class PanelHeader extends React.Component{
    constructor(props){
        super(props);
        console.log(props.name);
        this.state={
            style:{
                backgroundImage:'url(./src/images/'+ props.title +'.png)',
                backgroundRepeat: 'no-repeat',
                backgroundSize:' 7%',
                padding: '3vw 0px 3vw 10vw',
                backgroundPosition: '0 50%',
                borderBottom: '1px solid #ddd'
            }   
        }
    }
    render(){
        return (
            <div>
                 <h4 className="panel_header" style={this.state.style}>{this.props.name}</h4>
            </div>
        )
    }
}
export {PanelHeader}; 

3.1-在这里是以export {PanelHeader}的方式输出的，不是用export default PannelHeader默认输出，那么在调用的js文件中引入时就要注意，如果是前者输出，就要使用import {PanelHeader} from 'XXXX',如果是后者默认输出就要用import PanelHeader from 'XXXX'