ReactJS学习笔记-深入理解ReactJS的面向组件即对象
Posted S1ow
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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、变量名用包裹，且不能加双引号。
6、它就是面向对象！！！
以上是关于ReactJS学习笔记-深入理解ReactJS的面向组件即对象的主要内容，如果未能解决你的问题，请参考以下文章