快捷導(dǎo)航

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

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

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

React觸發(fā)render方法

1、setState

this.setState({});

2、forceUpdate

this.forceUpdate();

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

如mobx，redux等

React-forceUpdate()

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

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

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

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

forceUpdate就是重新render。

有些變量不在state上，當(dāng)時你又想達(dá)到這個變量更新的時候，刷新render；或者state里的某個變量層次太深，更新的時候沒有自動觸發(fā)render。

這些時候都可以手動調(diào)用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>);
    }
}

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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