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