react初步认识

React起源于Facebook的内部项目,其设计思想及其独特,属于革命性创新,性能出众,代码逻辑简单。其主要优点有:

  1. 虚拟DOM,在必要的时候才将组件渲染到真正的DOM上,减少频繁的DOM操作造成的性能问题。
  2. 组件化,React都是关于构建可复用的组件。事实上,通过React唯一要做的事情就是构建组件。得益于其良好的封装性,组件使代码复用、测试和关注分离更加简单。

简单应用

<!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>

官方例子

React提供了一个官方例子英文中文,从如何拆分组件树、如何利用React创建静态版本、如何识别最小的state、如何确认state的声明周期到添加方向数据流,较完整的展现了react的应用。