React了解

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>

  

 
上一篇:bzoj1221: [HNOI2001] 软件开发


下一篇:VirtualAlloc申请进程空间