React?component.forceUpdate()強制重新渲染方式
更新時間：2023年10月23日 16:17:40 作者：352328759
這篇文章主要介紹了React?component.forceUpdate()強制重新渲染方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
component.forceUpdate()強制重新渲染
component.forceUpdate()
一個不常用的生命周期方法，它的作用就是強制刷新
官網(wǎng)解釋如下
默認情況下，當組件的 state 或 props 發(fā)生變化時，組件將重新渲染。
如果 render() 方法依賴于其他數(shù)據(jù)，則可以調(diào)用 forceUpdate() 強制讓組件重新渲染。
調(diào)用 forceUpdate() 將致使組件調(diào)用 render() 方法，此操作會跳過該組件的 shouldComponentUpdate()。
但其子組件會觸發(fā)正常的生命周期方法，包括 shouldComponentUpdate() 方法。
如果標記發(fā)生變化，React 仍將只更新 DOM。
通常你應該避免使用 forceUpdate()，盡量在 render() 中使用 this.props 和 this.state。
通常來說
我們應該用 setState() 更新數(shù)據(jù)，從而驅(qū)動更新。
所以用到 component.forceUpdate() 的情況并不多
class App extends React.Component {
constructor(props) {
super(props);
console.log("constructor")
this.onClickHandler = this.onClickHandler.bind(this);
}
componentWillMount() {
console.log("componentWillMount")
}
componentDidMount() {
console.log("componentDidMount")
}
componentWillUnmount() {
console.log("componentWillUnmount")
}
componentWillReceiveProps() {
console.log("componentWillReceiveProps")
}
shouldComponentUpdate() {
console.log("shouldComponentUpdate")
return true
}
componentWillUpdate() {
console.log("componentWillUpdate")
}
componentDidUpdate() {
console.log("componentDidUpdate")
}
onClickHandler() {
console.log("onClickHandler")
this.forceUpdate();
}
render() {
console.log("render")
return (
<button onClick={this.onClickHandler}> click here </button>
);
}
}
ReactDOM.render(<App />,
document.getElementById("react-container")
);
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了React?中的重新渲染類組件及函數(shù)組件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
下面小編就為大家?guī)硪黄獪\談React 屬性和狀態(tài)的一些總結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
本篇文章主要介紹了react開發(fā)教程之React組件通信詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
在當今的前端開發(fā)中,處理文件流操作已經(jīng)成為一個常見的需求,無論是上傳、下載、讀取、展示還是其他的文件處理操作,都需要高效且可靠地處理二進制數(shù)據(jù),本文將深入探討如何使用 React 實現(xiàn)文件分片上傳和下載,并介紹相關(guān)的基本概念和技術(shù),需要的朋友可以參考下2023-08-08
這篇文章主要介紹了react配置antd按需加載的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
最近需要使用 Hybrid 的方式開發(fā)一 個 APP,交互和原生 APP 相似并且需要 IM 通信,本文給大家介紹了使用React實現(xiàn)原生APP切換效果,文中通過代碼示例講解的非常詳細,感興趣的小伙伴跟著小編一起來看看吧2025-01-01
React使用setState更新數(shù)組的方法示例(追加新數(shù)據(jù))
在?React?中,setState?是管理組件狀態(tài)的核心方法之一,然而,當我們需要更新狀態(tài)中的數(shù)組時,如何高效且安全地操作變得尤為關(guān)鍵,本文將詳細解析以下代碼的實現(xiàn)邏輯,幫助你掌握在?React?中追加數(shù)組數(shù)據(jù)的最佳實踐,需要的朋友可以參考下2025-03-03
React 作為當下最為流行的前端開發(fā)框架之一，使用它可以快速構(gòu)建大型 Web 應用，加上其出色的性能表現(xiàn)，使得眾多互聯(lián)網(wǎng)公司對它格外地青睞，這篇文章主要介紹了React運行機制2022-11-11
react中如何對自己的組件使用setFieldsValue
react中如何對自己的組件使用setFieldsValue問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
在?React?高階組件中處理錯誤是確保應用程序健壯性和穩(wěn)定性的重要環(huán)節(jié),本文為大家整理了一些處理高階組件中錯誤的常見方法,需要的小伙伴可以參考下2025-02-02