React 进阶一

React适合做什么

React是facebook开源的前端开发框架，以高性能，易用性著称，而作为React本身，它适合做什么事情呢？

Building large applications with data that changes over time

即用于构建数据不断发生变化的大型应用。
怎么说呢，就是React并不适用于构建一个企业的展示型官网，它适合的是电商网站，ERP系统，人资管理平台等中后台应用。

React的优缺点

React的优点大概就是性能，易用性，单向数据流三个方面。

• 易用性
  • 声明式编程。按我理解的声明式编程就是在开发过程中关注的点发生了变化，在jquery年代，我们需要考虑取回数据后如何拼接DOM然后如何塞入到指定div中，而现在更多的是关注数据格式，不需要考虑如何将数据渲染到指定容器中。

  // jquery
      function renderDiv(data, id){
          var content = $("#"+id);
          content.html("");
          content.html(dataRender(data);
      }
  // React
      <diy-list data={data}></diy-list>
      handelClick(){
          this.data = ...
      }
  

• 性能
  • 虚拟DOM。在原先的前端开发中，动辄就是对页面上的原生DOM进行操作，而原生DOM本身的属性之多令人不能想象，继而可以想到操作原生DOM的性能消耗成本。而虚拟DOM就是用javascript对象来代替dom，而我们在react中的一切操作其实都是基于虚拟DOM，我们并不能直接操作到真实DOM。

  <diy-list data={data}></diy-list>
  /*
  {
      tagName: diyList,
      props:{
          data: data
      },
      children: [
      
      ]
  }
  
  */
  

  • diff算法。react中的虚拟DOM是diff算法的前提，每次页面DOM需要更新时，React会将之前的虚拟DOM存放在内存中，并且通过diff算法算出新旧俩个虚拟DOM中所需要的变更，准确的反应到DOM中
    • diff算法的规律：
      • 同层顺序对比，即每一层级和对应层级顺序对比，之后到下一层
      • 标签名称不同直接删除
      • 标签相同，属性不同，将对应属性标记，待完成后更新
      • 为什么需要key值，是因为React在运行diff算法时，为了准确且不消耗不必要性能，会根据key值循环整个列表，从而找到最小的改动

      // ago
      <ul>
          <li>a</li>
          <li>b</li>
          <li>c</li>
          <li>d</li>
      </ul>
      // now
      <ul>
          <li>a</li>
          <li>b</li>
          <li>e</li>
          <li>c</li>
          <li>d</li>
      </ul>
      //当前情况下，如果没有key，diff算法在比较到第三个li的时候，
      会因为内容的不同直接删掉之前的<li>c</li><li>d</li>,并且新
      建 <li>e</li><li>c</li><li>d</li>
      // 而如果根据一个固定key去循环，就会得出now只是比ago多了一
      个<li>e</li>,只需要新建一个即可，所以key最好使用uid这种字
      段去表示，而不是选用index区表示。
      

• 单向数据流
  单向数据流是指应用状态从上到下，便于维护。

React的缺点

• 过于简单，会导致需要学习其他的库和他搭配使用，比如fetch，Redux等，提高了学习成本。

jsx需要注意的点

• jsx是用来描述DOM结构的JavaScript语法糖。
• class->className, for->htmlfor
• jsx中的className和style是javascript对象