前端三大框架之一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
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

发表于 2018-04-13 12:38 梦由心生阅读(497) 评论(0) 编辑收藏举报