30天了解30种技术系列---(20)React .js 一个比较有意思的前端框架
2017-11-01 23:33
866 查看
React含义及特点
React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库,是为了解决一个问题:构建随着时间数据不断变化的大规模应用程序。即由数据驱动变化的UI组件。传统的UI库,我们需要使用Ajax对后台进行数据获取,往往是主动型程序。即我们需要去拉取数据,而React.js是自动拉取型,相当于可以进行监听与自动渲染,并且速度比较快。
声明式 (Declarative):数据变化后,React 概念上与点击“刷新”按钮类似,但仅会更新变化的部分
构建可组合的组件:React 都是关于构建可复用的组件。事实上,通过 React 你唯一要做的事情就是构建组件
总结一下就是:React.js 框架提供了2个功能:渲染和维护 DOM,监听 DOM 的事件
React.js 的hello world:
新建hello-react.html<!DOCTYPE html> <html> <head> <title>Hello React</title> <script src="http://fb.me/react-0.13.0.js"></script> <script src="http://fb.me/JSXTransformer-0.13.0.js"></script> </head> <body> <div id="example"></div> <script type="text/jsx"> var HelloWorld = React.createClass({ render: function() { return ( <p> Hello, <input type="text" placeholder="Your name here" />! It is {this.props.date.toTimeString()} </p> ); } }); setInterval(function() { React.render( <HelloWorld date={new Date()} />, document.getElementById('example') ); }, 500); </script> </body> </html>
在浏览器中打开 hello-react.html ,在输入框输入你的名字。你会发现 React 在用户界面中只改变了时间,你在输入框的输入内容会保留着,即使你没有写任何代码来完成这个功能。React 也为你解决了这个问题,做了正确的事。
React 是不会去操作 DOM 的,它用一种更快的内置仿造的 DOM 来操作差异,为计算出效率最高的 DOM 改变。
React 的核心JSX
JSX 就是 JavaScript,JSX 把类 XML 的语法转成纯粹 JavaScript。而React的核心概念即将JS与HTML统一打包成一个组件,然后最后输出一个HTML,所以通JSX语法来做件事会比较的容易。即我们可以使用最原生的JS。渲染HTML 标签
var myDivElement = <div className="foo" />; React.render(myDivElement, document.body);
Recat 组件示例
var HelloText = React.createClass({ render: function() { return ( <di a1e9 v> <h3>Hello, {this.props.data}</h3> </div> ); } });
大家需要注意,这个组件render的意思就是渲染,我们可以服用这个组件:直接调用HelloText对象就可以,HTML,JS一网打尽。
React 与我们以往的框架还是非常不一样的,大家可以到http://react-china.org/ 社区上找一些文档看看。希望这个介绍只是看头儿,前端技术大踏步的在发展,希望大家一起进步。
更多精彩请关注微信 : 图灵搜索
相关文章推荐
- 30天了解30种技术系列---(1)现代web应用服务器-Express.js
- 30天了解30种技术系列---(11)Java开发者梦想的框架Play
- 30天了解30种技术系列---(9)可伸缩的跨语言服务开发框架Thrift
- 30天了解30种技术系列---(6)非常赞的UI框架Flat-ui
- 30天了解30种技术系列---(3)JS的Make-GruntJS
- 30天了解30种技术系列---(7)不只有Echart,我们还有Char.js
- 30天了解30种技术系列---(4)Node.js神级开发工具-WebStorm
- 30天了解30种技术系列---(1)现代web应用服务器-Express.js
- 【web前端技术】八款JS(javascript)常用开发框架介绍及比较(web前端开发框架)
- 30天了解30种技术系列---(5)新型CSS框架-Less
- 30天了解30种技术系列---(26)MySQL自动化运维工具Inception
- 30天了解30种技术系列---(24)开源网站流量分析工具Piwik
- 30天了解30种技术系列---(16)可视化爬虫工具---Portia
- 30天了解30种技术系列(18)--- 强大的日志管理工具--Logstash
- 30天了解30种技术系列(17)---词关系分析神器Word2vec
- 30天了解30种技术系列---(10)面向Cloud的搜索引擎 ElasticSearch
- 30天了解30种技术系列---(22) Bootstrap在线编辑器4款
- 30天了解30种技术系列---(13)Docker UI框架DockerUI
- 30天了解30种技术系列(14)----Docker集群管理利器Swarm
- 2.精通前端系列技术之JS模块化开发-深入学习seaJs(四)