`

30天了解30种技术系列---(20)React .js 一个比较有意思的前端框架

htmljavascript 
阅读更多

  

  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 (
        <div>
          <h3>Hello, {this.props.data}</h3>
       </div>
        );
      }
  });

   

    大家需要注意，这个组件render的意思就是渲染，我们可以服用这个组件：直接调用HelloText对象就可以，HTML，JS一网打尽。

 

    React 与我们以往的框架还是非常不一样的，大家可以到http://react-china.org/ 社区上找一些文档看看。希望这个介绍只是看头儿，前端技术大踏步的在发展，希望大家一起进步。

 

   更多精彩请关注微信 : 图灵搜索

   请大家使用中国第一个为程序员打造的搜索引擎：图灵搜索，https://www.tulingss.com 

 

    

4
顶
3
踩
分享到：
| 30天了解30种技术系列(19)------开源分布式 ...
评论
2 楼 jackchan 2015-09-16  
非常感谢,我来修改一下
1 楼 bengben 2015-09-16  
jackchan,
你推出的：

图灵搜索，https://www.tulingss.com

我进入之后，我个人强力有以下建议：

第一：用户反馈机制
第二：用户UX不是炫酷，比如：我搜索是想要搜索的结果集，所以起码一页要多点items，但是。。。。
等等。。。我就没有用了，
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics