(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)
1 | this.setState(function (state, props) { |
设计
组件可能需要操作的DOM (refs)
audio(必备) ref = {(audio) => {this.lectureAudio = audio}}
功能
播放: {
当播放时
e.currentTime –> this.state.currentTime(事件ontimeupdate,e.currentTime更新时触发)
1 | onTimeUpdate={() => this.handleTimeUpdate()} |
缓冲条
进度条 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
1 | renderPlayTime(time) { |
{this.renderPlayTime(this.state.currentTime)}
{this.renderPlayTime(this.state.duration)}
}
(1)
this.state = {
currentTime,
playState,
}
}
==========================