React基础(1)

设计模式：MVC
前端主流三大框架背景对比：(国内流行Vue，国外流行React)

语法：
1.引入文件(按顺序)：

2.script标签中创建reactDOM元素
React.createElement(target标签名,attr属性,children子元素/content内容)
例：let h1 = React.createElement(‘h1’,{className:‘myh1’,id:‘main’},‘这是内容或者是子元素’)
渲染reactDOM元素：
ReactDOM.render(react元素,插入位置标签)
注意：设置reactDOM元素的子元素时，不能用标签字符串去设置

jsx转码脚本：JavaScript XML
引入：

jsx属于JavaScript的一种语法糖（在某语言的语法基础上的二次封装，使用时比原语法更加简单方便，但是无法直接被识别读取，所以需要一定的垫片处理）；
在script脚本中正常书写标签结构，这就是jsx
jsx中仅可出现一个根元素
推荐使用jsx来完成页面渲染，渲染速度优于createElement方式
若在脚本中使用jsx 需将script的type 属性修改为“text/babel”
jsx的表达式：读取js变量或js语法用 “{}”，在表达式中不允许使用if elseif 语法，要想实现逻辑判断，可以使用三目运算符，标签中添加类名使用className添加

无状态组件特点：
1、无状态组件不会被实例化，渲染性能更高一些
2、无状态组件一般只作用于某一个dom结构的封装，纯粹的渲染功能
3、无状态组件中没有state状态（当前组件的私有状态）
4、无状态组件中没有this指针，只具备一个props参数（只读属性的参数），不能被修改
5、react推荐使用无状态组件来完成页面渲染（能使用无状态组件的前提下，尽量使用无状态组件）

无状态组件语法：
1.函数式声明：
function MyComp() {
return

我是无状态组件

}
2.箭头式声明(推荐使用)：
const MyComp = ()=>(

我是无状态组件

);
调用：

无状态组件props：

复合组件(无状态组件的嵌套调用)：

有状态组件：

组件：

事件绑定：