react出山了（一）

最新推荐文章于 2018-10-29 20:52:53 发布

秋天1014童话

最新推荐文章于 2018-10-29 20:52:53 发布

阅读量204

点赞数

分类专栏： web前端 react

本文链接：https://blog.csdn.net/u013217071/article/details/79462545

版权

web前端同时被 2 个专栏收录

128 篇文章 1 订阅

订阅专栏

react

10 篇文章 0 订阅

订阅专栏

最近有时间，再把react重新过一遍。也把看到的一些资料，也在上面，方便回顾。

1、react最简单的一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试react</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
    <div id="container"></div>

    <script type="text/jsx">
        ReactDOM.render(
            <h1>hello</h1>,
            document.getElementById('container')
        );
    </script>
</body>
</html>

此处使用了菜鸟的cdn链接，cdn链接有很多，大家可自行查找。上面代码展示了一段最基本的组件使用，如何将数据展示在元素里面。
稍微扩展下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ceshi</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
    <div id="container"></div>

    <script type="text/jsx">
        var Hello = React.createClass({
            render: function(){
                var styleObj={
                    color: 'red',
                    fontSize: '44px',
                    paddingLeft: '20px'
                };
                return (<div style={styleObj}>{this.props.name}...{this.props.title}</div>);
            }
        });
        ReactDOM.render(
            <Hello name="wei" title="我是组件"/>,
            document.getElementById('container')
        );
    </script>
</body>
</html>

上面代码自定义了一个组件，并在id为container的元素中进行了显示。显示后元素结构如下图所示：
这里写图片描述

2、组件生命周期

react的组件从出现到消失的整个过程，包含mount，update，unmounted等。
测试组件生命周期的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>this</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
    <div id="container"></div>

    <script type="text/jsx">
        var Hello = React.createClass({
            getInitialState: function(){
                alert('getinit');
                return {
                    color: 'red',
                    fontSize: '44px'
                }
            },
            render: function(){
                /*              
                    return (<div>{this.props.name}</div>);
                    或者
                    return (<div style={{color: this.state.color, fontSize: this.state.fontSize}}>{this.props.name}</div>);

                 */
                return (<div style={this.state}>{this.props.name}</div>);
            },
            componentWillMount: function(){
                alert('will');
            },
            componentDidMount: function(){
                alert('did');
                /*1s后改变state，页面同步刷新*/
                var _self = this;
                window.setTimeout(function(){
                    _self.setState({
                        color: 'blue',
                        fontSize: '12px'
                    });
                },1000);
            }
        });
        ReactDOM.render(
            <Hello name='wei'/>,
            document.getElementById('container')
        );
    </script>
</body>
</html>

3、事件监听处理实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件点击测试</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
    <div id="container"></div>

    <script type="text/jsx">

        var ClickComponent = React.createClass({
            handleClick: function(event){
                var tipElem = ReactDOM.findDOMNode(this.refs.tip);
                if(tipElem.style.display=='none'){
                    tipElem.style.display = 'inline';
                }else{
                    tipElem.style.display = 'none';
                }

                event.stopPropagation();
                event.preventDefault();
            },
            render: function(){
                return (
                    <div>
                        <button onClick= {this.handleClick}>显示|隐藏</button><span ref="tip">测试的文字</span>
                    </div>
                );
            }
        });

        var InputComponent = React.createClass({
            handleChange:function(event){
                this.setState({
                    'inputContent': event.target.value
                });

                event.preventDefault();
                event.stopPropagation();
            },
            getInitialState: function(){
                return {
                    inputContent: '12'
                };
            },
            render: function(){
                return (
                    <div>
                        <input type="text" onChange={this.handleChange}/><span>{this.state.inputContent}</span>
                    </div>
                );
            }
        });

        ReactDOM.render(
            <div>
                <ClickComponent />
                <br/><br/><br/>
                <InputComponent />
            </div>, 
            document.getElementById('container'));
    </script>
</body>
</html>

1、绑定事件时，使用‘on’+事件名的方式，驼峰式命名。
2、事件处理使用实例属性（在例子中为handleClick和handleChange属性）定义。3、事件触发元素可使用event.target来获得。
4、使用this.refs获得react子组件，使用ReactDOM.findDOMNode来获得DOM元素。
5、多个组件时，必须包装在一个父元素里面。

4、组件嵌套

由于react的render正式js逻辑和html代码一起编写，类似于es6的模板引擎，使用方便。下面是一个简单的组件嵌套例子，其中submessages为组件数组，更进一步表示了react的灵活性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>this</title>
    <script type="text/javascript" src="bower_components/react/react.js"></script>
    <script type="text/javascript" src="bower_components/react/JSXTransformer.js"></script>
</head>
<body>
    <div id="app"></div>

    <script type="text/jsx">
        var MessageBox = React.createClass({
            handleClick:function(){
                alert("你点我啦！");
            },
            render: function(){
                var submessages = [];
                for(var ii=0;ii<10;ii++){
                    submessages.push(
                        <SubMessage/>
                    );
                }
                return (
                    <div onClick={this.handleClick}>
                        halou{this.props.name}
                        <h1>你好世界</h1>
                        {submessages}
                    </div>
                );
            }
        });

        var SubMessage = React.createClass({
            render: function(){
                return (
                    <div>
                        <h3>世界很奇妙！</h3>
                        <FooterMessgae />
                    </div>
                );
            }
        });

        var FooterMessgae = React.createClass({
            render: function(){
                return (
                    <small>写代码很有意思</small>
                );
            }
        });

        React.render(
            <MessageBox name='msg'/>,
            document.getElementById('app')
        );
    </script>
</body>
</html>

秋天1014童话

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react出山了（一）

最近有时间，再把react重新过一遍。也把看到的一些资料，也在上面，方便回顾。1、react最简单的一个例子：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;测试react&lt;/title&amp
复制链接

扫一扫

专栏目录