react中的forceupdate怎么用

本文小編為大家詳細(xì)介紹“react中的forceupdate怎么用”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“react中的forceupdate怎么用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

在react中，forceupdate()用于強(qiáng)制使組件跳過(guò)shouldComponentUpdate()，直接調(diào)用render()，可以觸發(fā)組件的正常生命周期方法，語(yǔ)法為“component.forceUpdate(callback)”。

本教程操作環(huán)境：Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。

react中forceupdate的用法是什么

僅當(dāng)組件的狀態(tài)或傳遞給它的道具發(fā)生變化時(shí)，React中的組件才會(huì)re-render，但是如果某些數(shù)據(jù)發(fā)生變化，如果我們需要更改組件的re-render，則我們將使用React的forceUpdate()方法。調(diào)用forceUpdate()將強(qiáng)制組件re-render，從而跳過(guò)該shouldComponentUpdate()方法而調(diào)用該組件的render()方法。

提示：通常，避免使用forceUpdate()，而只能從render()中的this.props和this.state中讀取。

用法:

component.forceUpdate(callback)

雖然確實(shí)有一些使用forceUpdate()方法的用例，但最好在需要時(shí)使用掛鉤，道具，狀態(tài)和上下文來(lái)對(duì)組件進(jìn)行re-render處理。

默認(rèn)情況下，當(dāng)組件的state或props改變時(shí)，組件將重新渲染。如果你的render()方法依賴于一些其他的數(shù)據(jù)，你可以告訴React組件需要通過(guò)調(diào)用forceUpdate()重新渲染。

調(diào)用forceUpdate()會(huì)導(dǎo)致組件跳過(guò)shouldComponentUpdate(),直接調(diào)用render()。這將觸發(fā)組件的正常生命周期方法,包括每個(gè)子組件的shouldComponentUpdate()方法。

forceUpdate就是重新render。有些變量不在state上，當(dāng)時(shí)你又想達(dá)到這個(gè)變量更新的時(shí)候，刷新render；或者state里的某個(gè)變量層次太深，更新的時(shí)候沒(méi)有自動(dòng)觸發(fā)render。這些時(shí)候都可以手動(dòng)調(diào)用forceUpdate自動(dòng)觸發(fā)render

Sub.js
class Sub extends React.Component{
    construcotr(){
        super();
        this.name = "yema";
    }
    refChangeName(name){
        this.name = name;
        this.forceUpdate(); 
    }
    render(){
        return (<div>{this.name}</div>);
    }
}
App.js
class App extends React.Component{
    handleClick(){
        this.subRef.refChangeName("yemafuren");
    }
    render(){
        return (<div>
            <Sub ref={(sub)=>{this.subRef = sub;}} />
            <button onClick={this.handleClick}>click</button>
        </div>);
    }
}

讀到這里，這篇“react中的forceupdate怎么用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。