Total Pageviews

Tuesday, 26 September 2017

react入门

react.js的提出

react.js的首次提出是在2014年Facebook的f8大会上。顺便科普一下f8大会，f8大会是由Facebook组织的年度的技术峰会，之所以叫f8，就是看大家在8小时以内能做出哪些有意思的东西。
react.js称为颠覆式前端UI开发框架。目前基于html的前端开发变得越来越复杂，传统的开发方式基于来自服务器和来自用户输入的交互数据,动态反应到复杂界面的时候，代码量变得越来越大，难以维护。
比如，前端开发框架jquey，每次数据更新，必须手动把数据更新渲染到ui界面上,代码量极大。基于此，google推出的angular.js的双向数据绑定很好的解决了这个问题。但是angular.js也有自身的一些不足。1：angular过重，不适用于对性能要求特别高的站点。2：ui组件封装比较复杂，不利于重用。而react解决了所有的这些问题。
ReactJS官网地址：http://facebook.github.io/react/
Github地址：https://github.com/facebook/react

react.js的特点

1、就是轻，数据渲染响应非常快。

复杂或频繁的DOM操作通常是性能瓶颈产生的原因。React为此引入了虚拟DOM（Virtual DOM）的机制：在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。尽管每一次都需要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操作的仅仅是Diff部分，因而能达到提高性能的目的。

2：组件化开发思想。

React推荐以组件的方式去重新思考UI构成，将UI上每一个功能相对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体UI的构建。

react试用场景

react 这么厉害到底适用于哪些场景呢？
1、复杂场景下的高性能要求。
2、重用组件库，组件组合。

react html、css基础实践

下面让我们来看看一组代码：

1



2



3



4



5



6



7



8



9



10



11



12



13



14



15



16



17



18



19



20



21



22



23



24



25



26



27



28



29



<html>



<head>



  <script src="../build/react.js"></script>



  <script src="../build/react-dom.js"></script>



  <script src="../build/browser.min.js"></script>



  <style type="text/css">



   .redColor{



    color: red;



   }



  </style>



</head>



<body>



  <div id="example"></div>



  <script type="text/babel">



    var Hello = React.createClass({



      render:function(){



          var styleObj = {



            textDecoration:'underline'



          };



        return <div className="redColor" style={{fontSize:'18px'}}>Hello {this.props.name}</div>



      }



    });



    ReactDOM.render(



      <Hello name="World"/>,



      document.getElementById('example')



    );



  </script>



</body>



</html>
现在来解释一下这段代码
1.react用的是jsx，是facebook为react开发的一套语法糖。语法糖是计算机中添加的一种语法，对语言的功能没有影响，但是更方便程序员使用，增加可读性减少程序出错机会。类似的还有CoffeeScript、TypeScript等。最终都被解析库解析成js。这里引入的browser.js 就是jsx的解析库。作用是将 JSX 语法转为 JavaScript 语法。另外 <script> 标签的 type 属性为 text/babel 。表明这是jsx语法。
2.jsx为我们带来的便利就是，我们可以在js里写类dom的结构，比我们用原生js拼接字符串要简单方便许多。jsx语法允许我们生成原生的dom标签，还可以生成自定义标签。比如hello，这些统称为react components.通过调用ReactDOM将react components呈现在页面上。
3.ReactDOM.render是React的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。第一个参数是要插入的components，第二个参数是要插入的容器。
自定义的标签是通过React.createClass申明，参数是一个js的对象。return的内容就是渲染的结构。遇到 HTML 标签（以 <开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。
4.给标签添加css属性有两种：
一种：用外联样式，注意这里是className，因为这是jsx语法，class在js中已经是一个保留关键字。
二种：内联样式。在react中内联样式必须用样式对象来表示，在react中内联样式必须用样式对象来表示，必须用驼峰。且用｛｛｝｝包裹。这里为什么要用｛｛｝｝，让我们再看看另一种写法就一目了然了。

1



2



3



4



5



6



7



8



9



10



11



12



13



14



15



<div id="example"></div>



<script type="text/babel">



  var Hello = React.createClass({



    render:function(){



        var styleObj = {



          fontSize:'18px'



        };



      return <div className="redColor" style={styleObj}>Hello {this.props.name}</div>



    }



  });



  ReactDOM.render(



    <Hello name="World"/>,



    document.getElementById('example')



  );



</script>
这里申明一个样式对象，用｛｝包裹就能以js的方式来解析。和｛｛fontSize:"18px"｝｝异曲同工。
可以隐约的看到，react的组件通过样式对象的申明可以，react组件是html、css、js的集合，成为真正意义上的独立组件。

这次我们简单介绍了react的由来、特点、应用场景。以及，jsx语法糖，如何生成自定义标签，插入节点，添加css样式，这些都是react的基础.
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)