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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
React Fiber 是 React 16 中引入的新的協(xié)調(diào)引擎或重寫的核心算法, 真針Fiber的一個重要的核心概念Fiber Node,這次主要的研究對象是： 如何從使用者/學習 者角度 在js 代碼上 拿到fiber 樹結(jié)構(gòu)的信息,,需要的朋友可以參考下2024-04-04
用React實現(xiàn)一個完整的TodoList的示例代碼
本篇文章主要介紹了用React實現(xiàn)一個完整的TodoList的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
react執(zhí)行【npx create-react-app my-app】出現(xiàn)常見錯誤的解決辦法
文章主要介紹了在使用npx創(chuàng)建React應用時可能遇到的幾種常見錯誤及其解決方法,包括缺少依賴、網(wǎng)絡問題和npx解析錯誤等,并提供了相應的解決措施,此外,還提到了使用騰訊云云產(chǎn)品來支持React應用開發(fā)2024-11-11
React+umi+typeScript創(chuàng)建項目的過程
這篇文章主要介紹了React+umi+typeScript創(chuàng)建項目的過程,結(jié)合代碼介紹了項目框架搭建的方式，本文給大家講解的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
這篇文章主要介紹了react如何將字符串轉(zhuǎn)義成html語句問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
useContext是React提供的一個鉤子函數(shù),用于在函數(shù)組件中訪問和使用Context,useContext的實現(xiàn)原理涉及React內(nèi)部的機制,本文給大家介紹react中的useContext具體實現(xiàn),感興趣的朋友一起看看吧2023-11-11
在React應用中，為了讓數(shù)據(jù)在組件間共享，常見的方式是讓它們以props的形式自頂向下傳遞，如果數(shù)據(jù)要在組件樹不同層級共享，那么這些數(shù)據(jù)必須逐層傳遞直到目的地，Context如同管道，它將數(shù)據(jù)從入口直接傳遞到出口，使用Context能避免“prop-drilling”2023-06-06
本文詳細的介紹了React傳遞參數(shù)的幾種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-06-06
React函數(shù)式組件Hook中的useState函數(shù)的詳細解析
Hook 就是 JavaScript 函數(shù)，這個函數(shù)可以幫助你鉤入(hook into) React State以及生命周期等特性，這篇文章主要介紹了React Hook useState函數(shù)的詳細解析的相關資料,需要的朋友可以參考下2022-10-10
React Native 自定義下拉刷新上拉加載的列表的示例
本篇文章主要介紹了React Native 自定義下拉刷新上拉加載的列表的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03