前端三大框架之一React入门教程

相信大家对框架这个词都很熟悉吧，我一直喜欢js原生来开发，但是目前都要求工作效率，所有使用框架或者是库会使我们开发更加方便和快速，甚至一个人干十个人的活。。

框架优点：

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>

以上，结束。

作者：虚幻的锈色
链接：https://www.jianshu.com/p/d8695c0084e8
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。