React實戰—爲何會出現React（0）

時間 2019-11-06

標籤 react 實戰爲何出現欄目 React 简体版

原文原文鏈接

最開的網頁只有文字，也就html部分，隨着互聯網發展，網頁內容的豐富多彩，網頁不只僅限於瀏覽，而是須要互動。爲解決這個問題，前後出現了js和css。javascript

解決這個問題的思路，各有利弊：css

1.優勢html

css很靈活，程序員能夠有能力爲所欲爲的控制網頁。前端

JS很強大，能夠爲所欲爲的控制用戶的行爲。java

分工明確，更容易專業化，符合社會趨勢，愈來愈精細化。react

2.缺點程序員

分工必然會涉及到協做，協做必然會存在這樣的問題：怎麼讓溝通和切換工做場景狀態保持一致。web

舉個現實的例子，你把一個前端項目分給三我的作，一我的切圖，一我的數據交互，一個寫後臺。那麼若是切圖的人改網頁上的東西，必定會影響另外兩我的，怎麼保證三我的修改頁面狀態一致，這就是個問題。編程

根本性的解決方案數組

web components

解決問題的思路：

讓網頁由一個個積木組成，每個積木經過良好的定義規定好接口和規範，以及統一的實現。這個本質上和咱們用同一個型號的磚頭能夠蓋出不一樣的房子沒什麼兩樣。

目前問題：

兼容性很差、思路不成熟、很差用

廣泛的解決方案

1.mvc方案

MVC很簡單，仍是拿剛纔的三我的工做舉例：

如今寫數據交互的人說了，切圖的你啥也不用想，你就按照咱們商定的標準切圖，別瞎搞。後臺你也是，我想要啥數據你就給我啥格式，別本身瞎搞，我統一去合併文件。

這就是MVC思想，純切圖的就是view，寫後臺搞數據的就是model，寫數據交互讓先後臺對應起來的就是c。

MVC的初衷是好的，

MVC要實現的目標是將軟件用戶界面和業務邏輯分離以使代碼可擴展性、可複用性、可維護性、靈活性增強。

結果有兩個問題：

1.不少程序員將MVC當成了三層架構在用，寫出來的東西既不是三成架構也不是MVC，卻是像一個什麼都不是的四不像。三層架構的核心思想是面向接口編程和各層之間的解耦和可替換性，MVC並不具有這樣的思想和能力，不少人誤解了它。

2.即便不誤解，這樣作也有問題從咱們的例子能夠看出來，C端業務太重，一來形成混亂，二來對C端業務能力要求也高。Controller會愈來愈難維護

3.手動管理各個過程很費勁。

舉個例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = function(){
            var oUl = document.getElementById('ul1');
            var aPrev = document.querySelectorAll('.prev');
            var aNext = document.querySelectorAll('.next');
            for(var i=0;i<aPrev.length;i++){
                aPrev[i].onclick = function(){
                    var oParent = this.parentNode;
                    var oPrev = oParent.previousElementSibling || oParent.previousSibling;

                    if(oParent == oUl.children[0]){
                        alert('到頭了！');
                        return;
                    }
                    oUl.insertBefore(oParent,oPrev);
                }
            }

            for(var i=0;i<aNext.length;i++){
                aNext[i].onclick = function(){
                    var oParent = this.parentNode;
                    var oNext = oParent.nextElementSibling || oParent.nextSibling;
                    var oNext2 = oNext.nextElementSibling || oNext.nextSibling;
                    if(oParent == oUl.children[oUl.children.length-1]){
                        alert('到底了！');
                        return;
                    }
                    

                    oUl.insertBefore(oParent,oNext2);
                }
            }
        };
    </script>
</head>
<body>
    <ul id="ul1">
        <li>
            <span>一、111111111</span>
            <a href="javascript:;" class='prev'>上移</a>
            <a href="javascript:;" class='next'>下移</a>
        </li>
        <li>
            <span>二、222222222</span>
            <a href="javascript:;" class='prev'>上移</a>
            <a href="javascript:;" class='next'>下移</a>
        </li>
        <li>
            <span>三、3333333333</span>
            <a href="javascript:;" class='prev'>上移</a>
            <a href="javascript:;" class='next'>下移</a>
        </li>
        <li>
            <span>四、4444444444</span>
            <a href="javascript:;" class='prev'>上移</a>
            <a href="javascript:;" class='next'>下移</a>
        </li>
        <li>
            <span>五、5555555555</span>
            <a href="javascript:;" class='prev'>上移</a>
            <a href="javascript:;" class='next'>下移</a>
        </li>
    </ul>
</body>
</html>

效果：

即便用MVC的方式，也會涉及到大量的過程管理，DOM操做，好比用控制器控制上下移動，既要考慮元素位置，也要考慮點擊按鈕的行爲。整個過程繁瑣、複雜。

2.react方式

那咱們換一個思路，有沒有可能我只考慮數據的變化，DOM的操做不考慮。好比：

我如今根本就不去想插到誰後面的後面的前面，我只考慮一件事，我把四條數據看作一個數組中的數據，上下移動我玩的就是數組，數組對了，那麼位置不就正確了嗎？這就是react的方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        
        window.onload = function(){
            var aEles = document.getElementsByTagName('li');
            var oUl = document.getElementById('ul1');
            arrAEles = [...aEles];
            var aPrev = document.getElementsByClassName('prev');
            for(let i  = 0;i<aPrev.length;i++){
                //上移
                //[1,2,3,4] =>[2,]
                aPrev[i].onclick = function(){
                    if(i ==0){
                        alert('到頂了');
                        return;
                    }
                    //這裏我只是說明，咱們能夠只考慮數據順序
                    [arrAEles[i],arrAEles[i-1]] = [arrAEles[i-1],arrAEles[i]];
                    SortEles(arrAEles);
                };
            }
            var aNext = document.getElementsByClassName('prev');
            //咱們根本不用管DOM 怎麼操做的
            function SortEles(arrAEles){
                oUl.innerHTML = '';
                for(var i = 0;i<arrAEles.length;i++){
                    oUl.appendChild(arrAEles[i]);
                }
            }

        };
    </script>
</head>
<body>
    <ul id="ul1">
        <li>
            <span>一、111111111</span>
            <a href="javascript:;" class='prev'>上移</a>
            <a href="javascript:;" class='next'>下移</a>
        </li>
        <li>
            <span>二、222222222</span>
            <a href="javascript:;" class='prev'>上移</a>
            <a href="javascript:;" class='next'>下移</a>
        </li>
        <li>
            <span>三、3333333333</span>
            <a href="javascript:;" class='prev'>上移</a>
            <a href="javascript:;" class='next'>下移</a>
        </li>
        <li>
            <span>四、4444444444</span>
            <a href="javascript:;" class='prev'>上移</a>
            <a href="javascript:;" class='next'>下移</a>
        </li>
        <li>
            <span>五、5555555555</span>
            <a href="javascript:;" class='prev'>上移</a>
            <a href="javascript:;" class='next'>下移</a>
        </li>
    </ul>
</body>
</html>

這裏咱們只是實現了一個思路，並無具體去實現，可是你們已經能感覺到不操做DOM的好處。

一句話：數據對了，什麼都對了。所謂的react狀態管理，其實就是數據管理。

結語：