学习React---与Vue用法对比一（基本介绍）

介绍

Vue

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动

React

React 是一个用于构建用户界面的 JavaScript 库

BootCDN

BootCDN 是 猫云 联合 Bootstrap 中文网 共同支持并维护的前端开源项目免费 CDN 服务，致力于为 Bootstrap、jQuery、React、Vue.js 一样优秀的前端开源项目提供稳定、快速的免费 CDN 加速服务。BootCDN 所收录的开源项目主要同步于 cdnjs 开源项目仓库

注：以下所有引入的js都从BootCDN中获取

Vue需要引入的文件

// vue核心文件
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>

React需要引入的文件

// react核心文件
<script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.1/umd/react.development.js"></script>
// react渲染dom核心文件
<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.1/umd/react-dom.development.js"></script>
// 用来编译jsx语法
<script src="https://cdn.bootcdn.net/ajax/libs/babel-core/5.8.24/browser.js"></script>

这里记录一下遇到的几个问题

• vue版本选择3.0以上版本会出现以下问题(暂时不深究)，选择2.0版本即可
  

• babel版本选择最新版本会出现以下问题，babel的版本不能太高
  

• React引入react.js与react-dom.js的顺序不能颠倒
  

• js文件的选择说明（这里选择umd版本通过标签直接引入）
  umd：UMD 版本可以通过 <script> 标签直接用在浏览器中
  CommonJS/cjs：cjs版本用来配合老的打包工具比如 Browserify 或 webpack 1
  ES Module/esm：esm版本为webpack 2 或 Rollup 提供的现代打包工具

1.Vue的写法

// 准备一个节点
<div id="vue">你好，vue</div>

<script>
     new Vue({          //  每一个vue组件都是一个vue实例
         el:'#vue'         // 指定vue实例绑定的dom元素

     })
</script>

2.React的写法

// 准备一个节点
<div id="react"></div>

<script type="text/babel">      // 注意：type="text/babel"，需要使用到babel解析成浏览器能识别的代码
    // 类组件写法
    class ReactDemo extends React.Component{       // 每一个react组件都是一个继承React.Component类的类
        render(){                                  // render函数指定该组件的渲染内容，jsx语法
            return (                         
                <div>你好，react</div>  
            )
        }
    }
    // 函数式组件写法
    function ReactDemo1() {
        return (
            <div>你好，react</div>
        )
    }
    // 通过ReactDOM的render将该组件渲染到获取的节点内，替换该节点下面的内容
    ReactDOM.render(<ReactDemo/>,document.getElementById('react')); 
    // ReactDOM.render(<ReactDemo1/>,document.getElementById('react'));
</script>

需要注意：
1.react组件需要首字母大写，因为react组件是以html标签的格式，会与其他html标签混在一起，用于区分，小写的标签一般默认为html标签而不是React组件

2.jsx语法实际上执行的是React.createElement方法返回的是一个js对象（虚拟DOM）