ES6数组四个函数
map ---------- 映射 一个对一个
reduce ---------- 汇总归纳 一堆出来一个
filter ---------- 过滤器 保留为true的
forEach ---------- 迭代（循环）
let arr=[1,1,1,1,1,1];
let res=arr.reduce(function(tmp,item,index){
// tmp 上一次结果，item 当前项 ,index 下标（从1开始）
return tmp+item;
});
console.log(res);
var arr = [12, 4, 8, 9]
var result = arr.forEach(item => console.log(item))
var result = arr.forEach((item, index)=>console.log(item, index))
RangePicker获取改变时间的值
<RangePicker
onChange={this.onPickerChange}
value={this.state.startTime===undefined||this.state.endTime===undefined||this.state.startTime===""||this.state.endTime===""?null:[moment(this.state.startTime, dateFormat), moment(this.state.endTime, dateFormat)]}
format={dateFormat}
placeholder={['开始时间','结束时间']}
/>
//时间改变的方法
onPickerChange=(date, dateString)=>{
console.log("data",date,"dateString",dateString);
//这两个参数值antd自带的参数
console.log("dateString",dateString[0],"dateString",dateString[1]);
this.setState({
startTime:dateString[0],
endTime:dateString[1],
})
}
React中Table使用复选框，checkbox。
onSelectChange = selectedRowKeys => {
console.log('selectedRowKeys changed: ', selectedRowKeys);
this.setState({ selectedRowKeys });
};
所选取的key值都是默认的序号值。并不是自己想要的key值。这时候需要自定义一个key值。可以在Table组件中增加一个rowkey的定义。rowKey={record => record.id}。 解决问题。
<Table
loading={this.state.loading}
rowSelection={rowSelection}
bordered
columns={columns}
dataSource={this.state.unrelativeTableData}
pagination={this.state.pagination}
onChange={this.handleTableChange}
rowKey={record => record.id}
/>
table组件，增加滚动条scroll={{ x: 1620, y: 600 }}
<Table
loading={this.state.loading}
bordered
columns={columns}
dataSource={this.state.tableData}
pagination={this.state.pagination}
scroll={{ x: 1620, y: 600 }}
onChange={this.handleTableChange}
/>
滚动条滑动的时候固定左边的列 fixed: 'left'。
render: (text, record) => ( ) 与render: (text, record) => {} 区别
前面的只能写表达式结果，或者三目运算符，后面的可以写任意js函数。
ES5语法
箭头函数
var foo = function(){return 1;};
//等价于
let foo = () => 1;
箭头函数中的 this 指的不是window，是对象本身
function aa(){
this.bb = 1;
setTimeout(() => {
this.bb++; //this指向aa
console.log(this.bb);
},500);
}
aa(); //2
箭头函数的原理 this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。所以，箭头函数转成ES5的代码如下：
// ES6
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
// ES5
function foo() {
var _this = this;
setTimeout(function () {
console.log('id:', _this.id);
}, 100);
}
上面代码中，转换后的ES5版本清楚地说明了，箭头函数里面根本没有自己的this，而是引用外层的this。
var与let、const的区别
var a = 100;
console.log(a,window.a); // 100 100
let b = 10;
console.log(b,window.b); // 10 undefined
const c = 1;
console.log(c,window.c); // 1 undefined
ES6 推荐在函数中使用 let 定义变量
const 用来声明一个常量 (值类似值不能改变，引用类型地址不能改变)
let 和 const 只在最近的一个块中（花括号中）有效
Flux的最大哲学是数据是单向流动的。
ref是react中DOM钩子,直接操作DOM
定义一个最简单的组件,无状态组件
React跟数据有关系的三个属性state props context
context的精髓是可以跨级传输数据
如果非要从下到上传输数据，子组件要把数据返回给父组件，只能用奇淫技巧。父组件传一个函数给子组件，子组件通过传参将数据返回给父组件的函数，父组件的函数接受实参改变父组件中的state等值。
例如：
class Greeting extends React.Component {
render() {
return (
<h1>Hello {this.props.name}</h1>
)
};
}
Greeting.propTypes = {
name: React.PropTypes.string.isRequired
};
1.React要求自定义组件必须是大写字母开头，小写会被当做默认DOM元素来渲染。
2.React要求自定义组件必须继承React.Component类。
3.jsx不能直接运行，是被babel-loader中的react这个preset翻译的:
4.标签必须关闭，class要写成className ,for要写成htmlFor。
5.html注释不能使用，只能使用js注释。
6.原生标签比如p、li、div如果要使用自定义属性，必须使用data-前缀。
react列表自增序号问题：
{ title: '序号', dataIndex: 'id', key: 'id',
render: (text,record,index)=>(index+1)
}
react对于页面动态元素的问题。
显示的时候以数组的方式循环显示。
当删除的时候通过数组的filter过滤掉传进来的index，删除掉过滤掉的数据。
contactPeopleListTemp = contactPeopleListTemp.filter((item,_index) => index !== _index);
map一般做修改操作，转换后数组大小是一致的，filter是做删除操作，元素个数可以减少。
问题1 函数参数为什么可以不一致。
<Select style={{width: 200}}
value={status}
onChange={this.handleChange.bind(this)}>
<Option value="">请选择</Option>
<Option value="0">a</Option>
<Option value="1">b</Option>
<Option value="2">c</Option>
</Select>
handleChange = (value, option = null) => {
console.table(['111',value]);
let statusTarget = value;
this.setState({status: statusTarget});
}
onChange函数默认传value可以不用指定。
jsx语法举例：
{
status == 2 &&
<Select defaultValue="2019" style={{width: 200, "margin-left": "10px"}} onChange={this.handleChange}>
{yearList && yearList.map(item => <Option value={item} key={item}>{item}</Option>)}
</Select>
}
大括号中的就是js语句，可以用&&符号判断显示方式。
通用函数写法
- onChange函数或者onClick函数 获取函数值有两种默认的方式， 一种是直接传值，一种是传event对象。 通过一个判断可以获取他们的值let value = typeof event === 'object' && !Array.isArray(event) ? event.target.value : event。
- 设置state的值的时候可以通过函数传值了。只要在setstate的方法中在原变量的外面加上中括号[ ]，这个就是变量了。
- 设置某个数组的某个属性，一般是listItem[index].name="username"。如果属性name也想通过变量的方式传递的话，则加上中括号省去那个点，就可以了:如listItem[index][name]="username"。
changeItemValue = (index, listName, attrName, event) => {
let value = typeof event === 'object' && !Array.isArray(event) ? event.target.value : event;
listName[index][attrName] = value;
this.setState({
[listName]: listName
})
}
对于空字符串及undefined,可以统一用实体做判断就可以。比如name可能是"",也可能是undefined，用判断if(name)做判断。
react对时间的格式化方式
1.引入import moment from "moment";
2.moment(newDate).format('YYYY-MM-DD')
下拉框同时获取显示名称和值。
标签调用onChange函数函数中会匿名传两个参数 <select onChange={this.handleOnChange}> <Option value="值">显示名称</Option> </select> handleOnChange = (value, option = null) => { value \\下拉框的值 option.props.children \\显示名称 }; 1.数组定义 let cc = ['姓名', '年龄', 2, {'性别':'男'}] // 数组 var a = [1, 2, 3]; for (var i in a) { console.log(a[i]); } 数组的使用，放在react代码中，可以自动展开 class News extends React.Component{ constructor(props){ super(props) this.state={ msg:'新闻', list:['1111','2222','3333'] } } render(){ let listResult=this.state.list.map(function(value,key){ return ({value}) }) return( {listResult} ) } } 父子组件传值 <br> 子组件获取值 {this.props.a} {this.props.b} 在子组件中props是只读的，不能修改。 -------------------------------------------------------------------------- React可以搭配Flux等架构（Redux实现）使用。<br> 有Flux架构护航，数据的单向流动，自称是比MVC，MVVM更高一级的模式。<br> React 使用jsx语法糖<br> 浏览器工作流<br> 创建DOM树<br> 一旦浏览器接收到一个HTML文件，渲染引擎（render engine）就开始解析它，并根据HTML元素（elements）一一对应地生成DOM 节点（nodes），组成一棵DOM树。<br> 创建渲染树<br> 同时，浏览器也会解析来自外部CSS文件和元素上的inline样式。通常浏览器会为这些样式信息，连同包含样式信息的DOM树上的节点，再创建另外一个树，一般被称作渲染树（render tree）<br> 创建渲染树背后的故事<br> WebKit内核的浏览器上，处理一个节点的样式的过程称为attachment。DOM树上的每个节点都有一个attach方法，它接收计算好的样式信息，返回一个render对象（又名renderer） Attachment的过程是同步的，新节点插入DOM树时，会调用新节点的attach方法。 构建渲染树时，由于包含了这些render对象，每个render对象都需要计算视觉属性（visual properties）；这个过程通过计算每个元素的样式属性来完成。<br> 布局 Layout<br> 又被简称为Reflow[2] 构造了渲染树以后，浏览器引擎开始着手布局（layout）。布局时，渲染树上的每个节点根据其在屏幕上应该出现的精确位置，分配一组屏幕坐标值。<br> 绘制 Painting<br> 接着，浏览器将会通过遍历渲染树，调用每个节点的paint方法来绘制这些render对象。paint方法根据浏览器平台，使用不同的UI后端API（agnostic UI backend API）。 通过绘制，最终将在屏幕上展示内容。<br> Virtual DOM技术<br> DOM操作真正的问题在于每次操作都会触发布局的改变、DOM树的修改和渲染。所以，当你一个接一个地去修改30个节点的时候，就会引起30次（潜在的）布局重算，30次（潜在的）重绘，等等。 Virtual DOM 实际上没有使用什么全新的技术，仅仅是把 “ 双缓冲（double buffering）” 技术应用到了DOM上面。<br> 这样一来，当你在这个单独的虚拟的DOM树上也一个接一个地修改30个节点的时候，它不会每次都去触发重绘，所以修改节点的开销就变小了。<br> 之后，一旦你要把这些改动传递给真实DOM，之前所有的改动就会整合成一次DOM操作。这一次DOM操作引起的布局计算和重绘可能会更大，但是相比而言，整合起来的改动只做一次，减少了（多次）计算。 不过，实际上不借助Virtual DOM也可以做到这一点。你可以自己手动地整合所有的DOM操作到一个DOM 碎片（DOM fragment） 里，然后再传递给DOM树。<br> Virtual DOM到底解决了什么问题。<br> 首先，它把管理DOM碎片这件事情自动化、抽象化了，使得你无需再去手动处理。另外，当你要手动去做这件事情的时候，你还得记得哪些部分变化了，哪些部分没变，毕竟之后重绘时，DOM树上的大量细节你都不需要重新刷新。这时候Virtual<br> DOM的自动化对你来说就非常有用了，如果它的实现是正确的 ，那么它就会知道到底哪些地方应该需要刷新，哪些地方不要。<br> 最后，Virtual DOM通过各种组件和你写的一些代码来请求对它进行操作，而不是直接对它本身进行操作，使你不必非要跟Virtual DOM交互，也不必非要去了解Virtual<br> DOM修改DOM树的原理，也就不用 再想着去修改DOM了。对开发者来说，Virtual DOM几乎是完全透明的。这样你就不用在修改DOM 和 整合DOM操作为一次之间做同步处理了。<br>  Virtual DOM的核心就是计算。<br>
