React了解

 

根据博主  http://www.ruanyifeng.com/blog/2015/03/react.html  的几个Demo（https://github.com/ruanyf/react-demos），持续学习一下React，一款负责UI框架的语言（使用虚拟的DOM，并且将它们储存起来，每当状态发生变化的时候就会创造新的虚拟节点和以前的进行对比，让变化的部分进行渲染。整个过程没有了获取、操作dom节点的步骤，只有一个渲染的过程，所以react就是一个ui框架。）。

首先get了几个sublime的快捷键，非常好用！command+D：选中更多的相同元素；command+control+G：选中所有相同项；command+control+上或下：将整行上移或者下移；control+shift+W:将选中的加上标签。这个几个还需持续练习！另外command+回车是换到下一行（光标在本行中）。

 

React需要引用的几个JS文件

 

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

script标签：

<script type="text/babel"></script>　　//为什么写text/bable呢，这样可以使用JSX

 

1. ReactDOM.render()方法   html语言可以直接写在里面；

var arr = [
  <h1>Hello world!</h1>,
  <h2>React is awesome</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

document.getElementById('example') 之后无分号！数组使用[]扩住。
　2.React.createClass 方法就用于生成一个组件类
　　所有组件类都必须有自己的 render 方法，用于输出组件。
　

render: function() {},
propTypes: {}, /*参数校验*/
XXXX: function(){},
getInitialState: function() {}/*初始态，然后用户互动，导致状态变化，从而触发重新渲染 UI*/

　　举一个例子

<script type="text/babel">
      var Input = React.createClass({
        getInitialState: function() {
          return {value: 'Hello!'};
        },
        handleChange: function(event) {
          this.setState({value: event.target.value});
        },
        render: function () {
          var value = this.state.value;
          return (
            <div>
              <input type="text" value={value} onChange={this.handleChange} />
              <p>{value}</p>
            </div>
          );
        }
      });

      ReactDOM.render(<Input/>, document.getElementById('example'));
    </script>