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

鍍金池/ 問答/HTML/ `React.PureComponent` 導(dǎo)致組件不更新

`React.PureComponent` 導(dǎo)致組件不更新

寫輪播圖組件的時(shí)候，React.PureComponent 莫名其妙的導(dǎo)致state修改后，而組件不更新，改成Component就ok了

如下：定時(shí)器每秒執(zhí)行一次，但是ui不更新，控制臺顯示定時(shí)執(zhí)行4次后(長度是4)，才會render1次

class CyclePic extends React.PureComponent{
    constructor(props){
        super(props);

        this.togglePic=this.togglePic.bind(this);
        this.stopToggle=this.stopToggle.bind(this);
        this.timer;
        this.state={
            index:0
        }
    }
    componentDidMount(){
        this.togglePic();
    }
    componentWillUnMount(){
        this.stopToggle();
    }
    togglePic(){
        this.timer=setInterval(()=>{
            console.log(111)
            this.setState((preState,currentProps)=>{
                let nextIndex=++preState.index;
                if(nextIndex>currentProps.pics.length-1){
                    nextIndex=0;
                }
                return {index:nextIndex}
            });
        },1000);
    }
    stopToggle(){
        clearInterval(this.timer);
    }
    render(){
        console.log(222);
        return <div>{this.state.index}</div>;
    }
}

clipboard.png

回答
編輯回答
失魂人

React.PureComponent 　其實(shí)是重寫了SCU(shouldComponentUpdate)方法。

React.Component shouldComponentUpdate 的實(shí)現(xiàn)是直接返回true。

這就是兩者的區(qū)別。 造成這樣的情況的原因就在于shouldComponentUpdate”錯誤“地將返回值變成false了。

PureComponent 重寫的SCU其實(shí)就是shallow equal 兩個(gè)state和nextState，prop和nextProps。

從你的代碼中看，是

let nextIndex=++preState.index; 
// 等價(jià)于

let nextIndex = preState = preState.index + 1;

因此不僅僅修改了nextIndex， 同時(shí)也修改了preState.index.

你可以繼承React.Component，自己寫SCU，然后debug看一下就明白了。

希望我的回答對你有幫助。

2017年3月11日 03:17
編輯回答
維他命
 let nextIndex=++preState.index; // 改變了 preState 的值, 導(dǎo)致當(dāng)前狀態(tài)和之前狀態(tài)的 index 值相同, 所以 PureComponent 在 shouldComponentUpdate 會返回 false.

改為

 let nextIndex= preState.index + 1;
2017年6月13日 05:57