软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
  软件世界网 -> Web前端 -> ReactJS学习笔记(一) -> 正文阅读

[Web前端]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>

运行效果:
[img]http://img.blog.csdn.net/20160329144947107

解释:
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、它就是面向对象!!!



......显示全文...
    点击查看全文


上一篇文章      下一篇文章      查看所有文章
2016-03-29 22:59:18  
Web前端 最新文章
10分钟
SSM框架SSM项目源码SSM源码下载java框架整合
javascript入门
JavaScript常用对象Array(2)
8.Smarty3:模版中的内置函数
表单脚本
iTextSharp5.0页眉页脚及Asp.net预览的实现
MVC基础学习—理论篇
JavaScript
http协议中get与post区别详解
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 新闻资讯 小游戏 Chinese Culture 股票 三丰软件 开发 中国文化 网文精选 阅读网 看图 日历 万年历 2018年12日历
2018-12-11 4:30:18
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --