React 生命周期使用记录

最新推荐文章于 2025-07-19 20:00:00 发布

原创最新推荐文章于 2025-07-19 20:00:00 发布 · 252 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

React 专栏收录该内容

7 篇文章

订阅专栏

该博客介绍了React组件的生命周期方法，特别是`componentDidMount`、`UNSAFE_componentWillReceiveProps`、`componentWillUnmount`和`componentDidUpdate`。文章以一个名为`PolyvCloudMediaPlayer`的组件为例，展示了如何根据状态加载和卸载视频播放器，并处理保利威视频ID。此外，还讨论了如何加载外部脚本以及在组件状态改变时更新播放器。

import React from 'react';
import { Modal, Button } from 'antd';

/**
 * 注意此组件的调用方式，  通过状态去 装载和卸载
 */
class PolyvCloudMediaPlayer extends React.Component {
	// 构造函数， 组件应用的时候 就会调用
    constructor(props) {
        super(props);
        this.state = {
            isPlayer: false
        }
    }


    
    // 当组件重新挂载的时候 , 如果用法涉及到销毁组件  然后重新渲染  就会走这个
    componentDidMount() {
        console.log('componentDidMount')
        let { record, viewerInfo } = this.props
       
         if (record.vid) {
             this.handelPlayer(record.vid, viewerInfo)
         }
        
    }

    // 注意用法 组件会先渲染到父组件下， 如果存在props参数变更， 就会走这个方法， 之后的版本会移除这个
    UNSAFE_componentWillReceiveProps(nextProps){
        console.log('UNSAFE_componentWillReceiveProps', nextProps)
      
    }

    // 当组件卸载时候，
    componentWillUnmount() {
        console.log('componentWillUnmount')
        if (this.polyvPlayer) {
            this.polyvPlayer.destroy();
        }
    }


    // 只要当前组件内的状态发生改变，state发生了变化。 就会走这个
    componentDidUpdate(){
        console.log('componentDidUpdate', this.props)
    }


    loadScript(src) {
        const headElement = document.head || document.getElementsByTagName('head')[0];
        const _importedScript = {};

        return new Promise((resolve, reject) => {
            if (src in _importedScript) {
                resolve();
                return;
            }
            const script = document.createElement('script');
            script.type = 'text/javascript';
            script.onerror = err => {
                headElement.removeChild(script);
                reject(new URIError(`The Script ${src} is no accessible.`));
            }
            script.onload = () => {
                _importedScript[src] = true;
                resolve();
            }
            headElement.appendChild(script);
            script.src = src;
        })
    }

    loadPlayer() {
        this.polyvPlayer = window.polyvPlayer({
            wrap: '.player',
            width: '100%',
            height: '100%',
            vid: '', // 保利威视频ID
        });
    }

    handelPlayer = (vid, viewerInfo)=>{
        if (!this.state.isPlayer){
        // 注意这里触发了 组件内的state，导致会执行componentDidUpdate
            this.setState({
                isPlayer: true
            })
            this.polyvPlayer = window.polyvPlayer({
                wrap: '.player',
                width: '100%',
                height: '350px',
                vid: vid
                // viewerInfo: viewerInfo && {}
            });
        }
    }

    setModal2Visible(modal2Visible) {
        this.setState({
            isPlayer: false
        })
        if (this.polyvPlayer) {
            this.polyvPlayer.destroy();
        }
        let { handlePlayerModalCancel } = this.props
        handlePlayerModalCancel(modal2Visible)
    }
    render() {
        let { isShowPlayerModal, record, viewerInfo } = this.props
        console.log(isShowPlayerModal)

        return (
            <Modal title="视频" visible={isShowPlayerModal} onCancel={() => this.setModal2Visible(false)} width={850} closable
                bodyStyle={{width: '850px', height: '380px'}}
                footer={[
                    // <Button type="primary" onClick={() => this.handelPlayer(record.vid, viewerInfo)}>
                    //     播放
                    // </Button>
                ]}
                >
                <div className="wrap" style={{ width: '100%', height: '350px'}}>
                    <div className="player"></div>
                </div>
            </Modal>
        )
    }
}

export default PolyvCloudMediaPlayer