快捷導(dǎo)航

React觸發(fā)render的實(shí)現(xiàn)方法

更新時(shí)間：2023年10月23日 15:54:03 作者：追影的React開發(fā)者

這篇文章主要介紹了React觸發(fā)render的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

React觸發(fā)render方法

1、setState

this.setState({});

2、forceUpdate

this.forceUpdate();

3、通過狀態(tài)管理

如mobx，redux等

React-forceUpdate()

默認(rèn)情況下，當(dāng)組件的state或props改變時(shí)，組件將重新渲染。

如果你的render()方法依賴于一些其他的數(shù)據(jù)，你可以告訴React組件需要通過調(diào)用forceUpdate()重新渲染。

調(diào)用forceUpdate()會(huì)導(dǎo)致組件跳過shouldComponentUpdate(),直接調(diào)用render()。

這將觸發(fā)組件的正常生命周期方法,包括每個(gè)子組件的shouldComponentUpdate()方法。

forceUpdate就是重新render。

有些變量不在state上，當(dāng)時(shí)你又想達(dá)到這個(gè)變量更新的時(shí)候，刷新render；或者state里的某個(gè)變量層次太深，更新的時(shí)候沒有自動(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-native-webview和h5通信用法及說明
本文詳細(xì)介紹了React?Native和WebView之間的通信方式,包括HTML向RN通信、RN向HTML通信以及使用postMessage進(jìn)行消息通信,通過具體的函數(shù)和代碼示例,展示了如何實(shí)現(xiàn)雙向通信,并提供了一個(gè)在項(xiàng)目中實(shí)際應(yīng)用的調(diào)用示例
2026-03-03
Electron+React應(yīng)用打包全流程
本文主要介紹了Electron+React應(yīng)用打包全流程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-01-01
React?狀態(tài)管理中的Jotai詳解
Jotai是一個(gè)簡單、靈活、高效的React狀態(tài)管理庫,通過原子和派生狀態(tài)的設(shè)計(jì),使得狀態(tài)管理變得直觀和高效,它適用于小型應(yīng)用、組件庫和大型項(xiàng)目的局部狀態(tài)管理,且與TypeScript兼容,Jotai的社區(qū)正在壯大,提供了豐富的資源和支持,感興趣的朋友跟隨小編一起看看吧
2024-11-11
React組件中按鈕的loading狀態(tài)失效問題的解決方案
在React開發(fā)過程中,我遇到這樣的情況：頁面按鈕的loading屬性失效,盡管通過useEffect打印發(fā)現(xiàn)loading狀態(tài)（確實(shí)在true和false之間切換,但按鈕卻沒有表現(xiàn)出預(yù)期的加載效果,所以本文給大家介紹了失效的解決方案,需要的朋友可以參考下
2025-07-07
useState?解決文本框無法輸入的問題詳解
這篇文章主要為大家介紹了useState?解決文本框無法輸入的問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
ES6下React組件的寫法示例代碼
這篇文章主要給大家介紹了在ES6下React組件的寫法，其中包括定義React組件、聲明prop類型與默認(rèn)prop、設(shè)置初始state、自動(dòng)綁定，文中分別給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。
2017-05-05
React中父組件如何獲取子組件的值或方法
這篇文章主要介紹了React中父組件如何獲取子組件的值或方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
深入探討前端框架react
本文帶領(lǐng)大家一起探討前端框架react，涉及到前端框架react相關(guān)知識(shí)，對(duì)前端框架react相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
2015-12-12
React createElement方法使用原理分析介紹
這篇文章主要為大家介紹了React的createElement方法源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
React-hook-form-mui基本使用教程(入門篇)
react-hook-form-mui可以幫助開發(fā)人員更輕松地構(gòu)建表單,它結(jié)合了React?Hook?Form和Material-UI組件庫,使用react-hook-form-mui,開發(fā)人員可以更快速地構(gòu)建表單,并且可以輕松地進(jìn)行表單驗(yàn)證和數(shù)據(jù)處理,本文介紹React-hook-form-mui基本使用,感興趣的朋友一起看看吧
2024-02-02