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状态管理，其实就是数据管理。

结语：

首先咱们说了HTML、css、JS分离形成问题，促使了React的出现；
而后咱们了解了根本解决方案（web components ）须要面对的问题；
接着咱们讲了广泛解决方案，mvc的方式；
最后咱们说了为何最终你们走到了react方式这一步。

下一篇文章咱们聊聊React是什么，以及React组件化的实现。