箭头函数
其实就是java的lamda编程，它的特点是单向无环流，没有变量，源数据状态不能被改变。
基本语法
()=> {} //表示一个空函数，和function(){}功能一样，如果只有一行语句则，{}可省略
lef fn = arg => {} //如果函数只有一个参数，刚可省略参数()
(do, what) => console.log(do, what) //表示带两个参数的函数，这行语句在console之前默认带了一个return
将函数或组件做为参数传递
下面就是一个例子，把add做为参数传递给logs函数。
//定义一个函数，用于做参数使用
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
可以导出一个或多个对象、函数、变量，主要是为了安全，防止全是全局变量；
export default Logo //这后面一般没有分号，而且一个js文件只能有一个default
import
与export对应，如果是通过npm全局安装的模块则不用写路径，直接用 import React from 'react'。
import Logo from './components/Logo；
- ./components/Logo：表示模块本地相对路径，后面也可以带.js，但不建议带；
- Logo：和 export default Logo 值对应；
另外还有一种更简要的写法，如下：
//{}可用,分隔一次导入多个模块
import React, {PropTypes} from 'react';
//等价于下面两行代码
import React from 'react；
const PropTypes = React.PropTypes;
使用export实现组件初始化配置
- 配置数据
//classification.js
export default {
grapes: [
'Baco Noir',
'Barbera',
],
}
- 配置数据引用
//schema.js
import classification from './classification';
export default [
{
id: 'grape', //--
label: 'Grape',
type: 'suggest',
options: classification.grapes,
show: true,
sample: 'Merlot', //---
align: 'left',
},
]
- 配置数据使用
"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
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
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{}
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 定义常量：定义时必须初始化，不能修改，只能在块作用域里访问
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 不允许在相同作用域内，重复声明同一个变量。
持续增加中…
