- <!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" />,2000);
- setTimeout(function() {
- React.unmountAndReleaseReactRootNode(document.body);
- React.renderComponent(<h1>Hi! EveryBody.</h1>,4000);
- </script>
- </body>
- </html>
React的组件生命周期分别是：Mounting（附加）、Updating（更新）、Unmounting（移出）
- 使用React.renderComponent()函数把组件附件到已经存在的DOM节点
- React.renderComponent判断被附加的DOM节点是否已经存在该类型组件，如果存在则更新，否则就做为新组件附件到DOM节点
- 使用React.unmountAndReleaseReactRootNode()函数直接把当前DOM节点的全部组件移除，这样能避免内存暴增而导致浏览器崩溃
您可以修改并重新发布本文，如果您能留下本文的参考连结，万分谢谢！ 如果您对本文存在疑问，欢迎留言或者直接对本文评论，我会在看到的第一时间回复您。
