react.js快速入门(2)

原创 2017年01月03日 16:35:57

本博客的一贯宗旨是:坚持一本正经的写博客。

React官网传送门
本教程的所有源代码都托管在github上
地址 https://github.com/kkcode24/ReactTraining

props对象

props是只读的

props: 组件自带的的属性, 用于组件内外的值的传递
注: props是只读的, 只能获取, 不能修改

<script type="text/babel">
    var Hello = React.createClass({
        render: function () {
            return <h1>Hello, {this.props.name1}, {this.props.name2}</h1>
        }
    });

    ReactDOM.render(
        <Hello name1="小明" name2="小龙"/>,
        document.getElementById('example')
    );
    var values = {
        name1: '小李',
        name2: '小丽'
    };

    ReactDOM.render(
        <Hello name1={values.name1} name2={values.name2}/>,
        document.getElementById('example')
    );
</script>

延展操作符

…(三个点, 延展操作符)是一种语法糖, 把对象的属性值赋到对应的组件中

<script type="text/babel">
    var Hello = React.createClass({
        render: function () {
            return <h1>Hello, {this.props.name1}, {this.props.name2}</h1>
        }
    });

    var values = {
        name1: '小牛',
        name2: '小狗'
    };

    ReactDOM.render(
            <Hello {...values}/>,
            document.getElementById('example')
    );
</script>

延展操作符练习

<script type="text/babel">
   var Link = React.createClass({
        render: function () {
            return <a {...this.props}>{this.props.name}</a>
        }
    });

    ReactDOM.render(
        <Link href="http://www.baidu.com" name="百度"/>,
        document.getElementById('example')
    );

    /*
     this.props = {
     href: "http://www.baidu.com",
     name: "百度"
     };
     */
</script>

this.props.children

this.props.children: 代表元素内的子元素

<script type="text/babel">

    //抛砖引玉demo

    var List = React.createClass({
        render: function () {
            return (
                    <ul>
                        {
                            this.props.data.map(function (e) {
                                return <li>{e}</li>
                            })
                        }
                    </ul>
            );
        }
    });

    ReactDOM.render(
            <List data={[1, 2, 3]}></List>,
            document.getElementById('example')
    );

    //请结合05-props.html再看
</script>

05-props.html

<script type="text/babel">

    //this.props.children: 代表元素内的子元素

    var ListPro = React.createClass({
        render: function () {
            return (
                    <ul>
                        {
                            this.props.children.map(function (e) {
                                return <li>{e}</li>;
                            })
                        }
                    </ul>
            );
        }
    });

    ReactDOM.render(
        <ListPro a="1" b={2}>
            <em>斜体</em>
            <strong>粗体</strong>
            <a href="#">链接</a>
        </ListPro>,
        document.getElementById('example')
    );
</script>

props指定默认值

<script type="text/babel">

    var data = 123;

    var ShowTitle = React.createClass({
        //指定默认值
        getDefaultProps: function () {
            //props是一个对象
            return {
                title: '默认标题'
            }
        },
        render: function () {
            return <h1>{this.props.title}</h1>
        }
    });
    ReactDOM.render(
            <ShowTitle title={data}/>,
            document.getElementById('example')
    );
</script>

state状态

在此之前,先说下事件机制

<script type="text/babel">
    //事件处理
    var MyButton = React.createClass({
        //事件触发的函数
        click: function () {
            alert(this.props.title);
        },
        render: function () {
            return <button onClick={this.click}>{this.props.title}</button>
        }
    });

    ReactDOM.render(
            <MyButton title="我是按钮的标题"></MyButton>,
            document.getElementById('example')
    );
</script>

state和props的区别:
props用于记录组件的属性和子元素, 是一个只读的对象; state用于进行状态的记录,是一个可以修改的对象

练习: 定义一个组件CheckBox, 包含两部分复选框, 文本; 效果: 选择复选框, 文本变为true, 取消选择, 文本变成false

请结合02-state.html看

<script type="text/babel">

    var CheckBox = React.createClass({
        //获取初始的状态值state
        getInitialState: function () {
            return {
                isCheck: false
            }
        },
        click: function () {
            //不能用等号"="直接修改state
            //使用setState的方法来修改state
            this.setState({
                isCheck: !this.state.isCheck
            });
        },
        render: function () {
            return (
                    <div>
                        <input type="checkbox" onClick={this.click}/>
                        <span>{this.state.isCheck ? 'true' : 'false'}</span>
                    </div>
            );
        }
    });

    ReactDOM.render(
            <CheckBox/>,
            document.getElementById('example')
    );
</script>

练习: 实时显示输入内容
请结合03-state.html看

<script type="text/babel">

    var Input = React.createClass({
        getInitialState: function () {
            return {
                content: ''
            }
        },
        change: function (event) {
            //event: 触发的事件
            console.log(event.target.value);
            this.setState({
                content: event.target.value
            });
        },
        render: function () {
            return (
                    <div>
                        <input type="text" onChange={this.change}/>
                        <p>{this.state.content}</p>
                    </div>
            );
        }
    });

    ReactDOM.render(
        <Input/>,
        document.getElementById('container')
    );
</script>

组件的生命周期

组件的生命周期: 从创建组件到组件移除的完整的过程
React组件的生命周期,分为三个阶段:
1.挂载阶段(Mounting): 把组件插入元素中
2.更新阶段(Update): 重新渲染组件
3.移除阶段(Unmounting): 从元素中移除组件

挂载阶段

<script type="text/babel">
    var Demo = React.createClass({
        getDefaultProps: function () {
            console.log("获取默认属性值");
            return {
                name: 'world'
            }
        },
        getInitialState: function () {
            console.log("初始化状态值");
            return {
                isSelect: false
            }
        },
        componentWillMount: function () {
            console.log("将要挂载组件");
        },
        render: function () {
            console.log("渲染组件");
            return <h1>Hello, {this.props.name}!</h1>
        }
    });

    //第一个渲染组件
    ReactDOM.render(
        <Demo name="三儿"/>,
        document.getElementById('example')
    );
</script>

更新阶段

<script type="text/babel">

    var Demo = React.createClass({
        getDefaultProps: function () {
            console.log("获取默认属性值");
            return {
                name: 'world'
            }
        },
        getInitialState: function () {
            console.log("初始化状态值");
            return {
                isSelect: false
            }
        },
        componentWillMount: function () {
            console.log("将要挂载组件");
        },
        render: function () {
            console.log("渲染组件");
            return <h1>Hello, {this.props.name}!</h1>
        },
        componentDidMount: function () {
            console.log("已经挂载组件");
        },
        componentWillReceiveProps: function () {
            console.log("将要接收到属性值");
        },
        shouldComponentUpdate: function () {
            console.log("是否可以更新组件");
            return true;
        },
        componentWillUpdate: function () {
            console.log("将要更新组件");
        },
        //render:  渲染组件
        componentDidUpdate: function () {
            console.log("已经更新组件");
        }
    });

    //第一个渲染组件
    ReactDOM.render(
        <Demo name="三儿"/>,
        document.getElementById('example')
    );

    //重新渲染组件
    ReactDOM.render(
        <Demo name="四儿"/>,
        document.getElementById('example')
    );

</script>

移除组件

<script type="text/babel">

    var Demo = React.createClass({
        getDefaultProps: function () {
            console.log("获取默认属性值");
            return {
                name: 'world'
            }
        },
        getInitialState: function () {
            console.log("初始化状态值");
            return {
                isSelect: false
            }
        },
        componentWillMount: function () {
            console.log("将要挂载组件");
        },
        render: function () {
            console.log("渲染组件");
            return <h1>Hello, {this.props.name}!</h1>
        },
        componentDidMount: function () {
            console.log("已经挂载组件");
        },
        componentWillReceiveProps: function () {
            console.log("将要接收到属性值");
        },
        shouldComponentUpdate: function () {
            console.log("是否可以更新组件");
            return true;
        },
        componentWillUpdate: function () {
            console.log("将要更新组件");
        },
        componentDidUpdate: function () {
            console.log("已经更新组件");
        },
        componentWillUnmount: function () {
            console.log("将要移除组件");
        }
    });

    //第一个渲染组件
    ReactDOM.render(
        <Demo name="三儿"/>,
        document.getElementById('example')
    );

    //重新渲染组件
    ReactDOM.render(
        <Demo name="四儿"/>,
        document.getElementById('example')
    );

    //移除组件
    ReactDOM.unmountComponentAtNode(
        document.getElementById('example')
    );
</script>

06-lifecycle.html 是完成的测试,包含注释及代码

React之Ajax

<script type="text/babel">
    var List = React.createClass({
        getInitialState: function () {
            return {
                arr: []
            }
        },
        render: function () {
            return (
                    <ul>
                        {
                            this.state.arr.map(function (e) {
                                return <li>{e}</li>
                            })
                        }
                    </ul>
            );
        },
        componentDidMount: function () {
            console.log("已经挂载组件");
            $.ajax({
                url: this.props.url,
                dataType: 'jsonp',
                type: "GET",
                jsonp: "cb",//jsonp回调的函数名的key值, 会自动将cb=success, 会调用success方法
                success: function (data) {
                    this.setState({
                        arr: data.s
                    });
                }.bind(this)
                //在函数的后面添加bind, 用于修改函数内部this的指向
            });
        }
    });


    ReactDOM.render(
            <List url="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=大宝剑"/>,
            document.getElementById('container')
    );

</script>

入门教程结束了,但是继续学习React的路程才刚刚开始,希望本教程对你有所帮助,有缘人。

版权声明:本文为博主原创文章,未经博主允许不得转载。

react.js快速入门(1)

本博客的一贯宗旨是:坚持一本正经的写博客。React官网应用开发分类介绍原生应用: 介绍: 特别为某个操作系统做的应用, 比如iOS, Android, Blackberry等等。 i...
  • my_study_everyday
  • my_study_everyday
  • 2016年12月20日 11:01
  • 368

《Qt Creator快速入门》第二版主要更新内容

没有涉及到操作或编程的修改不再列出。 第1章 1.1.1下载软件 Qt使用4.8.5版本 地址:http://download.qt-project.org/off...
  • yansmile1
  • yansmile1
  • 2016年08月18日 13:53
  • 1146

图解OpenLayers-2.13.1入门实例

1 下载 http://www.openlayers.cn/forum.php?mod=viewthread&tid=171 解压后有如下内容; 2 实例1 把img, theme...
  • bcbobo21cn
  • bcbobo21cn
  • 2016年05月10日 16:13
  • 3235

React.js学习版2~

我一个沉迷学习无法自拔的美男子~来更新react学习第二弹了!this.props.children this.props对象的属性与组件的属性一一对应,但是有一个例外,就是this.props.c...
  • zhengzhiyun
  • zhengzhiyun
  • 2016年08月19日 22:31
  • 331

Hadoop基础教程-第2章 Hadoop快速入门(2.1 Hadoop简介)

第2章 Hadoop快速入门2.1 Hadoop简介2.1.1 Hadoop编年史(1)2002年10月,Doug Cutting和Mike Cafarella创建了开源网页爬虫项目Nutch。(2)...
  • chengyuqiang
  • chengyuqiang
  • 2017年05月11日 21:19
  • 1251

《Qt Creator快速入门》(第二版,霍亚飞)自学笔记 2.2.3设置应用程序图标

如何生成有图标的exe文件? 在Qt Creator的help->index在look for 里输入Setting the Application Icon关键字,这里列出了在各个平台上设置应用程序...
  • diqiuyun
  • diqiuyun
  • 2016年01月04日 15:01
  • 1495

Vue.js 2 Quickstart Tutorial 2017(Vue.js 2快速入门教程2017)

该帖子最先发布于CodingTheSmartWay.com(想看原文的可百度翻墙自行查看,文中所有图片均为原文的图片) 什么是Vue.js Vue是一个渐进的JavaScript框架,专注于构建...
  • qq_31116415
  • qq_31116415
  • 2017年05月31日 14:46
  • 358

React.JS

reject  native
  • WhyDoYouStay
  • WhyDoYouStay
  • 2016年07月25日 20:00
  • 341

React.js

一、React介绍 what?是一个开源的(为数据提供渲染视图)的js库--》ui层 fb、instgram、社区公司共同维护。美团、阿里。。。 why? fb 问题:视...
  • yji534123343
  • yji534123343
  • 2018年02月03日 09:40
  • 12

react.js

react.js
  • qq_36293849
  • qq_36293849
  • 2016年10月27日 20:10
  • 261
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:react.js快速入门(2)
举报原因:
原因补充:

(最多只允许输入30个字)