持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情
mvc
MVC是一种使用MVC（Model View Controller模型-视图-控制器）设计创建Web应用程序的模式
Model（模型）表示应用程序核心（比如数据库记录列表）
View（视图）显示数据（数据库记录）
Controller（控制器）处理输入（写入数据库记录）
MVC模型同时提供了对HTML、CSS和JavaScript的完全控制
Model（模型）是应用程序中用于处理应用程序数据逻辑的部分，通常模型对象负责在数据库中存取数据
View（试图）是应用程序中处理数据显示的部分，通常视图是依据模型数据创建的
Controller(控制器)是应用程序中处理用户交互的部分,通常负责从视图读取数据,控制用户输入,并向模型发送数据
react介绍
react是一个用于创建可复用、可聚合的web组件库
react提供的只是mvc里面的c部分(控制器)，不是全部的MVC框架
在架构思想上React是以观察者模式来设计的，观察者模式又被称为发布订阅模式
特点：
组件化：不是一大堆html代码模板
js逻辑与html标签紧密链接
单向数据传输
虚拟的DOM结构
优点：
组件化更加清晰直观
组件关系更加清晰
结果可以预测
模块化/组件化
module侧重的是对属性的封装，重心是在设计和开发阶段，不关注runtime的逻辑。module是一个白盒
component是一个可以独立部署的软件单元，面向的是runtime，侧重于产品的功能性。component是一个黑盒，
内部逻辑是不可见的
jsx语法、优势、表达式
语法：
JSX语法，它允许HTML与JavaScript的混写
jsx遇到HTML标签（以<开头），就用HTML规则编译，遇到以{开头，就用JavaScript规则编译
ReactDOM.render（）：是React的最基本用法，用于将模板转换为HTML语言，并插入指定的DOM节点
优势：
JSX执行更快，因为他在编译为JavaScript代码后进行了优化
它是类型安全的，在编译过程中就能发现错误
使用JSX编写模板更加简单快捷
表达式的使用：
在JSX中不能使用if else语句，但可以使用condition（三元运算）表达式来替代（{a>=1?'班':'级'}）
注释：
注释需要卸载花括号里{/*注释*/}
数组：
JSX允许在模板中插入数组，数组会自动展开所有成员
标签：
React可以渲染HTML标签（strings）或React组件（classes）
要渲染HTML标签，只需在JSX里使用小写字母的标签名
要渲染React组件，只需创建一个大写字母开头的本地变量
语法实例：
var a=1;
var fc={fontSize:30,color:'#f00'};
var name=['lili','tomorrow','lucy']
var title=<h2>入门</h2>;
ReactDOM.render((
<div>
{title}
hello react{a>=1?'班':'级'}
<p style={fc}>样式展示</p>
<p>{name}</p>
</div>
), document.getElementById('app'));
组件
组件就是函数
对于一个独立的组件而言，可以把它看成是一个JavaScript函数
对于函数而言，当你通过传递参数调用函数时，函数会返回给你一个值，相比之下，对于React组件而言，道理是
相似的，传递属性给组件，而组件则会返回一个被渲染好的DOM
css使用
内联样式
外部样式
import './Header.css';//引入外部css
