持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第12天，点击查看活动详情

背景

好多大厂都在用React,那么为什么要用React呢，它有什么过人之处？
React是一个用于构建用户界面的javaScript库，具有组件化、声明式等特点，由于其优秀的DOM性能优化，使其一面世就广受用户追捧。
单纯的React.js只是一个js库，而其整个技术栈就是一个渐进式的框架，渐进式框架：主张最少，也就是可以只用它其中一部分，比如，开始搭建项目时，开发者只需要用到React,就可以只引入React,当项目有了新的需求后，可以再引入其他的类库，如路由库、状态管理库等，也就是用起来很自由。

专注于视图层

在开发前端项目时，经常会涉及对DOM的操作，开始时用户都是使用原生JS直接去操作DOM节点，但是原生API实在不好用并且还有很多兼容方面的问题，所以jquery就横空出世了。
很长一段时间内jquery以其简洁的API俘获着前端开发者的心。但jquery只是简化了DOM操作，在性能优化上并没有做什么处理，随着前端的业务越来越复杂，想要写出如微博这些交互比较复杂的页面，jquery就远远不够用了，于是乎React就来了，React正是在这种背景下诞生的。
React专注于View层的解决方案，Facebook官网也说React就是一个View层，也就是视图层。意思就是，在使用React的时候，只要告诉React需要的视图长什么样，或者告诉Reac在什么时间点把视图更新成什么样就可以了，剩下的视图渲染、性能的优化等一系列问题交给React搞定就可以了。

组件化开发和声明式编程

在React中，通常会把视图抽象成一个个组件，如Button按钮组件，Menu菜单组件、List列表组件等，然后通过组件的自由结合来拼成完整的视图。这种操作可以极大的提升开发效率，后期维护和相关的测试也都十分便捷。
在传统的项目开发中，通常采取命令式的编程方式，下面通过留言板的留言添加部分的这个栗子看看之前的编写方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="btn">添加一条留言</button>
<ul id="list">
    <li>留言1</li>
    <li>留言2</li>
</ul>
</body>
<script>
    let btn =document.querySelector('#btn');
    let list =document.querySelector('#list');
    btn.onclick=function(){
        //获取新留言
        let newMessage='新留言';
        let newLi=document.createElement('li');
        newLi.innerHTML=newMessage;
        list.appendChild(newLi);
    }
</script>
</html>

看效果：

Video_2022-06-12_224127 - 副本_.gif
在实现过程中，可看到操作过程是一步一步的给程序下命令：

获取新留言。
创建一个新的li标签。
把留言内容放入li。
把生成的li放入list。
这种一步步下命令的方式就成为命令式编程，这个过程有点繁琐，尤其程序逻辑比较复杂时需要编写大量的代码。
而React遵从的是声明式编程，声明式和命令式有什么区别？
简单总结：命令式编程注重过程，开发者需要告诉程序每步要怎么做，声明式编程注重结果，直接告诉程序要什么。
再以上栗子实现用React如何实现：

import React, { useState} from 'react';
export default function Message(){
  let [messageData,setData]=useState([
    {
      id:1,
      message:'留言1'
    },
    {
      id:2,
      message:'留言2'
    }
  ])
  return <div>
    <button id='btn' onClick={()=>{
      messageData.push({
        id:Date.now(),
        message:'新留言'
      });
      setData([...messageData])
    }}>
     添加留言
    </button>
    <ul id='list'>
      {
        messageData.map(item=>{
          return(
            <li key={item.id}>{item.message}</li>
          )
        })
      }
    </ul>
  </div>
}

看下效果：
效果一样的。
Message就是一个最基础的React组件，该组件中，现在useState中定义了数据模型([{id:1,...,...,...}]),然后再return后定义了要输出的视图(<div>...</div>),同时在视图中定义好了数据模型和数据的关系。点击按钮时只是修改了数据，React会帮助开发者进行视图的修改。
在这个过程中并没有一步一步命令React这么做，只是告诉React数据模型长什么样，视图长什么样，数据和视图的关系是怎样的，最终就完成了整个程序，这种编程就叫做声明式编程。
以上可以看出，声明式编程逻辑更加清晰，代码更加容易阅读，后期维护也会更加容易。

为什么要用React?揭开命令式编程到声明式编程的过程

背景

专注于视图层

组件化开发和声明式编程