React涓渶瑕佸涓€掕鏃剁殑闂

Posted 2020-12-24

鏍囩锛?a href='http://www.mamicode.com/so/1/%e5%9b%9e%e8%b0%83%e5%87%bd%e6%95%b0' title='鍥炶皟鍑芥暟'>鍥炶皟鍑芥暟   component   璁℃椂   count   isp   tst   .com   play   ons   

鏈€杩戞湁涓€涓渶姹傛槸鍋氫竴涓棯璐垪琛紝鍒楄〃涓瘡涓€涓晢鍝侀兘鏈夊€掕鏃讹紝濡傛灉姣忎竴涓€掕鏃堕兘鍘荤敓鎴愪竴涓猻etTimeout鐨勮瘽锛屼竴涓〉闈㈠氨浼氭湁寰堝瀹氭椂鍣紝鎰熻杩欑鍋氭硶涓嶆槸闈炲父濂斤紝浜庢槸鎹簡涓€涓€濊矾銆?/p>

鎬濊矾鏄繖鏍风殑锛屼竴涓〉闈㈠彧鐢熸垚涓€涓畾鏃跺櫒銆傞〉闈㈠埄鐢ㄥ璞″幓缁存姢涓€涓洖璋冨嚱鏁板垪琛紝key鍙互鏄痠d绛夊敮涓€鏍囪瘑锛寁alue灏辨槸鏇存柊鏃堕棿鐨勫嚱鏁帮紝鎴戣繖閲岀敤鐨勬槸setState銆傛彁渚涗竴涓線瀵硅薄閲屾坊鍔犲洖璋冨嚱鏁扮殑鏂规硶鍜屼竴涓Щ闄ゅ洖璋冨嚱鏁扮殑鏂规硶銆?/p>

// 鐢ㄤ簬瀛樻斁姣忎釜鍊掕鏃剁殑鍥炶皟鏂规硶
const countDownFuncList = {};

const addFunc = (key, func) => {
    countDownFuncList[key] = func;
}
const removeFunc = (key) => {
    delete countDownFuncList[key];
}

鐢熸垚涓€涓畾鏃跺櫒锛岄殧涓€瀹氱殑鏃堕棿灏卞幓閬嶅巻鍥炶皟鍑芥暟鍒楄〃锛岃皟鐢ㄩ噷闈㈢殑鍑芥暟銆?/p>

let intervalHandler = -1;
const countDown = () => {
    if (intervalHandler !== -1) {
        clearTimeout(intervalHandler);
    }
    intervalHandler = setTimeout(() => {
        const now = new Date();
        Object.keys(countDownFuncList).forEach((key) => {
            const item = countDownFuncList[key];
            if (typeof item === 鈥榝unction鈥? {
                item(now);
            }
        })
    }, 300);
}銆€銆€

鍏蜂綋璋冪敤鏄皟鐢╰imeContent鏂规硶鏉ュ鐞嗗睍绀虹殑鏃堕棿銆?/p>

const timeContent = (millisecond) => {
    const second = millisecond / 1000;
    let d = Math.floor(second / 86400);
    let h = Math.floor((second % 86400) / 3600);
    let m = Math.floor(((second % 86400) % 3600) / 60);
    let s = Math.floor(((second % 86400) % 3600) % 60);

    let countDownDOM;
    if (d > 0) {
        countDownDOM = (<div class="count-down">{d} 澶?{h} : {m} : {s}</div>);
    } else {
        countDownDOM = (<div class="count-down">{h} : {m} : {s}</div>);
    }

    return countDownDOM;
}

杩欎釜鏂规硶鏈変竴涓己鐐瑰氨鏄綋鍓嶆椂闂寸殑鑾峰彇锛岄櫎浜嗗垵濮嬪寲姝ラ浠ュ锛屼箣鍚庣殑鏇存柊閮芥槸閫氳繃new Date()鏉ヨ幏鍙栫殑锛岃繖鏍峰瓨鍦ㄨ幏鍙栫殑鏃堕棿鍙兘骞朵笉鏄纭殑褰撳墠鏃堕棿鐨勯棶棰樸€?/p>

瀹屾暣浠ｇ爜濡備笅锛?/p>

// 鐢ㄤ簬瀛樻斁姣忎釜鍊掕鏃剁殑鍥炶皟鏂规硶
const countDownFuncList = {};

const addFunc = (key, func) => {
    countDownFuncList[key] = func;
}
const removeFunc = (key) => {
    delete countDownFuncList[key];
}

const timeContent = (millisecond) => {
    const second = millisecond / 1000;
    let d = Math.floor(second / 86400);
    let h = Math.floor((second % 86400) / 3600);
    let m = Math.floor(((second % 86400) % 3600) / 60);
    let s = Math.floor(((second % 86400) % 3600) % 60);

    let countDownDOM;
    if (d > 0) {
        countDownDOM = (<div class="count-down">{d} 澶?{h} : {m} : {s}</div>);
    } else {
        countDownDOM = (<div class="count-down">{h} : {m} : {s}</div>);
    }

    return countDownDOM;
}

let intervalHandler = -1;
const countDown = () => {
    if (intervalHandler !== -1) {
        clearTimeout(intervalHandler);
    }
    intervalHandler = setTimeout(() => {
        const now = new Date();
        Object.keys(countDownFuncList).forEach((key) => {
            const item = countDownFuncList[key];
            if (typeof item === 鈥榝unction鈥? {
                item(now);
            }
        })
    }, 300);
}

countDown();

class CountDownItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            currentTime: this.props.nowDate
        }

        this.parseDisplayTime = this.parseDisplayTime.bind(this);
    }

    componentDidMount() {
        const { id } = this.props;
        // 寰€浜嬩欢鍒楄〃娣诲姞鍥炶皟鍑芥暟
        addFunc(id, this.updateTime);
    }

    componentWillUnmount() {
        const { id } = this.props;
        // 浠庝簨浠跺垪琛ㄧЩ闄ゅ洖璋冨嚱鏁?        removeFunc(id);
    }

    updateTime(time) {
        this.setState({
            currentTime: time
        })
    }

    parseDisplayTime() {
        const { endTime, id } = this.props;
        const { currentTime } = this.state;
        const subtractTime = endTime -  currentTime;
        let countDownDOM = 鈥樷€?
        if(subtractTime > 1000){
            countDownTimeDOM = (
                <div className="count-down-content">
                    {timeContent(subtractTime)}
                </div>
            );
        }else{
            removeFunc(id);
        }

        return countDownDOM;
    }

    render(){
        return(
            <div className="count-down-wrap">{this.parseDisplayTime()}</div>
        );
    }
}