问题
今天遇到了一个问题,当react组件有video元素,且是通过props传值过来时,进入页面的一瞬间会出现卡顿现象
在页面的使用
<Video videoUrl={videoUrl} />
组件写法
import React, { Component } from "react";
import { Player } from "video-react";
class Video extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Player ref="player" videoId="player">
<source src={this.props.videoUrl} />
</Player>
</div>
);
}
}
可能的原因,组件在渲染的一瞬间,同时浏览器也在加载视频,到时页面切换的动画效果卡顿
解决方式
解决的理论依据,使用定时器让视频延迟加载就行了
import React, { Component } from "react";
import { Player } from "video-react";
class Video extends Component {
constructor(props) {
super(props);
this.state = {
videoUrl: "",
};
}
// props 变化时更新
componentWillReceiveProps(nextProps) {
this.updataVideo(nextProps);
}
// 更新视频数据
updataVideo(props) {
// 设置定时器消除组件props更新时阻塞浏览器页面动画
setTimeout(() => {
this.setState({
videoUrl: props.videoUrl,
});
}, 0);
}
render() {
return (
<div>
<Player ref="player" videoId="player">
<source src={this.state.videoUrl} />
</Player>
</div>
);
}
}