React入门教程

框架优点：

1.方便开发、快速写功能
　　2.统一开发方式
　　3.调试、测试方便

前端三大框架：

Angular.js-前端三大框架之1
　　vue.js-前端三大框架之2
　　react.js-前端三大框架之3

大家都知道，我们web开发会和后台配合，之前不分前后台，一直是一起，后来为了方便和高效，就分离了。

MVC：前后台分离

M-Model 模型：数据 后台
　　V-View 视图：表现层 前台
　　C-Controller 控制器：业务逻辑

mvc很多衍生概念：mvvc、mvvp、mvn、mvvcp等，其中angular和vue都是这一类。

但是今天主讲的不是他俩，是目前比较火的react，这个一般适用于中大型项目，当核心框架来使用，而且可以和别的框架完美的配合。

不啰嗦，直接开始正题React：

重点：组件、状态
　　核心：状态

1.JSX(babel、browser)
　　JSX：可以把HTML直接写JS里
2.react
　　React特点：虚拟DOM

react主要就是使用jsx语法，是白了就是在js中直接编写html，是不是很方便很溜。。下面直接开始写法：

使用react首先需要引三个文件：
　　browser.js 它的作用是使浏览器支持babel
　　react.js 这个不用说，react主体文件
　　react-dom.js 这个是react的虚拟DOM的文件编译dom的

1.定义组件——组件（这个就用到了ES6中的class的写法）：

class 名字 extends React.Component{
　　constructor(...args){
　　　super(...args);
　　}
　　render(){
　　　return <span>aaa</span>; //return出去你要在页面展示的标签
　　}
}

2.使用组件

就跟标签一样用
　　ReactDOM.render(
　　　<span>111</span>, //可以直接写标签，（渲染什么东西）
　　　oDiv　　（要放到哪里）
　　);

ReactDOM.render(
　　　<Comp/>, //也可以使用class，注意，使用的时候直接把class当做标签来用。
　　　oDiv
　　);

比如先写一个简单的例子吧：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/browser.js" charset="utf-8"></script>
    <script src="js/react.js" charset="utf-8"></script>
    <script src="js/react-dom.js" charset="utf-8"></script>
    <script type="text/babel">
        class Box extends React.Component{
            constructor(...args){
                super(...args)
            }
            render(){
                return <div> //注意 最外层元素有且只有一个（必须有，而且只能有一个）
                    <span>我的名字是李鹏</span><br/>
                    <span>我今年24岁</span>
                </div>
            }
        }
        window.onload=function(){
            var oDiv=document.getElementById("div1");
            ReactDOM.render(
                    <Box/>, //注意：需要和上面class的名字一样
                    oDiv
                )
        };
    
    </script>
  </head>
  <body>
    <div id="div1">

    </div>
  </body>
</html>
注意：定义的时候 render出去的最外层元素有且只有一个（必须有，而且只能有一个）使用的时候直接把组件名字当做标签来用，需要和上面class的名字一样。

那么有人会说了，那么能往组件身上存放一些数据吗？答案是可以，
使用的时候，直接往组件标签身上加入属性即可，定义的时候使用就直接调用，注意是在this.props的身上：

class Box extends React.Component{
            constructor(...args){
                super(...args)
            }
            render(){
                return <div>
                    <span>我的名字是{this.props.name}</span><br/>
                    <span>我今年{this.props.age}岁</span>
                </div>
            }
        }
        window.onload=function(){
            var oDiv=document.getElementById("div1");
            ReactDOM.render(
                    <Box name="李鹏" age="24"/>,
                    oDiv
                )
        };

那么react比如我往一个元素节点身上加入数据怎么做，正常一个组件中的数据，不可能是不变的吧，肯定是从后台过来的，这就关系到状态的变化。

注意：状态是活的，会变化的，怎么用呢？
　　定义：constructor里面——this.state={};
　　变化：方法里面——this.setState({});

使用的时候：直接用模板即可:{} 注意是单括号。比如：
<span>输入框输入的是：{this.state.value}</span>
在React中怎么往组件this身上加入一些数据呢？

答案：使用 this.state={value:'',name:''} 注意是={} 一个json 多了就往后加

class Box extends React.Component{
            constructor(...args){
                super(...args);
                this.state={value:''};
            }
        }

正常我们修改this的属性，直接改就行，但是react中你要修改必须设置状态：this.setState({this.value='',this.name=''});

this.setState({
                    value:ev.target.value
                });

那么怎么在React组件中加入事件呢，直接加即可，不过注意：

比如：正常的 onclick 我们要写成 onClick，正常的onchange 写成 onChange 等。

那么组件中事件怎绑定函数呢？直接告诉你吧：onChange={this.fn.bind(this)} 注意加上bind，为了防止this指向错乱。

比如写一个吧：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/browser.js" charset="utf-8"></script>
    <script src="js/react.js" charset="utf-8"></script>
    <script src="js/react-dom.js" charset="utf-8"></script>
    <script type="text/babel">
        class Box extends React.Component{
            constructor(...args){
                super(...args);
                this.state={value:''};
            }

            fn(ev){
                this.setState({
                    value:ev.target.value
                });
            }

            render(){
                return <div>
                    <input type="text" onChange={this.fn.bind(this)} />  
                    <span>输入框输入的是：{this.state.value}</span>
                </div>
            }
        }
        window.onload=function(){
            var oDiv=document.getElementById("div1");
            ReactDOM.render(
                    <Box/>,
                    oDiv
                )
        };
    
    </script>
  </head>
  <body>
    <div id="div1">

    </div>
  </body>
</html>

下面就写一个比较简单的例子吧，用react做一个时钟吧：

不过介绍这个之前要介绍几个东西，因为做时钟的话，肯定要用定时器吧，间隔是1000，也就是1s，所以也没会有一个间隔，这样不完美，正常我们写的话，肯定直接先把函数调用一遍吧，但是在react中不行，因为组件是有生存周期的，如果你在组件没有渲染到页面就直接调用，那样是没办法的，因为代码是一步一步往下走的，所以介绍几个东西吧：

　　componentWillMount()        创建之前
　　componentDidMount()         创建之后

　　componentWillUpdate()       更新之前
　　componentDidUpdate()        更新之后

　　componentWillUnmount()      卸载之前
　　componentWillReceiveProps() 组件参数更新

直接看例子吧：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/browser.js" charset="utf-8"></script>
    <script src="js/react.js" charset="utf-8"></script>
    <script src="js/react-dom.js" charset="utf-8"></script>
    <script type="text/babel">
        class Close extends React.Component{
            constructor(...args){
                super(...args);
                this.state={
                    h:0,
                    m:0,
                    s:0
                };
                setInterval(()=>{
                    this.fn();
                },1000)
            }

            toDub(a){
                return a<10?"0"+a:a+'';
            }

            componentDidMount(){  //在组件创建之后直接调用这个方法一次，省的页面出现00:00:00的情况
                this.fn();  
            }

            fn(){
                var oDate=new Date();
                this.setState({
                        h:this.toDub(oDate.getHours()),
                        m:this.toDub(oDate.getMinutes()),
                        s:this.toDub(oDate.getSeconds())
                    })
            }

            render(){
                return <div>
                    <span>{this.state.h}</span>:
                    <span>{this.state.m}</span>:
                    <span>{this.state.s}</span>
                </div>
            }
        }
        
        window.onload=function(){
            var oDiv=document.querySelector("#div1");
            ReactDOM.render(
                    <Close/>,
                    oDiv
                )
        };
    </script>
  </head>
  <body>
    <div id="div1"></div>
  </body>
</html>

以上，基本把react框架中的创建组件，使用组件，以及组件身上使用属性，以及状态都简单的说了一下，那么工作中很多时候，我们都会从后台获得一组数据，然后把数据的每一项放到一个标签中，那么在react中该怎么做呢？

比如说有这样一组数据：

constructor(...args){
        super(...args);

        //this.arr=[1, 5, 8, 9];
        this.state={arr: [12, 5, 8, 9]};
      }

首先，肯定有人会想到：我直接render出去对应数量的标签，然后把数据通过模板放进去，但是我们不可能手动写很多标签把每一项数据填进去，然后把标签render出去吧，而且数据个数你也不知道，还是变化的，所以我们可以直接循环创建，然后存到一个数组中：

render(){
        var result=[];
        var arr=this.state.arr;

        for(var i=0;i<arr.length;i++){
          result.push(<Item key={i} value={arr[i]}/>); //这个Item标签是一个小的组件，我们把数据放到属性身上吧。
        }

        return <ul>
          <input type="button" value="按钮" onClick={this.fn.bind(this)} /> //为了看看状态变化了，页面DOM有没有直接循环加上

。
          {result}
        </ul>;
      }


//其中Item标签是一个小的组件：
class Item extends React.Component{
      constructor(...args){
        super(...args);
      }

      render(){
        return <li>{this.props.value}</li>;
      }
    }

上面的代码意思就是说，我先申明一个数组，然后通过循环把我们从后台获得的数据放到一个标签中，并且push到数组中去，最后把数组render出去，不过要放到模板里面，不能直接把数组render出去，{存放标签的数组名}，那么很多人会问，那组件标签上面的key是什么东西呢，这个你就把他理解错id就行，唯一，而且这个是必须要写的，就相当于告诉他，这个我已经创建了，不需要重复创建了：

fn(){
        this.setState({
          arr: this.state.arr.concat([Math.random()])
        });
      }

这个例子整体代码，大家看一下吧：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/browser.js" charset="utf-8"></script>
    <script src="js/react.js" charset="utf-8"></script>
    <script src="js/react-dom.js" charset="utf-8"></script>
    <script type="text/babel">
    class Item extends React.Component{  //这个组件方便我们下面使用
      constructor(...args){
        super(...args);
      }

      render(){
        return <li>{this.props.value}</li>;
      }
    }

    class List extends React.Component{
      constructor(...args){
        super(...args);

        //this.arr=[12, 5, 8, 9];
        this.state={arr: [12, 5, 8, 9]};
      }

      fn(){
        this.setState({
          arr: this.state.arr.concat([Math.random()])  //随便往数组最后添加一项，随机数,注意，不要使用push之类的，直接用数

组拼接。下面点击测试用。
        });
      }

      render(){
        var result=[];
        var arr=this.state.arr;

        for(var i=0;i<arr.length;i++){
          result.push(<Item key={i} value={arr[i]}/>);
        }

        return <ul>
          <input type="button" value="按钮" onClick={this.fn.bind(this)} /> //点击执行一个函数，让数据最后添加一项，看看数

据变化了，这个组件渲染的页面变化没。
          {result}
        </ul>;
      }
    }

    window.onload=function (){
      var oDiv=document.getElementById('div1');

      ReactDOM.render(
        <List />,
        oDiv
      );
    }
    </script>
  </head>
  <body>
    <div id="div1">

    </div>
  </body>
</html>

以上，结束。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 200,302评论 5赞 470
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,232评论 2赞 377
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 147,337评论 0赞 332
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,977评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,920评论 5赞 360
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,194评论 1赞 277
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,638评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,319评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,455评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,379评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,426评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,106评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,696评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,786评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,996评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,467评论 2赞 346
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,043评论 2赞 341

推荐阅读更多精彩内容