React 入门简介

最新推荐文章于 2024-09-13 15:06:03 发布

炫街舞

最新推荐文章于 2024-09-13 15:06:03 发布

阅读量517

点赞数

分类专栏： React

React 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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 特点
1. 声明式设计 −React采用声明范式，可以轻松描述应用。
2. 高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
3. 灵活 −React可以与已知的库或框架很好地配合。
4. JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5. 组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6. 单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

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",null,"hello world"),
              React.createElement("h1",null,"这里是一些文本")
             )
         ) 
      }
});
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

http://www.runoob.com/react/react-tutorial.html