标签：
（中间因为应付各种考试，处理其他事情，隔了好时间没更新，现在终于有时间了，续上！）
本文为React初始体验，因此先不考虑文件如何组织，尽量以最简单的方式让大家了解React其中的原理。
在创建组件（component）之前，大家首先需要了解一些基础知识。有ES6、JSX语法等基础知识的同学请跳过下面一段。
ES6是JavaScript的最新标准，里面新增了许多语法方式，甚至出现了“类”的继承方式，我个人暂且把他们理解为新增了许多“语法糖”，这些“语法糖”可能带给老手的是方便，而对于我们这些菜鸟来说就是一种理解负担，但必须要看，因为这就是趋势。JSX语法，大家就姑且认为是一种能将js和html写在一起处理的语法。以上内容不展开讲，有时间会专门开一篇文章，不知道的童鞋可以先自行百度一下。
下面是今天的正题：Action……
React的原理其实非常简单，请看下图：
一句话说上面的关系：动作会影响状态数据的变化，状态数据的变化造成组件变化，组件变了有可能会造成新的动作产生，从而再影响状态数据变化……
组件（component）：给大家举个“栗子”，相信大家都刷微博吧，微博中的每一条信息都相当于有一个小面板来展示信息，这个小面板里面有发该条微博人的头像，微博内容，插图，以及“转发”、“评论”、“点赞”， 这个小面板我们就可以理解成是一个总组件，面板中的每个部分又可以认为是小组件，小组件组成了最终的大组件。因为每条微博的组成内容类似，所以我们只需要创建这样一个面板组件，重复使用。组件中都有个props属性，这个属性中存放组件的初始状态的量，通过this.props.<变量名>来调用，通过getDefaultProps()来设置默认初始的prop属性值，通过propTypes来设置props的类型、是否必须有等。
动作（action）：这个应该都熟悉，像什么onClick，onChange，onBlur等，这儿有React支持的所有事件，这些动作需要执行的内容如何定义后面会讲到。
状态数据（state）：这是React的核心部分，组件的变化就是因为state的变化引起的。state与props类似，区别是props一旦设定一般不去改变它，但是动作（action）的变化会引起状态数据（state）的随时变化，从而重新渲染组件（component）引起变化。通过getInitialState()来设置默认的状态，通过this.setState()来改变状态值。
说了这么多，开始实战吧！！！
1、创建一个文件夹，用于存放这个示例的所有文件，我将他命名为“ReactApp”，然后cd到这个文件夹下npm安装上一篇文章中提到的所有组件。
2、新建名为App.jsx 的文件，这就是我们提到的用于创建组件的地方。下面的大致结构是：一个总的组件MyComponent包含两个子组件Component1和Component2，且name属性由总组件通过props属性由上向下传递到各个子组件。
1 import React from ‘react‘;//引入react模块，用来创建组件 2 3 var MyComponent= React.createClass({//创建总组件,记得组件名一定要大写哦！不然会报错！！！ 4 render: function() { 5 return ( 6 <div> 7 <Component1 name={this.props.name}/>//通过props传递name属性 8 <Component2 name={this.props.name}/> 9 </div> 10 ); 11 } 12 }); 13 14 var Component1 = React.createClass({//创建子组件Component1 15 getDefaultProps:function () { //设置初始Props 16 return { 17 inputValue:‘随便写些啥‘, 18 }; 19 }, 20 getInitialState:function () { //设置初始State 21 return { 22 content:"Hello World", 23 }; 24 }, 25 handleClick:function () { //用户自己定义的动作函数 26 this.setState({content:"就是"+this.refs.myTextInput.value+"!!!"});//用于修改state 27 }, 28 handleChange:function () { //用户自己定义的动作函数 29 this.setState({content:this.refs.myTextInput.value}); 30 }, 31 render:function () { //组件渲染函数，最外层只能有一个标签！！！！！ 32 return ( 33 <div> 34 <h1>{this.props.name}:Component1</h1> 35 <input type="text" ref="myTextInput" placeholder={this.props.inputValue} onChange={this.handleChange} /> 36 <input type="button" value="点击" onClick={this.handleClick} /> 37 <h3>{this.state.content}</h3> 38 </div> 39 ); 40 }, 41 }); 42 43 var Component2 = React.createClass({//创建子组件Component2 44 45 getInitialState:function(){//设置state的默认初始值 46 return{ 47 counter:0, 48 }; 49 }, 50 handleAdd:function () {//action函数，state加一 51 this.state.counter+=1; 52 this.setState({counter:this.state.counter});//设置当前的state值 53 }, 54 handleMinus:function () {//action函数，state减一 55 this.state.counter-=1; 56 this.setState({counter:this.state.counter}); 57 }, 58 handleBack:function () {//action函数，state归零 59 this.state.counter=0; 60 this.setState({counter:this.state.counter}); 61 }, 62 render:function(){//组件渲染 63 return( 64 <div> 65 <h1>{this.props.name}:Component2</h1> 66 <input type="button" value="Add 1" onClick={this.handleAdd} /> 67 <input type="button" value="Minus 1" onClick={this.handleMinus} /> 68 <input type="button" value="Back 0" onClick={this.handleBack} /> 69 <h2>{this.state.counter}</h2> 70 </div> 71 ); 72 }, 73 }); 74 export {MyComponent} ;//组件输出，（这儿插一句题外话，export是ES6制定的模块加载方式，与import配合使用，而exports是CommonJS的标准，与require等配合使用，他们的区别有机会另开文章将）
3、组件虽然建好了，但是浏览器不会认识这种形式的组件，这时候就需要用到react提供的另一个库“react-dom”，它的作用是将组件渲染到真正的dom树上，很简单新建文件名为main.js的文件。
1 import React from ‘react‘;//引入“react”组件 2 import ReactDOM from ‘react-dom‘;//引入“react-dom”组件 3 import {MyComponent} from ‘./App.jsx‘;//引入我们刚才写好的MyComponent组件 4 ReactDOM.render(<MyComponent name="chen" />,document.getElementById(‘app‘));
卡！到此为止，组件的创建的流程基本说完了，下一篇文章主要会讲如何将这个组件在NodeJS下利用Webpack打包并以热加载模式，让他真正跑起来，最后一片文章更完后我会将整个例子放在github上，有兴趣的同学可以去看看，试试。
写在最后的n段话：
1、React的优势在于它首先会创建一个虚拟dom，就像我们上面写的组件，如果组件中的数据有更新，它不会直接去操作浏览器中的真实dom，而是先在自己创建的虚拟组件中利用diff算法，找出不同的地方修改，然后将其渲染到浏览器上。没有对真实dom大量的操作也就意味着浏览器端渲染速度加快，这基本就是React的核心所在。
2、在创建组件（Component）的时候，我们只用到了其中的一少部分函数或者属性，还有没有用到的如：
①propTypes，它是一个Json对象，用于设置组件中props属性的类型，如number，string等，保证属性的安全性；
②组件在渲染的时候会有几个状态，react官方把它叫做Lifecycle Methods，其实就是设置在组件渲染到浏览器前要做什么，渲染后做什么，对应的API如下：
componentWillMount();//组件渲染前
componentDidMount();//组件渲染完成后
componentWillUpdate();//由于Action驱动，组件在更新前
componentDidUpdate();//组件在更新完成后
componentWillReceiveProps();//组件在接受到props之前
。。。还有好多关于组件变化状态的函数，可以点这儿查询。
标签：
原文地址：http://www.cnblogs.com/GeoChen/p/5704200.html
