网易云开发日志 day06

(1)

dva中use <Route> or withRouter outside <Router>报错

把import {NavLink} from "dva/router";改成import {NavLink} from "react-router-dom";就不会报错了。

所以以后统一用react-router-dom。

(2)

单页应用，就是在不刷新浏览器的情况下可以在整个网页应用实时共享数据。
store是内存机制，不是缓存机制，页面刷新和关闭都会导致store初始化，store里面一般保存什么数据呢？

1、组件的初始状态；
2、后端数据的初始状态；

如果你需要存储是数据是要实时存储并且读取显示出来，那么存在本地缓存或者服务端，这样每次刷新页面都需要读取本地缓存或者服务端的API，然后保存到store，再从store读到组件上。

(3)

=========================

PlayBar组件开发

{

this.setState(callback/{}, callback)

this.setState(function (state, props) {
    //用来获取之前的state，以及props属性。
 return {
  score: state.score - 1
 }
});

设计

组件可能需要操作的DOM (refs)

audio(必备) ref = {(audio) => {this.lectureAudio = audio}}

功能

播放： {

当播放时

e.currentTime –> this.state.currentTime（事件ontimeupdate，e.currentTime更新时触发）

onTimeUpdate={() => this.handleTimeUpdate()}
handleTimeUpdate() {
    this.setState({
        currentTime: this.lectureAuduio.currentTime,
    });
}

缓冲条

进度条 1 播放时交互 — 进度条width = this.state.currentTime(更新触发重新渲染) / e.duration

进度条 2 点击jump — 进度条width

思路

点击后，获取点击的div的width = e.target.offsetWidth

let x = e.offsetX

currentTime = x / width * this.state.duration

进度条 3 拖拉

onmousedown onmousemove onmouseup

maxWidth — clientWidth

理清楚offsetX和offsetWidth和offsetLeft的区别

offsetX表示（鼠标位置）相对于最近父级元素的坐标（无论父级是否定位）（不管是谁触发）

offsetLeft元素相对于最近定位父级元素的坐标，若在所有的父级上都没有定位，则相对于整个文档

offsetWidth返回元素的视觉尺寸（width+padding+border）

时间

渲染时间 — 根据this.state.currentTime

renderPlayTime(time) {

      var minute = time / 60;
      var minutes = parseInt(minute);
      if (minutes < 10) {
          return `${minutes}:${seconds}`
  }minutes = "0" + minutes;
      }
      //秒
      var second = time % 60;
      var seconds = Math.round(second);
      if (seconds < 10) {
          seconds = "0" + seconds;
      }

      return `${minutes}:${seconds}`
  }

{this.renderPlayTime(this.state.currentTime)}

{this.renderPlayTime(this.state.duration)}

}

(1)

this.state = {

​ currentTime,

​ playState,

}

}

==========================