二、React初体验之React组件创建

(中间因为应付各种考试,处理其他事情,隔了好时间没更新,现在终于有时间了,续上!)

本文为React初始体验,因此先不考虑文件如何组织,尽量以最简单的方式让大家了解React其中的原理。

在创建组件(component)之前,大家首先需要了解一些基础知识。有ES6、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()来改变状态值。

说了这么多,开始实战吧!!!

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'));//将组件渲染到dom页面的app节点中,并向子组件传输name属性

 

 卡!到此为止,组件的创建的流程基本说完了,下一篇文章主要会讲如何将这个组件在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之前

    。。。还有好多关于组件变化状态的函数,可以点这儿查询。

作者: GeoChen

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

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出, 原文链接 如有问题, 可邮件(giser_xiaochen@163.com)咨询.

posted on 2016-07-25 17:09  GeoChen  阅读(3414)  评论(0编辑  收藏  举报