React中文教程 - Component Lifecycle(组件的生命周期)
2013-06-04 11:56
686 查看
<!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节点的全部组件移除,这样能避免内存暴增而导致浏览器崩溃
您可以修改并重新发布本文,如果您能留下本文的参考连结,万分谢谢!
如果您对本文存在疑问,欢迎留言或者直接对本文评论,我会在看到的第一时间回复您。
相关文章推荐
- React component lifecycle生命周期管理
- Flex Component instantiation life cycle | Flex组件实例化生命周期
- React Component Lifecycle(生命周期)
- React入门教程 - 组件生命周期
- 转载---React Component Lifecycle
- React中文文档之State and Lifecycle
- React中文教程 - Advanced Components(组件高级使用)
- DOJO组件生命周期(the life cycle of dojo widget)
- React入门教程 - 组件生命周期
- DOJO组件生命周期(the life cycle of dojo widget)
- React Component Lifecycle
- Lifecycle Activity和Fragment生命周期感知组件 LifecycleObserver
- React组件的生命周期(LeftCycle)详解
- [React Fundamentals] Component Lifecycle - Mounting Basics
- DOJO组件生命周期(the life cycle of dojo widget)
- DOJO组件生命周期(the life cycle of dojo widget)
- [React Fundamentals] Component Lifecycle - Mounting Usage
- 组件的生存周期Component Life Cycle
- React中文教程 - Component Basics(组件基础)
- React中文教程 - Component Data(外部参数及私有变量)