React觸發(fā)render的實(shí)現(xiàn)方法
React觸發(fā)render方法
1、setState
this.setState({}); 2、forceUpdate
this.forceUpdate();
3、通過(guò)狀態(tài)管理
如mobx，redux等
React-forceUpdate()
默認(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>);
}
} 總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了React獲取DOM和獲取組件實(shí)例的方式,如何創(chuàng)建refs來(lái)獲取對(duì)應(yīng)的DOM呢?目前有三種方式，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-10-10
React中進(jìn)行條件渲染的實(shí)現(xiàn)方法
React是一種流行的JavaScript庫(kù),它被廣泛應(yīng)用于構(gòu)建Web應(yīng)用程序,在React中,條件渲染是一個(gè)非常重要的概念,它允許我們根據(jù)不同的條件來(lái)呈現(xiàn)不同的內(nèi)容,在本文中,我們將探討React如何進(jìn)行條件渲染,需要的朋友可以參考下2023-11-11
React導(dǎo)入less及其注意事項(xiàng)說(shuō)明
在Vite構(gòu)建的React項(xiàng)目中,直接安裝和導(dǎo)入Less即可使用,但需注意的是,Less的樣式作用域不局限于模塊內(nèi)部,可能造成樣式污染,建議通過(guò)修改文件名和導(dǎo)入方式來(lái)避免此問(wèn)題2024-11-11
這篇文章主要介紹了如何強(qiáng)制刷新react hooks組件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
在使用 React 進(jìn)行開(kāi)發(fā)時(shí),key 屬性是一個(gè)至關(guān)重要的概念,尤其在渲染列表時(shí),開(kāi)發(fā)者在使用 key 屬性時(shí),常常會(huì)遇到各種警告信息,本文將詳細(xì)解析這些警告的原因,提供有效的解決方案,并總結(jié)最佳實(shí)踐,需要的朋友可以參考下2024-12-12
useEffect()是react中的hook函數(shù),作用是用于創(chuàng)建由渲染本身引起的操作,介紹了依賴項(xiàng)數(shù)組不同的區(qū)別,對(duì)react useEffect()使用相關(guān)知識(shí)感興趣的朋友一起看看吧2024-05-05
JavaScript中rem布局在react中的應(yīng)用
這篇文章主要介紹了JavaScript中rem布局在react中的應(yīng)用 的相關(guān)資料,需要的朋友可以參考下2015-12-12
React?Server?Component混合式渲染問(wèn)題詳解
React?官方對(duì)?Server?Comopnent?是這樣介紹的:?zero-bundle-size?React?Server?Components，這篇文章主要介紹了React?Server?Component:?混合式渲染,需要的朋友可以參考下2022-12-12
Vite+React搭建開(kāi)發(fā)構(gòu)建環(huán)境實(shí)踐記錄
這篇文章主要介紹了Vite+React搭建開(kāi)發(fā)構(gòu)建環(huán)境實(shí)踐,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
ahooks控制時(shí)機(jī)的hook實(shí)現(xiàn)方法
這篇文章主要為大家介紹了ahooks控制時(shí)機(jī)的hook實(shí)現(xiàn)方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07