React开发必须掌握这些es6语法-03

箭头函数

其实就是java的lamda编程，它的特点是单向无环流，没有变量，源数据状态不能被改变。

基本语法

javascript 复制代码

()=> {} //表示一个空函数，和function(){}功能一样，如果只有一行语句则，{}可省略
lef fn = arg => {} //如果函数只有一个参数，刚可省略参数()
(do, what) => console.log(do, what) //表示带两个参数的函数，这行语句在console之前默认带了一个return

将函数或组件做为参数传递

下面就是一个例子，把add做为参数传递给logs函数。

javascript 复制代码

//定义一个函数，用于做参数使用
const add = (x, y) => x+y;

//声明了接受func参数的函数logs，返回另一个函数，另一个函数的参数为...args
const logs = func => (...args) => {
    return func(...args);
}
//调用
const l = logs(add);

export和import

export和import 是一种CommonJS方案。它的底层是使用var Logo = require(./components/Logo) 和 module.exports=Logo实现的。

export

可以导出一个或多个对象、函数、变量，主要是为了安全，防止全是全局变量；

javascript 复制代码

export default Logo  //这后面一般没有分号，而且一个js文件只能有一个default

import

与export对应，如果是通过npm全局安装的模块则不用写路径，直接用 import React from 'react'。

javascript 复制代码

import Logo from './components/Logo；

./components/Logo：表示模块本地相对路径，后面也可以带.js，但不建议带；
Logo：和 export default Logo 值对应；

另外还有一种更简要的写法，如下：

javascript 复制代码

//{}可用,分隔一次导入多个模块
import React, {PropTypes} from 'react';

//等价于下面两行代码
import React from 'react；
const PropTypes = React.PropTypes;

使用export实现组件初始化配置

配置数据

javascript 复制代码

//classification.js
export default {
  grapes: [
    'Baco Noir',
    'Barbera',
  ], 
}

配置数据引用

javascript 复制代码

//schema.js
import classification from './classification';

export default [
  {
    id: 'grape', //--
    label: 'Grape',
    type: 'suggest',
    options: classification.grapes, 
    show: true,
    sample: 'Merlot', //---
    align: 'left',
  },
]

配置数据使用

javascript 复制代码

"use strict";
import schema from './schema';

//从缓存中取数据
let data = JSON.parse(localStorage.getItem('data'));
// 如果没取到，则读取默认的schema配置
if (!data) {
  data = {};
  schema.forEach((item) => data[item.id] = item.sample);
  data = [data];
}

导出/导入公用数据类型

可以把自定义类型用export导出供其它组件使用，相当于java中final static class的概念，其用法如下：

导出 FormInput.js

javascript 复制代码

type FormInputFieldType = 'year' | 'suggest' | 'rating' | 'text' | 'input';
export type FormInputFieldValue = string | number;

export type FormInputField = {
  type: FormInputFieldType,
  defaultValue?: FormInputFieldValue,
  id?: string,
  options?: Array<string>,
  label?: string,
};

导入Button.js

javascript 复制代码

import type {FormInputField, FormInputFieldValue} from './FormInput';

type Props = {
  fields: Array<FormInputField>, //使用
  initialData?: Object,
  readonly?: boolean,
};

class Form extends Component {
  
  props: Props;
  
  getData(): Object {
    let data: Object = {};
    this.props.fields.forEach((field: FormInputField) =>  //使用
      data[field.id] = this.refs[field.id].getValue()
    );
    return data;
  }
}

const{}

javascript 复制代码

const { zhi } = Gao; //等价于 const zhi = Gao.zhi

const {a} = {a:1} //1

const {a} = {a:1, b:2}; //1

var、let、const的区别

var 全局变量：没有块的概念，可以跨块访问，不能跨函数访问
let 局部变量：只能在块作用域内访问，不能跨块访问，也不能跨函数访问
const 定义常量：定义时必须初始化，不能修改，只能在块作用域里访问

javascript 复制代码

   for (let i = 0; i < 2; i++) {
      console.log(i);//正确
   }
   console.log(i);//报错: i is not defined
   
   
   for (var i = 0; i < 2; i++) {
	  console.log(i);//正确
   }
   console.log(i);//正确：2

var声明变量存在变量提升，即可以先使用后定义，虽然逻辑不对，但程序不会报异常。而let和const则不存在变量提升，所以用 let 定义的变量一定要在声明后再使用，否则会报错

var 变量可以多次声明，而 let 不允许在相同作用域内，重复声明同一个变量。

持续增加中...