React component.forceUpdate()强制重新渲染方式

更新时间：2023年10月23日 16:17:40 作者：352328759

这篇文章主要介绍了React component.forceUpdate()强制重新渲染方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

component.forceUpdate()强制重新渲染

component.forceUpdate()

一个不常用的生命周期方法，它的作用就是强制刷新

官网解释如下

默认情况下，当组件的 state 或 props 发生变化时，组件将重新渲染。

如果 render() 方法依赖于其他数据，则可以调用 forceUpdate() 强制让组件重新渲染。

调用 forceUpdate() 将致使组件调用 render() 方法，此操作会跳过该组件的 shouldComponentUpdate()。

但其子组件会触发正常的生命周期方法，包括 shouldComponentUpdate() 方法。

如果标记发生变化，React 仍将只更新 DOM。

通常你应该避免使用 forceUpdate()，尽量在 render() 中使用 this.props 和 this.state。

通常来说

我们应该用 setState() 更新数据，从而驱动更新。

所以用到 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")
);

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

React 中的重新渲染类组件及函数组件
这篇文章主要为大家介绍了React 中的重新渲染类组件及函数组件使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
浅谈React 属性和状态的一些总结
下面小编就为大家带来一篇浅谈React 属性和状态的一些总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11
react开发教程之React 组件之间的通信方式
本篇文章主要介绍了react开发教程之React组件通信详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
React实现文件分片上传和下载的方法详解
在当今的前端开发中,处理文件流操作已经成为一个常见的需求,无论是上传、下载、读取、展示还是其他的文件处理操作,都需要高效且可靠地处理二进制数据,本文将深入探讨如何使用 React 实现文件分片上传和下载,并介绍相关的基本概念和技术,需要的朋友可以参考下
2023-08-08
react配置antd按需加载的使用
这篇文章主要介绍了react配置antd按需加载的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-02-02
React实现原生APP切换效果
最近需要使用 Hybrid 的方式开发一个 APP,交互和原生 APP 相似并且需要 IM 通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常详细,感兴趣的小伙伴跟着小编一起来看看吧
2025-01-01
React使用setState更新数组的方法示例(追加新数据)
在 React 中,setState 是管理组件状态的核心方法之一,然而,当我们需要更新状态中的数组时,如何高效且安全地操作变得尤为关键,本文将详细解析以下代码的实现逻辑,帮助你掌握在 React 中追加数组数据的最佳实践,需要的朋友可以参考下
2025-03-03
React运行机制超详细讲解
React 作为当下最为流行的前端开发框架之一，使用它可以快速构建大型 Web 应用，加上其出色的性能表现，使得众多互联网公司对它格外地青睐，这篇文章主要介绍了React运行机制
2022-11-11
react中如何对自己的组件使用setFieldsValue
react中如何对自己的组件使用setFieldsValue问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
一文详解React中如何处理高阶组件中的错误
在 React 高阶组件中处理错误是确保应用程序健壮性和稳定性的重要环节,本文为大家整理了一些处理高阶组件中错误的常见方法,需要的小伙伴可以参考下
2025-02-02