一. 安装react脚手架
1.全局安装create-react-app --没有必要
2.npx安装
npx create-react-app 文件名
出现 cd baisc-app和yarn start 表示安装成功
二.react的mvc设计模式
Vue中的MVVM (双向数据绑定)
M（模型层，主要负责业务数据相关） V（视图层，顾名思义，负责视图相关） VM（ViewModel，V与M连接的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点）
也就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改，以此也实现了视图与模型层的相互绑定；
React的MVC（默认是单向数据流，但是我们可以自己实现双向绑定）
M(model 数据模型层 ) V（view 视图层 ） C（controller 控制层 ）
主要实现通过控制层监听model的变化，数据变化后通过controller 控制层 来实现view层的渲染。
三.react的特点
1.虚拟DOM
2.React Fiber算法
3.组件系统 将页面中任何一个区域或者元素都可以看做一个组件 component
4.单向数据流
5.JSX 语法
四.组件
1.函数式组件
2.类组件
3.组件的嵌套
注意App内必须用标签包裹，但是用div标签会导致页面多渲染了一个div标签，可能会打乱数据结构
所以一般用空标签或者React.Fragment标签，这样react就不会渲染标签，和vue中的template标签一样
空标签和react.fragment的区别
空标签无法添加属性，后者可以添加属性，但是只能添加key属性
4.组件中的样式
命令行 cnpm i styled-components -S
然后在组件中导入包 import styled from 'styled-components'
直接声明变量，值为styled.标签名`样式`
使用时使用变量名为标签名
五.组件的数据挂载
1.属性（props）
（1）props传值
函数式组件使用props默认参数传递
类组件使用this.props传递
（2）props传默认值
函数式组件在声明之后使用defaultProps对象来设置默认值
类组件在内部通过 static defaultProps对象设置默认值
（3）props验证数据类型
函数式组件和类组件都使用propTypes第三方包
命令行输入 cnpm i prop-types -S
import PropTypes from 'prop-types' 导包
组件名.propTypes = { 属性名.PropTypes.属性类型} ---注意数据类型的首字母不需要大写
如果一个属性是多种数据类型使用oneOfType()方法
（4）指定属性必须传递，使用isRequired
（5）props.childern -- 这里children代表内容字符串子元素
如果有多个数据
页面效果为
因为第二个子组件Title和第三个Title中 children是字符串类型，如果使用下标会拆分字符串三为第一个下标，国为第二个下标
演义没有接收所以不显示
