zoukankan      html  css  js  c++  java
  • react 入门(三)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Basic Example</title>
        <!-- react.js是react的核心库-->
        <script src="./build/react.js" charset="utf-8"></script>
        <!-- react-dom.js提供与dom有关的功能-->
        <script src="./build/react-dom.js" charset="utf-8"></script>
        <!-- browser.min.js将JSX语法转换成javascript语法,然后才能在浏览器上执行-->
        <script src="./build/browser.min.js" charset="utf-8"></script>
        <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script>-->
    </head>
    <body>
    <!-- react渲染的模板内容会插入到这个DOM节点中,作为一个容器-->
    <div id="container">
    </div>
    </body>
    <!-- 在react开发中,使用JSX,跟JavaScript语法不兼容,在使用JSX的地方,药设置type="text/babel"-->
    <!-- babel转换编译器,ES6转换成可以在浏览器中运行的代码-->
    <script type="text/babel">
        /*此处编辑react代码*/
        /*
        007.事件处理
        react中的事件名称,首字母小写,驼峰命名法
        定义一个组件,组件中包含一个button,给button绑定onClick事件
    
        */
        var MyButton = React.createClass({
            handleClick:function(){alert("click事件");},
            render:function(){
                return (
                    <button onClick={this.handleClick}>{this.props.buttonTitle}</button>
                );
            }
        });
        ReactDOM.render(
            <MyButton buttonTitle="button_guo" />,
            document.getElementById("container")
        );
        /*
        008.state 状态
        创建组件CheckButton 包含一个复选框checkbox <input>
        复选框在选中和未选中的情况下显示不同的文字
        注意:当state发生变化时,会调用组件内部的render方法,重新渲染
        */
        /*
        var CheckButton = React.createClass({
            //定义初始状态
            getInitialState:function(){
                return {
                    //在这个对象中设置的属性,将会存储在state中,默认状态:未选中
                    isCheck:false
                };
            },
            //定义事件绑定的方法
            handleChange:function(){
                this.setState({
                    isCheck:!this.state.isCheck
                });
            },
            //重写render
            render:function(){
                //根据状态值,设置显示的文本
                //在JSX语法中不能直接使用if,使用三目运算符
                var text = this.state.isCheck ? "YES":"NO";
                return (
                    <div>
                    <input type="checkbox" onChange={this.handleChange} />
                    {text}
                    </div>
                );
            }
        });
        ReactDOM.render(
            <CheckButton />,
            document.getElementById("container")
        );
        */
    
        /*
        009.表单
        定义一个组件,将用户在输入框中输入的内容进行实时显示
        组件与用户交互过程中,存在状态的变化,即输入框的值
        target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口
        /*
        var InputGuo = React.createClass({
            getInitialState:function(){
                return {
                    value:"Please set in ..."
                };
            },
            handleChange:function(event){
                this.setState({
                    value:event.target.value
                });
            },
            render:function(){
                var value = this.state.value;
                return (
                    <div>
                        <input type="text" value={value} onChange={this.handleChange} />
                        <p>{value}</p>
                    </div>
                );
            }
        });
        ReactDOM.render(
            <InputGuo />,
            document.getElementById("container")
        );
        */
    
        /*
        010.组件的生命周期
        分三个状态:
            Mounting:组件挂载,已插入真实DOM
            Updating:组件更新,正在重新渲染
            Unmounting:组件移出,已移出真实DOM
        分四个阶段:
            创建、实例化、更新、销毁
        例如:网易新闻列表页面
    
        Mounting/组件挂载相关:
            1.componentWillMount
            组件将要挂载,在render之前执行,但仅执行一次,即使多次重复渲染该组件,或者改变了组件的state
            2.componentDidMount
            组件已经挂载,在render之后执行,同一个组件重复渲染只执行一次
    
        Updating/组件更新相关:
            1.componentWillReceiveProps(object nextProps)
            已加载组件收到新的props之前调用,注意组件初始化渲染时不会执行
            2.shouldComponentUpdate(object nextProps, object nextState)
            组件判断是否重新渲染时调用,该接口实际是在组件接收到了新的props或者新的state的时候 会立即调用,然后通过
            3.componentWillUpdate(object nextProps, object nextState)
            组件将要更新
            4.componentDidUpdate(object prevProps, object prevState)
            组件已经更新
    
        Unmounting/组件移除相关:
            componentWillUnmount
            在组件要被移除之前的时间点触发,可以利用该方法来执行一些必要的清理组件,将要移除
    
        生命周期中与props 和state 相关:
            getDefaultProps 设置props属性默认值
            getInitialState 设置state属性初始化
    
        */
        /*生命周期各阶段介绍*/
        var Demo = React.createClass({
            /*
                1.创建阶段:只调用getDefaultProps方法
            */
            getDefaultProps:function(){
                //在创建类的时候调用,设置this.props的默认值
                console.log("getDefaultProps");
                return {};
            },
            /*
                2.实例化阶段:getInitialState - componentWillMount - render - componentDidMount
            */
            getInitialState:function(){
                //设置this.state的默认值
                console.log("getInitialState");
                return null;
            },
            componentWillMount:function(){
                //在render方法之前调用
                console.log("componentWillMount");
            },
            render:function(){
                //渲染并返回一个虚拟DOM
                console.log("render");
                return <h1>render渲染</h1>
            },
            componentDidMount:function(){
                //在render之后调用
                //React会使用render方法返回的虚拟DOM对象创建真实的DOM结构
                //可以在这个方法中读取DOM节点
                console.log("componentDidMount");
            },
            /*
                3.更新阶段:componentWillReceiveProps - shouldComponentUpdate(如果返回false,后面三个方法不执行)
                    - componentWillUpdate - render - componentDidUpdate
            */
            componentWillReceiveProps:function(){
                console.log("componentWillReceiveProps");
            },
            shouldComponentUpdate:function(){
                console.log("shouldComponentUpdate");
                return true;
            },
            componentWillUpdate:function(){
                console.log("componentWillUpdate");
            },
            componentDidUpdate:function(){
                console.log("componentDidUpdate");
            },
    
            /*
                4.销毁阶段:componentWillUnmount
            */
            componentWillUnmount:function(){
                console.log("componentWillUnmount");
            }
        });
    
        ReactDOM.render(
            <Demo />,
            document.getElementById("container")
        );
        ReactDOM.render(
            <Demo />,
            document.getElementById("container")
        );
    
    
    </script>
    </html>
    工欲善其事 必先利其器
  • 相关阅读:
    Java实现 蓝桥杯VIP 基础练习 回形取数
    Java实现 蓝桥杯VIP 基础练习 回形取数
    Java实现 蓝桥杯VIP 基础练习 回形取数
    Java实现 蓝桥杯VIP 基础练习 回形取数
    Java实现 蓝桥杯VIP 基础练习 报时助手
    Java实现 蓝桥杯VIP 基础练习 报时助手
    Java实现 蓝桥杯VIP 基础练习 报时助手
    Java实现 蓝桥杯VIP 基础练习 报时助手
    Java实现 蓝桥杯VIP 基础练习 报时助手
    block的是发送信号的线程,又不是处理槽函数的线程
  • 原文地址:https://www.cnblogs.com/fengyouqi/p/7788677.html
Copyright © 2011-2022 走看看