React 入门简介

发布时间：2020-12-15 08:18:33 所属栏目：百科来源：网络整理

导读：AngularJS、React .... 都是近年比较火的一些新的前端框架，他们有着快捷的响应效率，把以前的繁琐的技术思想推翻重新创造了一套新的技术革新。 React 是一套开源的、免费的前端框架，由 Facebook 来维护其代码。它为大规模单页应用提供了解决方案；通过对DO

AngularJS、React .... 都是近年比较火的一些新的前端框架，他们有着快捷的响应效率，把以前的繁琐的技术思想推翻重新创造了一套新的技术革新。

React 是一套开源的、免费的前端框架，由 Facebook 来维护其代码。它为大规模单页应用提供了解决方案；通过对DOM的模拟，最大限度地减少与DOM的交互；使用简洁易懂的JSX语法。React 响应快速的缘由是由于 js对象要快于DOM对象；React对象模拟DOM是js对象；React并不访问“实际”的DOM；只在需要时才对DOM进行写入；有效地对DOM进行更新。

传统的JavaScript与DOM的交互是先获取DOM，getElementById，对其元素属性、内容、结构进行更新，再渲染回DOM。
Backbone View 则一直获取数据渲染DOM，降低了效率。
而 React 不用实际操作DOM，通过一个 React Virtual DOM 虚拟DOM与JavaScript进行交互，在需要的时候才去渲染、更新DOM。

关于React 在 Chrome 中的可用插件：react-detector、React Developer Tools

React 官网地址：
http://reactjs.cn/react/docs/getting-started.html

React 代码示例1：

<script src="../lib/react.min.js">
<script src="../lib/react-dom.min.js">
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js">
<body>
<script type="text/bable"> 
var helloWorld = React.createClass({ 
   render:function(){ 
       return( React.createElement("div",null,React.createElement("h1","hello world"),"这里是一些文本")
             )
         ) 
      }
});
ReactDOM.render(React.createElement(helloWorld,null),document.body); 
</script>

React 代码示例2——组件应用：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="GB2312">
    <title>React 组件应用小示例</title>
<script src="lib/react.min.js"></script>
<script src="lib/react-dom.min.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
  <style>
    html,body{
	   font-family:"Microsoft YaHei"
	}
  </style>
  </head>
  <body>

<div id="react-container"></div>
<script type="text/babel"> 
var MyComponent = React.createClass({
    render:function(){
         return <div>我的组件</div>
    }
});
ReactDOM.render(<MyComponent/>,document.getElementById('react-container')); 
</script>
   
  </body>
</html>

参考资料：

http://v.youku.com/v_show/id_XMTY2MTIzNTI2MA==.html?spm=a2hzp.8244740.0.0

http://v.youku.com/v_show/id_XMTY2MTQ0NDUyOA==.html?spm=a2h0j.8191423.module_basic_relation.5~5!2~5~5!3~5!2~1~3~A

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!