ReactJS学习笔记(一)-深入理解ReactJS的面向组件即对象
生活还是美好的，正如天气与海。
前端技术这么火爆，咱也来凑凑热闹呗，学习学习ReactJS，今天就来深入了解下这个超强悍的美少女战士吧！
前期的开发环境准备、什么万能的HelloWord咱就不在这里啰嗦了，免得各位看官烦多么不值得。
一、ReactJS的简介
- ReactJS到底什么鬼？
大体可以概括为：虚拟DOM（Virtual DOM）和组件化。这当然不是我总结的，但是这两点随着这篇博文，你就完全可以理解。- 为什么要使用虚拟的DOM？
在Web开发中，我们总需要将变化的数据实时反应到UI上，这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因。大家应该都深有体会吧，隐藏显示等等一系列的操作。- 怎么组件化的呢？
如果你是java工程师，就很好理解了，好比一个类(对象)，这个对象是可以进行复用的（传入的参数不同），可以称一个java类就是一个"组件化"的东东，ReactJS也是这种思维来实现组件化的。通过定义一个组件(对象/页面DOM)，然后通过传入不同的参数来实现一个具体的对象，从而实现复用等功能。二、开始上手
1、创建一个HTML页面，并引入react.js与JSXTransformer.js两个js即可，reactjs是不依赖Jquery的，但可以与Jquery同时使用的。
<!DOCTYPE html>
<html>
<head lang="en">
<!--解决中文乱码-->
<meta charset="UTF-8">
<title></title>
<script src="../../dist/react/react.js"></script>
<script src="../../dist/react/JSXTransformer.js"></script>
<!--如下的这种引用方式是不正确的，必须使用上面的引用方式-->
<!-- <script src="../../dist/react/JSXTransformer.js"/> -->
</head>
<body>
</body>
</html>注意：
1、js的引用一定要在head标签中，也就是在body标签之前进行引用；
2、如上的注释，一定要采用全引用方式，而不能使用半引用方式。
2、在body标签中创建一个div，id属性一定要有。
<div id="index-0329-0031"></div>解释：
1、这里的div是真实的DOM，而非ReactJS中的虚拟DOM；
2、ReactJS的组件将通过document.getElementById(‘index-0329-0031’)的方式渲染到页面。
3、在body标签中编写一段JS代码，type暂时必须为“text/jsx”
<script type="text/jsx"> <!-- 这里是你的ReactJS代码--> </script>解释：
1、为什么暂时必须是“text/jsx”呢？因为ReactJS默认浏览器是不识别的，需要采用jsx进行解释一下，当然也可以使用官方的tools进行编译一下，即可不引用type属性，直接引用普通js。
4、创建一个简单的组件InputState ，包括label、text、button三个元素
<script type="text/jsx">
/* 定义组件（首字母比较大写），相当于java中的类的声明 */
var InputState = React.createClass({
//渲染DOM，相当于java的main函数
render: function () {
return (
<div>
<label>{this.props.labelName}:</label>
<input type={this.props.inputType} ref={this.props.inputRef} name={this.props.inputName} disabled=false />
<button>停用</button>
</div>
);
}
});
/* render函数共有三个参数， 1、要渲染的组件，也就是DOM 2、需要被渲染的页面元素，注意必须使用document.getElement...进行调用 3、渲染成功的回调 */
React.render(
/* InputState 相当于java中的类，具体调用render函数 */
<InputState labelName = '用户名' inputType="text" inputRef="userName" inputName="userName"/>,
document.getElementById('index-0329-0031'),
function () {
console.log("元素渲染成功！");
}
);
</script>运行效果：
解释：
1、组件InputState 相当于java的类（创一个java类InputState）；
2、render方法相当于java的main函数，参数为labelName、inputType、inputRef、inputName，值分别为“用户名”、“text”、“userName”、“userName”；
3、方法React.render(要初始化的组件，渲染到那个DOM，渲染成功的回调）。总结：
定义了一个InputState组件，并使用React.render方法进行渲染操作，传入初始化的组件名及参数、需要被渲染的真是DOM及渲染成功的回调。注意几点：
1、获取属性的值用的是this.props.属性名
2、创建的组件名称首字母必须大写。
3、为元素添加css的class时，要用className。
4、组件的style属性的设置方式也值得注意，要写成style={{width: this.state.witdh}}。
5、更新4步骤中的代码，加入button的点击事件、初始化函数，state中变量的调用
<script type="text/jsx">
/* 定义组件（首字母比较大写），相当于java中的类的声明 */
var InputState = React.createClass({
//初始化加载
getInitialState: function () {
/* 1、初始化时，将被执行 2、必须return null或者一个对象，数据发生变化，将重新渲染DOM 3、相当于java中全局变量的声明 4、值发生变化时，render将会重新被渲染 */
return {isConsole:true,enable:false,buttonName:'停用'}
},
//点击事件
handleClick: function (event) {
var buttonName = '停用';
if(this.state.buttonName == '停用'){
if(this.state.isConsole) console.log('输入的用户名为' + this.refs.userName.getDOMNode().value.trim());
buttonName = '启用'
}
//更改state中对象值，相当于更改java中的全局变量值
this.setState({enable:!this.state.enable,buttonName:buttonName});
},
//渲染DOM，相当于java的main函数
render: function () {
return (
<div>
<label>{this.props.labelName}:</label>
<input type={this.props.inputType} ref={this.props.inputRef} name={this.props.inputName} disabled={this.state.enable} />
<button onClick={this.handleClick} >{this.state.buttonName}</button>
</div>
);
}
});
/* render函数共有三个参数， 1、要渲染的组件，也就是DOM 2、需要被渲染的页面元素，注意必须使用document.getElement...进行调用 3、渲染成功的回调 */
React.render(
/* InputState 相当于java中的类，具体调用render函数 */
<InputState labelName = '用户名' inputType="text" inputRef="userName" inputName="userName"/>,
document.getElementById('index-0329-0031'),
function () {
console.log("元素渲染成功！");
}
);
</script>解释：
1、getInitialState函数在初始化的时候被执行，必须return null/对象，相当于java中的初始化全局变量；
2、调用全局变量使用 “this.state.变量名” 的方式进行调用，当全局变量值发生变化时，则重新渲染整个组件；
3、点击“停用”按钮，①将text的disabled属性修改为true，禁用text。②更改按钮名为“启用”。③控制台打印输入的用户名；
4、点击“启用”按钮，与3相反。
5、如果isConsole设置为true，将在控制台打印相关信息，反之，关闭打印功能。总结：
相当于组件添加全局变量，并在主方法render中进行了方法调用。注意的几点：
1、getInitialState函数必须有返回值，可以是NULL或者一个对象。
2、访问state的方法是this.state.属性名。
3、变量用{}包裹，不需要再加双引号。
6、更新步骤5中的代码，加入createClass的其他方法
先了解下ReactJS组件的生命周期：
- Mounting：已插入真实 DOM
- Updating：正在被重新渲染
- Unmounting：已移出真实 DOM
React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。
- componentWillMount()
- componentDidMount()
- componentWillMount()
- componentDidMount()
- componentWillUpdate(object nextProps, object nextState)
- componentDidUpdate(object prevProps, object prevState)
- componentWillUnmount()
此外，React 还提供两种特殊状态的处理函数。
- componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
- shouldComponentUpdate(object nextProps, object
nextState)：组件判断是否重新渲染时调用
加入这些方法：
<script type="text/jsx">
/* 定义组件（首字母比较大写），相当于java中的类的声明 */
var InputState = React.createClass({
//初始化加载
getInitialState: function () {
/* 1、初始化时，将被执行 2、必须return null或者一个对象，数据发生变化，将重新渲染DOM 3、相当于java中全局变量的声明 4、值发生变化时，render将会重新被渲染 */
return {isConsole:true,enable:false,buttonName:'停用'}
},
//点击事件
handleClick: function (event) {
var buttonName = '停用';
if(this.state.buttonName == '停用'){
if(this.state.isConsole) console.log('输入的用户名为' + this.refs.userName.getDOMNode().value.trim());
buttonName = '启用'
}
//更改state中对象值，相当于更改java中的全局变量值
this.setState({enable:!this.state.enable,buttonName:buttonName});
},
//插入真实DOM之前被执行
componentWillMount: function () {
if(this.state.isConsole) console.log('组件即将被渲染');
},
//插入真实DOM之后被执行
componentDidMount: function () {
if(this.state.isConsole) console.log('组件已被渲染');
},
//更新DOM之前被执行
componentWillUpdate: function () {
if(this.state.isConsole) console.log('组件即将被重新渲染');
},
//更新DOM之后被执行
componentDidUpdate: function () {
if(this.state.isConsole) console.log('组件已被重新渲染');
},
//移除DOM之前被执行
componentWillUnmount: function () {
if(this.state.isConsole) console.log('组件已被移除');
},
//已加载组件收到新的参数时调用
componentWillReceiveProps: function (nextProps) {
if(this.state.isConsole) console.log('已加载组件，收到新的参数！参数nextProps：' + nextProps);
},
//渲染DOM，相当于java的main函数
render: function () {
return (
<div>
<label>{this.props.labelName}:</label>
<input type={this.props.inputType} ref={this.props.inputRef} name={this.props.inputName} disabled={this.state.enable} />
<button onClick={this.handleClick} >{this.state.buttonName}</button>
</div>
);
}
});
/* render函数共有三个参数， 1、要渲染的组件，也就是DOM 2、需要被渲染的页面元素，注意必须使用document.getElement...进行调用 3、渲染成功的回调 */
React.render(
/* InputState 相当于java中的类，具体调用render函数 */
<InputState labelName = '用户名' inputType="text" inputRef="userName" inputName="userName"/>,
document.getElementById('index-0329-0031'),
function () {
console.log("元素渲染成功！");
}
);
</script>7、完整代码，具体可以看注释进行理解：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../../dist/react/react.js"></script>
<script src="../../dist/react/JSXTransformer.js"></script>
<!--如下的这种引用方式是不正确的，必须使用上面的引用方式-->
<!-- <script src="../../dist/react/JSXTransformer.js"/> -->
</head>
<body>
<div id="index-0329-0031"></div>
<script type="text/jsx"> /* 定义组件（首字母比较大写），相当于java中的类的声明 */ var InputState = React.createClass({ //初始化加载 getInitialState: function () { /* 1、初始化时，将被执行 2、必须return null或者一个对象，数据发生变化，将重新渲染DOM 3、相当于java中全局变量的声明 4、值发生变化时，render将会重新被渲染 */ return {isConsole:false,enable:false,buttonName:'停用'} }, //点击事件 handleClick: function (event) { var buttonName = '停用'; if(this.state.buttonName == '停用'){ if(this.state.isConsole) console.log('输入的' + this.props.labelName + '为' + this.refs.userName.getDOMNode().value.trim()); buttonName = '启用' } //更改state中对象值，相当于更改java中的全局变量值 this.setState({enable:!this.state.enable,buttonName:buttonName}); }, //插入真实DOM之前被执行 componentWillMount: function () { if(this.state.isConsole) console.log('组件即将被渲染'); }, //插入真实DOM之后被执行 componentDidMount: function () { if(this.state.isConsole) console.log('组件已被渲染'); }, //更新DOM之前被执行 componentWillUpdate: function () { if(this.state.isConsole) console.log('组件即将被重新渲染'); }, //更新DOM之后被执行 componentDidUpdate: function () { if(this.state.isConsole) console.log('组件已被重新渲染'); }, //移除DOM之前被执行 componentWillUnmount: function () { if(this.state.isConsole) console.log('组件已被移除'); }, //已加载组件收到新的参数时调用 componentWillReceiveProps: function (nextProps) { if(this.state.isConsole) console.log('已加载组件，收到新的参数！参数nextProps：' + nextProps); }, //组件判断是否重新渲染时调用 shouldComponentUpdate: function (nextProps,nextState) { if(this.state.isConsole) console.log('判断组件是否重新渲染！参数nextProps:' + nextProps + ',参数nextState:' + nextState); //如果传入参数inputType为text时，将被重新渲染，否则不做处理 if(nextProps.inputType == 'text'){ return true; } return false; }, //渲染DOM，相当于java的main函数 render: function () { return ( <div> <label>{this.props.labelName}:</label> <input type={this.props.inputType} ref={this.props.inputRef} name={this.props.inputName} disabled={this.state.enable} /> <button onClick={this.handleClick} >{this.state.buttonName}</button> </div> ); } }); /* render函数共有三个参数， 1、要渲染的组件，也就是DOM 2、需要被渲染的页面元素，注意必须使用document.getElement...进行调用 3、渲染成功的回调 */ React.render( /* InputState 相当于java中的类，具体调用render函数 data、labelName、inputRef、inputName 相当于函数InputSate的参数，调用使用this.props.参数名 */ <InputState data={data} labelName = '用户名' inputType="text" inputRef="userName" inputName="userName"/>, document.getElementById('index-0329-0031'), function () { if(this.state.isConsole) console.log("元素渲染成功！"); } ); var data = [{'name':'ivan','age':25},{'name':'jack','age':26}]; </script>
</body>
</html>三、小结：
关于ReactJS今天就先学习到这里了，下面来总结一下，主要有以下几点：
1、ReactJs是基于组件化的开发，所以最终你的页面应该是由若干个小组件组成的大组件。
2、可以通过属性，将值传递到组件内部，同理也可以通过属性将内部的结果传递到父级组件(留给大家研究)；要对某些值的变化做DOM操作的，要把这些值放到state中。
3、为组件添加外部css样式时，类名应该写成className而不是class;添加内部样式时，应该是style={{opacity: this.state.opacity}}而不是style=”opacity:{this.state.opacity};”。
4、组件名称首字母必须大写。
5、变量名用{}包裹，且不能加双引号。