react专栏-1.为何会出现React？

时间 2019-11-29

标签 react 专栏为何出现栏目 React 繁體版

原文原文链接

1.为何会出现React？

为何会出现React?

最开的网页只有文字，也就html部分，随着互联网发展，网页内容的丰富多彩，以及网页不只仅限于浏览，而是须要互动。为解决这个问题，前后出现了js和css。javascript

解决这个问题的思路，各有利弊：css

1.优势html

css很灵活，程序员能够有能力为所欲为的控制网页。前端

JS很强大，能够为所欲为的控制用户的行为。java

分工明确，更容易专业化，符合社会趋势，愈来愈精细化。react

2.缺点git

分工必然会涉及到协做，协做必然会存在沟通和切换工做场景状态如何保持一致的问题。程序员

举个现实的例子，你把一个前端项目分给三我的作，一我的切图，一我的数据交互，一个写后台。那么若是切图的人改网页上的东西，必定会影响另外两我的，天然会存在如何合理的跟另外两我的保持修改页面状态一致的问题。github

根本性的解决方案

web componentsweb

解决问题的思路：

让网页由一个个积木组成，每个积木经过良好的定义规定好接口和规范，以及统一的实现。这个本质上和咱们用同一个型号的砖头能够盖出不一样的房子没什么两样。

目前问题：

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

广泛的解决方案

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

固然这是后话，咱们本文说了：

1.为何会HTML、css、JS分离形成问题的

2.根本解决方案的问题

3.广泛解决方案

4.为何最终你们走到了react方式这一步。

好，本文就先到这里。

做者：会点前端的大彬哥

本系列文章全部学习资料和源码demo，都可经过GitHub下载，

地址：github.com/leolau2012/…

版权全部，转载请注明出处。

React学习交流群：