React.render和reactDom.render的区别
2016-03-14 15:46
471 查看
刚开始学习react.js。发现网上的资料,有些是写着react.render,有些写着reactDom.render.觉得很奇怪就查阅了一下资料。解释如下:
这个是react最新版api,也就是0.14版本做出的改变。主要是为了使React能在更多的不同环境下更快、更容易构建。于是把react分成了react和react-dom两个部分。这样就为web版的react和移动端的React Native共享组件铺平了道路。也就是说我们可以跨平台使用相同的react组件。
新的react包包含了React.createElement,.createClass,.Component,.PropTypes,.children以及其他元素和组件类。这些都是你需要构建组件时助手。
而react-dom包包括ReactDOM.render,.unmountComponentAtNode和.findDOMNode。在
总的来说,两者的区别就是:ReactDom是React的一部分。ReactDOM是React和DOM之间的粘合剂,一般用来定义单一的组件,或者结合ReactDOM.findDOMNode()来使用。更重要的是ReactDOM包已经允许开发者删除React包添加的非必要的代码,并将其移动到一个更合适的存储库。
ReactDOM的用法:
React的用法:
官网更多详细解析参照:https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html
这个是react最新版api,也就是0.14版本做出的改变。主要是为了使React能在更多的不同环境下更快、更容易构建。于是把react分成了react和react-dom两个部分。这样就为web版的react和移动端的React Native共享组件铺平了道路。也就是说我们可以跨平台使用相同的react组件。
新的react包包含了React.createElement,.createClass,.Component,.PropTypes,.children以及其他元素和组件类。这些都是你需要构建组件时助手。
而react-dom包包括ReactDOM.render,.unmountComponentAtNode和.findDOMNode。在
react-dom/server,有ReactDOMServer.renderToString和.renderToStaticMarkup服务器端渲染支持。
总的来说,两者的区别就是:ReactDom是React的一部分。ReactDOM是React和DOM之间的粘合剂,一般用来定义单一的组件,或者结合ReactDOM.findDOMNode()来使用。更重要的是ReactDOM包已经允许开发者删除React包添加的非必要的代码,并将其移动到一个更合适的存储库。
ReactDOM的用法:
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript" src="../js/react.min.js"></script> <script type="text/javascript" src="../js/react-dom.min.js"></script> <script type="text/javascript" src="../js/browser.min.js"></script> </head> <body> <div id="a"></div> <script type="text/babel"> ReactDOM.render( <h1>React入门教程</h1>, document.getElementById("a") ); </script> </body> </html>
React的用法:
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript" src="../js/react.min.js"></script> <script type="text/javascript" src="../js/react-dom.min.js"></script> <script type="text/javascript" src="../js/browser.min.js"></script> </head> <body> <div id="a"></div> <script type="text/babel"> React.render(<h1>React入门教程</h1>,document.getElementById("a")); </script> </body> </html>
官网更多详细解析参照:https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html
相关文章推荐
- React框架
- [转] What is the point of redux when using react?
- React + ES6 实践中遇到的问题
- ReactiveCocoa
- ReactJS实用技巧(2):从新人大坑——表单组件来看State
- React.render和reactDom.render的区别
- React Native for android 项目驱动教程
- React-Native 自述
- Reactor
- ReactNative入门(安卓)——API(下)
- (记录向)reactjs学习记录
- react-native 学习中网站及博客
- react-js demo 地址
- react.js-12-promise
- react.js-10-渐隐动画
- react.js-09-输入刷新界面
- react.js-09-点击刷新state
- react.js-08-state
- react.js-07-组件点击
- react.js-06-propTypes类型校验