React觸發(fā)render的實現方法
更新時間：2023年10月23日 15:54:03 作者：追影的React開發(fā)者
這篇文章主要介紹了React觸發(fā)render的實現方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
React觸發(fā)render方法
1、setState
this.setState({}); 2、forceUpdate
this.forceUpdate();
3、通過狀態(tài)管理
如mobx，redux等
React-forceUpdate()
默認情況下，當組件的state或props改變時，組件將重新渲染。
如果你的render()方法依賴于一些其他的數據，你可以告訴React組件需要通過調用forceUpdate()重新渲染。
調用forceUpdate()會導致組件跳過shouldComponentUpdate(),直接調用render()。
這將觸發(fā)組件的正常生命周期方法,包括每個子組件的shouldComponentUpdate()方法。
forceUpdate就是重新render。
有些變量不在state上，當時你又想達到這個變量更新的時候，刷新render；或者state里的某個變量層次太深，更新的時候沒有自動觸發(fā)render。
這些時候都可以手動調用forceUpdate自動觸發(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獲取DOM和獲取組件實例的方式,如何創(chuàng)建refs來獲取對應的DOM呢?目前有三種方式，本文結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10
React是一種流行的JavaScript庫,它被廣泛應用于構建Web應用程序,在React中,條件渲染是一個非常重要的概念,它允許我們根據不同的條件來呈現不同的內容,在本文中,我們將探討React如何進行條件渲染,需要的朋友可以參考下2023-11-11
在Vite構建的React項目中,直接安裝和導入Less即可使用,但需注意的是,Less的樣式作用域不局限于模塊內部,可能造成樣式污染,建議通過修改文件名和導入方式來避免此問題2024-11-11
這篇文章主要介紹了如何強制刷新react hooks組件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
在使用 React 進行開發(fā)時,key 屬性是一個至關重要的概念,尤其在渲染列表時,開發(fā)者在使用 key 屬性時,常常會遇到各種警告信息,本文將詳細解析這些警告的原因,提供有效的解決方案,并總結最佳實踐,需要的朋友可以參考下2024-12-12
useEffect()是react中的hook函數,作用是用于創(chuàng)建由渲染本身引起的操作,介紹了依賴項數組不同的區(qū)別,對react useEffect()使用相關知識感興趣的朋友一起看看吧2024-05-05
這篇文章主要介紹了JavaScript中rem布局在react中的應用 的相關資料,需要的朋友可以參考下2015-12-12
React?Server?Component混合式渲染問題詳解
React?官方對?Server?Comopnent?是這樣介紹的:?zero-bundle-size?React?Server?Components，這篇文章主要介紹了React?Server?Component:?混合式渲染,需要的朋友可以參考下2022-12-12
Vite+React搭建開發(fā)構建環(huán)境實踐記錄
這篇文章主要介紹了Vite+React搭建開發(fā)構建環(huán)境實踐,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
這篇文章主要為大家介紹了ahooks控制時機的hook實現方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07