今日份收获(1th)
一、时间戳转换为日期:
timestampToDate(timestamp) {
var date = new Date(timestamp);
var Y = date.getFullYear();
var Mon = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1);
var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() ;
var H = date.getHours() < 10 ? '0' + date.getHours() : date.getHours() ;
var Min = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes() ;
var S = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds() ;
return (
{year:Y,month:Mon,day:D,hours:H,minutes:Min,seconds:S}
)
}
//console.log(timestampToDate(1398250549123))
//{ year: 2014,month: '04', day: 23, hours: 18, minutes: 55,seconds: 49 }
- 可以依据自己需要的格式进行输出
- 注意变量名别取重复了,第一次写月和分的变量名都写了M,结果可想而知
- React里面的时间戳转换可以使用:
import moment from 'moment' //引入
moment(需要转换的时间).format('YYYY-MM-DD HH:mm:ss')
//2018-08-13 21:10:29
//测试 如果 mm ss 写成大写的会出错
二、React Modal组件的使用
如果遇到我这样的程序猿,你可能想打人;
别人:Modal用得十分顺利,遮罩层的颜色很浅,很完美
Me:昨天中午用的Modal比别人的遮罩层颜色黑了三个度,
开始怀疑人生,找了样式发现颜色一样,开始怀疑电脑。。
晚上再用,wo要死了,遮罩层好比天都黑了。。。
Why?emmmm:历史教训告诉我,别把Modal写在循环里面(第一次循环了3个,第二次十多个吧,天黑也很正常,保持微笑)
三、State 的更新是异步的
其他甚好的原理记得去看大佬的解释,我的记忆已经深深地提醒我:调用setState,组件的state并不会立即改变,比如:
//selectedTab 初始值为 all 修改后应该为 NoPay
onChange={(tab, index) => {
console.log('111', this.state.selectedTab) //setState 前输出
this.setState({
selectedTab: tab.sub
}, () => { console.log('222', this.state.selectedTab) }) //setState 回调
console.log('333', this.state.selectedTab) //setState 后立马输出,还在onChange内
}}
selectedTab 初始值为 all
修改后应该为 NoPay
上面的函数执行后输出的结果将会是:
111 all
333 all
222 NoPay
结果可以显示出,当setState完后,并没有立即改变了state的值,所以如果在onChange这个函数内使用这个state的值你会觉得自己setState失败了,但是其实并没有,从回调函数中可以看到,这个值已经被改变了,但是是要离开当前函数才能看到修改后的值
so:当发现自己的setState没有起作用的时候,可以考虑一下是否还没有在值被改变的时候使用了state的值
另外还有一个尚未理解的问题:
看到的资料都说,只有setState可以改变state的值,但是下面这种情况是如何实现改变state的值?
onChange={(tab, index) => {
this.state.listUserOrder.type = tab.sub
this.setState({
listUserOrder: this.state.listUserOrder
})
this.ListUserOrder()
}}
上面这个代码是先改变了state中一个listUserOrder的type的值,然后通过
执行setStatelistUserOrder: this.state.listUserOrder
,是可以实现修改state的值的,这种也算是setState的方式吗?这样子的话是不是说:资料说的只有setState可以改变state的值,不能单纯赋值改变指的是:单纯赋值可以改变state一时的值,而只有通过setState才能够被保存下来使用?
四、Reat里面事件绑定吧
吃过n多次亏,传不了值,都是因为this的问题,像写了个async的接口请求,在render中调用的时候,就会发现又不起作用了,现在的条件反射是:没有写箭头函数/bind(this)
onLeftClick={ this.onGoback}
无效
onLeftClick={() => this.onGoback()}
有效
用bind(this)也会有效
有待深入研究