美文网首页
2018-08-14

2018-08-14

作者: Kilimanjaroy | 来源:发表于2018-08-14 20:16 被阅读0次
    今日份收获(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)也会有效
    有待深入研究

    相关文章

      网友评论

          本文标题:2018-08-14

          本文链接:https://www.haomeiwen.com/subject/ngdvbftx.html