在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ reactjs怎么實(shí)現(xiàn)監(jiān)聽(tīng)數(shù)據(jù)對(duì)象

reactjs怎么實(shí)現(xiàn)監(jiān)聽(tīng)數(shù)據(jù)對(duì)象

之前一直在用vuejs,因?yàn)樽罱_(kāi)發(fā)要用到reactjs
但是發(fā)現(xiàn)他沒(méi)有vuejs這種可以watch數(shù)據(jù)對(duì)象的方法,
請(qǐng)問(wèn)下有過(guò)reactjs開(kāi)發(fā)經(jīng)驗(yàn)的人,如果我想監(jiān)聽(tīng)一個(gè)state里的某個(gè)屬性變化要怎么做?
我現(xiàn)在有個(gè)例子因?yàn)槭嵌〞r(shí)器的關(guān)系,在里面用了setState然后執(zhí)行后會(huì)一直報(bào)
Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the Main component.
我想把他拿出來(lái),但是如果沒(méi)有監(jiān)聽(tīng)某個(gè)值又不知道怎么放出來(lái)

class Main extends React.Component {
        constructor() {
            super();
            this.isCancelTimer = false;
            this.state = {
                isTimeOut: false,
                isSubmit: true
            };
        }
        
        setTimer(severTime) {
            let currentDate = 0,
                timer = null,
                newSeverTime = '',
                counter =()=>{

                    if (currentDate <= 0 || this.isCancelTimer) {
                        clearTimeout(timer);
                        //這里的setState怎么拿到外面
                        this.setState(Object.assign(this.state, {
                            isTimeOut: true,
                            isSubmit: false
                        }))
                    }
                    currentDate--;
                    timer = setTimeout(() => {
                        let day = Math.floor(currentDate / 60 / 60 / 24),
                            hours = Math.floor(currentDate / 60 / 60 % 24),
                            minutes = Math.floor(currentDate / 60 % 60),
                            seconds = currentDate % 60;
                        if (!this.isCancelTimer) {
                            this.setState(Object.assign({}, this.state, {
                                timer: (''+day).padStart(2, 0)+'天'+(''+hours).padStart(2, 0)+'時(shí)'+(''+minutes).padStart(2, 0)+'分'+(''+seconds).padStart(2, 0)+'秒'
                            }));
                        }
                        counter();
                    }, 1000);
                };
            // 適配IOS
            newSeverTime = severTime.replace(/-/g, (value) => '/');
            currentDate = +((+new Date(newSeverTime) - (+new Date())) / 1000).toFixed(0);
            currentDate = currentDate.toFixed(0);
            counter();
        }
        componentDidMount() {
            this.setTimer('2017-11-18 17:10:50')
        }
    }
回答
編輯回答
墨染殤

React不監(jiān)聽(tīng)數(shù)據(jù)對(duì)象,而是通過(guò)手動(dòng)調(diào)用setState()方法來(lái)觸發(fā)virtueDiff,以此對(duì)比前后來(lái)個(gè)狀態(tài)的不同,然后針對(duì)性的更改變化了的DOM結(jié)構(gòu)實(shí)現(xiàn)數(shù)據(jù)更新。這是我的理解,歡迎大神拍磚。

2018年7月4日 15:13
編輯回答
拮據(jù)

如果你知道vue中watch數(shù)據(jù)變化的底層實(shí)現(xiàn),那么你就知道該怎么做了。監(jiān)聽(tīng)數(shù)據(jù)的變化,無(wú)非是使用了getter和setter

2017年11月18日 21:24
編輯回答
胭脂淚

如果單純 React 的話 如果狀態(tài)發(fā)生變化,會(huì)觸發(fā)組件生命周期中的如下方法:

componentWillUpdate(object nextProps, object nextState) 
componentDidUpdate(object prevProps, object prevState) 

如果使用 Redux 等的話,一般狀態(tài)變化是由 Dispatch 引起的,你在 Dispatch 的回調(diào)中執(zhí)行你想要的就可以了。

可以看看這張圖學(xué)習(xí)一下 React 的生命周期。

2017年1月7日 11:51
編輯回答
做不到

記得在componentWillUnmount里面取消定時(shí)器,不然就是這個(gè)異常

2017年12月2日 04:00