2、React初体验之React组件建立

（中间由于应付各类考试，处理其余事情，隔了好时间没更新，如今终于有时间了，续上！）

本文为React初始体验，所以先不考虑文件如何组织，尽可能以最简单的方式让你们了解React其中的原理。

在建立组件（component）以前，你们首先须要了解一些基础知识。有ES六、JSX语法等基础知识的同窗请跳过下面一段。

ES6是JavaScript的最新标准，里面新增了许多语法方式，甚至出现了“类”的继承方式，我我的暂且把他们理解为新增了许多“语法糖”，这些“语法糖”可能带给老手的是方便，而对于咱们这些菜鸟来讲就是一种理解负担，但必需要看，由于这就是趋势。JSX语法，你们就姑且认为是一种能将js和html写在一块儿处理的语法。以上内容不展开讲，有时间会专门开一篇文章，不知道的童鞋能够先自行百度一下。

下面开始今天的正题，One、Two、Three、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()来改变状态值。

说了这么多，开始实战吧！！！

一、建立一个文件夹，用于存放这个示例的全部文件，我将他命名为“ReactApp”，而后cd到这个文件夹下npm安装上一篇文章中提到的全部组件。

二、新建名为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等配合使用，他们的区别有机会另开文章将）

 三、组件虽然建好了，可是浏览器不会认识这种形式的组件，这时候就须要用到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'));//将组件渲染到dom页面的app节点中，并向子组件传输name属性

 

 卡！到此为止，组件的建立的流程基本说完了，下一篇文章主要会讲如何将这个组件在NodeJS下利用Webpack打包并以热加载模式，让他真正跑起来，最后一片文章更完后我会将整个例子放在github上，有兴趣的同窗能够去看看，试试。下面是效果图

 写在最后的n段话：

一、React的优点在于它首先会建立一个虚拟dom，就像咱们上面写的组件，若是组件中的数据有更新，它不会直接去操做浏览器中的真实dom，而是先在本身建立的虚拟组件中利用diff算法，找出不一样的地方修改，而后将其渲染到浏览器上。没有对真实dom大量的操做也就意味着浏览器端渲染速度加快，这基本就是React的核心所在。

二、在建立组件（Component）的时候，咱们只用到了其中的一少部分函数或者属性，还有没有用到的如：

　　①propTypes，它是一个Json对象，用于设置组件中props属性的类型，如number，string等，保证属性的安全性；

　　②组件在渲染的时候会有几个状态，react官方把它叫作Lifecycle Methods，其实就是设置在组件渲染到浏览器前要作什么，渲染后作什么，对应的API以下：

　　　　componentWillMount();//组件渲染前

　　　　componentDidMount();//组件渲染完成后

　　　　componentWillUpdate();//因为Action驱动，组件在更新前

　　　　componentDidUpdate();//组件在更新完成后

　　　　componentWillReceiveProps();//组件在接受到props以前

　　　　。。。还有好多关于组件变化状态的函数，能够点这儿查询。

做者： GeoChen

出处： http://www.cnblogs.com/GeoChen>

本文版权归做者和博客园共有，欢迎转载，但未经做者赞成必须保留此段声明，且在文章页面明显位置给出, 原文连接 若有问题， 可邮件（giser_xiaochen@163.com）咨询.