亚洲一区二区三区含羞草,久久亚洲精精品中文字幕,性欢愉2做爰hd

框架優(yōu)點：

1.方便開發(fā)、快速寫功能
　　2.統(tǒng)一開發(fā)方式
　　3.調試、測試方便

前端三大框架：

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

大家都知道，我們web開發(fā)會和后臺配合，之前不分前后臺，一直是一起，后來為了方便和高效，就分離了。

MVC：前后臺分離

M-Model 模型：數(shù)據(jù) 后臺
　　V-View 視圖：表現(xiàn)層前臺
　　C-Controller 控制器：業(yè)務邏輯

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

但是今天主講的不是他倆，是目前比較火的react，這個一般適用于中大型項目，當核心框架來使用，而且可以和別的框架完美的配合。

不啰嗦，直接開始正題React：

重點：組件、狀態(tài)
　　核心：狀態(tài)

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的名字一樣。

那么有人會說了，那么能往組件身上存放一些數(shù)據(jù)嗎？答案是可以，
使用的時候，直接往組件標簽身上加入屬性即可，定義的時候使用就直接調用，注意是在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比如我往一個元素節(jié)點身上加入數(shù)據(jù)怎么做，正常一個組件中的數(shù)據(jù)，不可能是不變的吧，肯定是從后臺過來的，這就關系到狀態(tài)的變化。

注意：狀態(tài)是活的，會變化的，怎么用呢？
　　定義：constructor里面——this.state={};
　　變化：方法里面——this.setState({});

使用的時候：直接用模板即可:{} 注意是單括號。比如：

<span>輸入框輸入的是：{this.state.value}</span>

在React中怎么往組件this身上加入一些數(shù)據(jù)呢？

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

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

正常我們修改this的屬性，直接改就行，但是react中你要修改必須設置狀態(tài)：this.setState({this.value='',this.name=''});

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

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

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

那么組件中事件怎綁定函數(shù)呢？直接告訴你吧：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，所以也沒會有一個間隔，這樣不完美，正常我們寫的話，肯定直接先把函數(shù)調用一遍吧，但是在react中不行，因為組件是有生存周期的，如果你在組件沒有渲染到頁面就直接調用，那樣是沒辦法的，因為代碼是一步一步往下走的，所以介紹幾個東西吧：

　　componentWillMount()        創(chuàng)建之前
　　componentDidMount()         創(chuàng)建之后

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

　　componentWillUnmount()      卸載之前
　　componentWillReceiveProps() 組件參數(shù)更新

直接看例子吧：

<!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(){  //在組件創(chuàng)建之后直接調用這個方法一次，省的頁面出現(xiàn)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框架中的創(chuàng)建組件，使用組件，以及組件身上使用屬性，以及狀態(tài)都簡單的說了一下，那么工作中很多時候，我們都會從后臺獲得一組數(shù)據(jù)，然后把數(shù)據(jù)的每一項放到一個標簽中，那么在react中該怎么做呢？

比如說有這樣一組數(shù)據(jù)：

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

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

首先，肯定有人會想到：我直接render出去對應數(shù)量的標簽，然后把數(shù)據(jù)通過模板放進去，但是我們不可能手動寫很多標簽把每一項數(shù)據(jù)填進去，然后把標簽render出去吧，而且數(shù)據(jù)個數(shù)你也不知道，還是變化的，所以我們可以直接循環(huán)創(chuàng)建，然后存到一個數(shù)組中：

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標簽是一個小的組件，我們把數(shù)據(jù)放到屬性身上吧。
        }

        return <ul>
          <input type="button" value="按鈕" onClick={this.fn.bind(this)} /> //為了看看狀態(tài)變化了，頁面DOM有沒有直接循環(huán)加上

。
          {result}
        </ul>;
      }


//其中Item標簽是一個小的組件：
class Item extends React.Component{
      constructor(...args){
        super(...args);
      }

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

上面的代碼意思就是說，我先申明一個數(shù)組，然后通過循環(huán)把我們從后臺獲得的數(shù)據(jù)放到一個標簽中，并且push到數(shù)組中去，最后把數(shù)組render出去，不過要放到模板里面，不能直接把數(shù)組render出去，{存放標簽的數(shù)組名}，那么很多人會問，那組件標簽上面的key是什么東西呢，這個你就把他理解錯id就行，唯一，而且這個是必須要寫的，就相當于告訴他，這個我已經創(chuàng)建了，不需要重復創(chuàng)建了：

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()])  //隨便往數(shù)組最后添加一項，隨機數(shù),注意，不要使用push之類的，直接用數(shù)

組拼接。下面點擊測試用。
        });
      }

      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)} /> //點擊執(zhí)行一個函數(shù)，讓數(shù)據(jù)最后添加一項，看看數(shù)

據(jù)變化了，這個組件渲染的頁面變化沒。
          {result}
        </ul>;
      }
    }

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

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

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

以上，結束。

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

React入門教程

React入門教程

框架優(yōu)點：

前端三大框架：

MVC：前后臺分離

不啰嗦，直接開始正題React：

1.定義組件——組件（這個就用到了ES6中的class的寫法）：

2.使用組件

比如先寫一個簡單的例子吧：

注意：定義的時候 render出去的最外層元素有且只有一個（必須有，而且只能有一個）使用的時候直接把組件名字當做標簽來用，需要和上面class的名字一樣。

那么react比如我往一個元素節(jié)點身上加入數(shù)據(jù)怎么做，正常一個組件中的數(shù)據(jù)，不可能是不變的吧，肯定是從后臺過來的，這就關系到狀態(tài)的變化。

使用的時候：直接用模板即可:{} 注意是單括號。比如：

在React中怎么往組件this身上加入一些數(shù)據(jù)呢？

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

那么組件中事件怎綁定函數(shù)呢？直接告訴你吧：onChange={this.fn.bind(this)} 注意加上bind，為了防止this指向錯亂。

比如寫一個吧：

下面就寫一個比較簡單的例子吧，用react做一個時鐘吧：

比如說有這樣一組數(shù)據(jù)：

這個例子整體代碼，大家看一下吧：

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

React入門教程

框架優(yōu)點：

前端三大框架：

MVC：前后臺分離

不啰嗦，直接開始正題React：

1.定義組件——組件（這個就用到了ES6中的class的寫法）：

2.使用組件

比如先寫一個簡單的例子吧：

注意：定義的時候 render出去的最外層元素有且只有一個（必須有，而且只能有一個）使用的時候直接把組件名字當做標簽來用，需要和上面class的名字一樣。

那么react比如我往一個元素節(jié)點身上加入數(shù)據(jù)怎么做，正常一個組件中的數(shù)據(jù)，不可能是不變的吧，肯定是從后臺過來的，這就關系到狀態(tài)的變化。

使用的時候：直接用模板即可:{} 注意是單括號。比如：

在React中怎么往組件this身上加入一些數(shù)據(jù)呢？

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

那么組件中事件怎綁定函數(shù)呢？直接告訴你吧：onChange={this.fn.bind(this)} 注意加上bind，為了防止this指向錯亂。

比如寫一個吧：

下面就寫一個比較簡單的例子吧，用react做一個時鐘吧：

比如說有這樣一組數(shù)據(jù)：

這個例子整體代碼，大家看一下吧：

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频