react路由跳转到有video的界面时出现卡顿现象

问题

今天遇到了一个问题，当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>
    );
  }
}