React中文教程 - Component Lifecycle（组件的生命周期）

最新推荐文章于 2018-11-28 14:53:56 发布

rsspub

最新推荐文章于 2018-11-28 14:53:56 发布

阅读量1.8k

点赞数

分类专栏： React 文章标签： React Lifecycle Components unmountAndReleaseRea renderComponent

本文链接：https://blog.csdn.net/rsspub/article/details/9020913

版权

React 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了React的组件生命周期，包括Mounting（附加）、Updating（更新）和Unmounting（移出）三个阶段。通过实例展示了如何使用React.renderComponent()来附加组件，并使用React.unmountAndReleaseReactRootNode()来移除组件，防止内存泄漏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<title>React | Component Lifecycle</title>
<script src="build/react.min.js"></script>
<script src="build/JSXTransformer.js"></script>
<style>h1{font-size:30px;}</style>
</head>
<body>
<script type="text/jsx">
/** @jsx React.DOM */
React.renderComponent(<div>Hello, world!</div>, document.body);
setTimeout(function() {
	React.renderComponent(<div>Goodbye, world.</div>, document.body);
}, 3000);
setTimeout(function() {
	React.renderComponent(<img src="/images/fin.png" />, document.body);
}, 2000);
setTimeout(function() {
	React.unmountAndReleaseReactRootNode(document.body);
	React.renderComponent(<h1>Hi! EveryBody.</h1>, document.body);
}, 4000);
</script>
</body>
</html>

React的组件生命周期分别是：Mounting（附加）、Updating（更新）、Unmounting（移出）

使用React.renderComponent()函数把组件附件到已经存在的DOM节点
React.renderComponent判断被附加的DOM节点是否已经存在该类型组件，如果存在则更新，否则就做为新组件附件到DOM节点
使用React.unmountAndReleaseReactRootNode()函数直接把当前DOM节点的全部组件移除，这样能避免内存暴增而导致浏览器崩溃

您可以修改并重新发布本文，如果您能留下本文的参考连结，万分谢谢！
如果您对本文存在疑问，欢迎留言或者直接对本文评论，我会在看到的第一时间回复您。