ReactJS学习笔记(一)-深入理解ReactJS的面向组件即对象
2016-03-29 15:33
1001 查看
生活还是美好的，正如天气与海。
前端技术这么火爆，咱也来凑凑热闹呗，学习学习ReactJS，今天就来深入了解下这个超强悍的美少女战士吧！
前期的开发环境准备、什么万能的HelloWord咱就不在这里啰嗦了，免得各位看官烦多么不值得。
为什么要使用虚拟的DOM？
怎么组件化的呢？
注意：
1、js的引用一定要在head标签中，也就是在body标签之前进行引用；
2、如上的注释，一定要采用全引用方式，而不能使用半引用方式。
2、在body标签中创建一个div，id属性一定要有。
解释：
1、这里的div是真实的DOM，而非ReactJS中的虚拟DOM；
2、ReactJS的组件将通过document.getElementById(‘index-0329-0031’)的方式渲染到页面。
3、在body标签中编写一段JS代码，type暂时必须为“text/jsx”
解释：
1、为什么暂时必须是“text/jsx”呢？因为ReactJS默认浏览器是不识别的，需要采用jsx进行解释一下，当然也可以使用官方的tools进行编译一下，即可不引用type属性，直接引用普通js。
4、创建一个简单的组件InputState ，包括label、text、button三个元素
运行效果：
解释：
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中变量的调用
解释：
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)：组件判断是否重新渲染时调用
加入这些方法：
7、完整代码，具体可以看注释进行理解：
1、ReactJs是基于组件化的开发，所以最终你的页面应该是由若干个小组件组成的大组件。
2、可以通过属性，将值传递到组件内部，同理也可以通过属性将内部的结果传递到父级组件(留给大家研究)；要对某些值的变化做DOM操作的，要把这些值放到state中。
3、为组件添加外部css样式时，类名应该写成className而不是class;添加内部样式时，应该是style={{opacity: this.state.opacity}}而不是style=”opacity:{this.state.opacity};”。
4、组件名称首字母必须大写。
5、变量名用{}包裹，且不能加双引号。
前端技术这么火爆，咱也来凑凑热闹呗，学习学习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、它就是面向对象！！！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 深入浅出React（一）：React的设计哲学 - 简单之美
- [React] React Router: Named Components
- [React] React Router: Route Parameters
- 搭建react-native过程中，cmd中输入npm install -g react-native-cli出现nmp error 404
- webpack 打包一个简单react组件
- 颠覆式前端UI开发框架：React
- react.js学习-Sublime Text 3 安装Package Control 及 配置babel插件使jsx代码高亮
- React快速入门
- React下载网址
- 为什么我们要造React？
- react实现离线转换
- React.js实现原生js拖拽效果及思考
- [React] React Router: IndexRoute
- [React] React Router: Nested Routes
- React-Native 之Android应用开发踩坑纪 （一）————windows环境下配置
- 学习React Native想到的问题
- ReactiveCocoa
- reactjs中props和state最佳实践
- Android React Native植入原生应用小记
- React Native第2天——底层原理了解