版本v16.13.0
单独看react不是mvvm也不是mvc，只是一个view层(但是引入了redux等，并且把控制视图的逻辑写在组件内部，就是mvvm了)。 vue也不是mvvm和mvc，vue只是view层(但是如果引入vuex等，就是mvvm了)。mvvm和mvc都是一个架构模式。vm指的是数据驱动视图(也可以理解为组件，一个拥有状态也需要管理状态的视图)，比如vue和react都是单向数据流(vue用v-modal实现双向绑定，react即使是非受控组件也不是双向绑定)
一、React简介
React 是一个用于构建用户界面的 JavaScript 库。React 是单向数据流
React 从诞生之初就是可被逐步采用的，因而你可以按需引入或多或少的 React 特性
script直接引入react，如下
// 通过 CDN 的方式引入 React，建议设置 crossorigin 属性
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
ReactDOM.render()函数：用来在指定的节点上面渲染对应的react元素，简单说就是用来更新 UI
// 把<h1>Hello, world!</h1>，绑定到后面获取到的root元素上面。root元素是在
ReactDOM.render(<h1>Hello, world!</h1>,document.getElementById('root')
);
二、JSX 简介
ReactElement就是react元素，或者说就是react中的虚拟dom。React 通过读取这些react元素，然后使用它们来构建 DOM 以及保持随时更新
(1)JSX，是一个 JavaScript 的语法扩展,jsx也就是react中的一个标签语法(React.createElement()的语法糖)，也是react中的一个表达式，用来创建ReactElement；语法样式就是，在js中直接写的类似于html的样式。如下：就是一个jsx语法
// 下面标签语法既不是字符串也不是 HTML，而是jsx
// 由于jsx也是一个表达式，所以可以赋值给变量
const element = <h1>Hello, world!</h1>;
(2)jsx中用
{}(大括号)的形式来嵌入 JavaScript 表达式。属性中嵌入 JavaScript 表达式时，不要在大括号外面加上引号。还一个重要的是 如果大括号里面为一个数组，则数组里面的每一项都会被渲染为一个reactElement，并且展示出来。注意这种遍历的情况，需要在每一项上面加上key属性(这个key的默认值为数组的索引)
import React from 'react'
import { Router, Route, Link } from 'react-router'
import ReactDOM from 'react-dom'const name = 'Josh Perez';
const element = <h1>Hello, {name}<img src={user.avatarUrl}></img></h1>; // 后面一段为在属性中插入js表达式，直接用大括号就好了。不需要加上引号ReactDOM.render(element,document.getElementById('root')
);// 大括号里面为一个数组，数组里面的每一项都会被渲染处理
function myComponent() {const arr = [11.22];return (<div>{arr.map(value => {return <p key={value}>{value}</p>}) // 这里return出来的一个数组，里面的每一项都会被渲染为一个reactElement.而且，每一项是需要有一个key值的}</div>);
}
(3)jsx里面属性的命名更加类似于js，如class 会写为className
const element = (<h1 className="greeting">Hello, world!</h1>
);
(4)React.createElement(component, props, …children)创建ReactElement: 这个实际上是react原生的创建ReactElement的语法。上面的JSX也会被babel-loader或者ts-loader解析成这个函数，然后来创建ReactElement。
// 上面(3)里的代码，和下面这段等效
const element = React.createElement('h1', // 标签{className: 'greeting'}, // 属性'Hello, world!' // 子元素
);// 创建的ReactElement的样式为下，注意：这是简化过的结构
const element = {type: 'h1',props: {className: 'greeting',children: 'Hello, world!'}
};
(5)react中隐藏元素: 隐藏元素有下面3种方法
// 1、通过一个变量来控制渲染。如果值为false，则内容不会渲染。缺点为，这种方法不适合频繁控制显示隐藏的情况，因为会重新渲染元素，比较费性能；适合安全性高的页面，比如用户信息页面，如果用下面的方法 那么元素还在页面，用户打开控制台是可以看到元素的
{ go && <span /> }
// 2、display隐藏，这个没什么好说的
// 3、设置一个全局的 hide 类名，然后通过控制这个类名来控制隐藏。本质和上面的display是一样的
.hide { display: none }
<span className={go ? "hide" : ""} />