相信大家对框架这个词都很熟悉吧,我一直喜欢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
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。