鍍金池/ 問答/HTML/ reactjs怎么實現(xiàn)監(jiān)聽數(shù)據(jù)對象

reactjs怎么實現(xiàn)監(jiān)聽數(shù)據(jù)對象

之前一直在用vuejs,因為最近開發(fā)要用到reactjs
但是發(fā)現(xiàn)他沒有vuejs這種可以watch數(shù)據(jù)對象的方法,
請問下有過reactjs開發(fā)經(jīng)驗的人,如果我想監(jiān)聽一個state里的某個屬性變化要怎么做?
我現(xiàn)在有個例子因為是定時器的關(guān)系,在里面用了setState然后執(zhí)行后會一直報
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.
我想把他拿出來,但是如果沒有監(jiān)聽某個值又不知道怎么放出來

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)+'時'+(''+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)聽數(shù)據(jù)對象,而是通過手動調(diào)用setState()方法來觸發(fā)virtueDiff,以此對比前后來個狀態(tài)的不同,然后針對性的更改變化了的DOM結(jié)構(gòu)實現(xiàn)數(shù)據(jù)更新。這是我的理解,歡迎大神拍磚。

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

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

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

如果單純 React 的話 如果狀態(tài)發(fā)生變化,會觸發(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里面取消定時器,不然就是這個異常

2017年12月2日 04:00