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>
posted @ 2017-11-05 20:48 我将枕中记忆抹去任岁月浮光掠影阅读(129) 评论(0) 编辑收藏举报
刷新页面返回顶部
我将枕中记忆抹去任岁月浮光掠影

react 入门（三）

公告
