react

市面上的三大框架

vue

渐进式框架

尤雨溪

设计模式：MVVM model 模型 view 试图 viewModel 试图模型（M和V之间的桥梁）

双向数据绑定

v-for v-model v-if v-show

angular

谷歌

1.x MVC model 模型 view 视图 controller控制器

2.x MVVM 微软的ts

ng-if ng-show ng-model

react

库

Facebook

开源

主要针对于试图

react介绍

react是Facebook内部的一个JavaScript类库

react用户创建web交互界面

react并不是一个完整的MVC框架，可以被认为是MVC中的V（view）

react设计思想非常独特，创新，性能出众，代码逻辑简单

react引入了虚拟DOM机制

react引入了组件化的思想

react使用了Facebook专门为它开发的一套语法糖：JSX（JavaScript XML）

react的优缺点

优点

• react速度很快

• 一切皆组件

• 单项数据流

• 同构、纯粹的JavaScript

• 兼容性好

• 缺点

  react不是一个完整的框架，它只是实现了MVC中的V，如果要构建大型的项目，那么还需要加上react-router （路由） redux（状态管理）

state和setState

• state 存储数据 （不是所有的数据都需要定义到state中的）

• constructor(){

    super()

    this.state={
        name:"阿乐",
        age:18
    }
}

• setState 修改数据

  • setState函数的特点

    • setState 可以触发render的渲染

    • render函数中不可以调用setState 它会造成死循环

    • setState 是异步的，有回调函数

 两者区别

• 函数组件没有state，没有声明周期

• 类组件有state，有声明周期

jsx语法特点

1、js和html的混合使用

2、有且只能有一个根元素

3、{/* jsx的注释 */}

4、遇见<> 则解析为html语法 遇见 { } 则解析成js语法 

5、jsx语法中，js中的一些关键字与dom属性相同时要区分   
    class==>className  for===>htmlFor  οnclick==>onClick

6、jsx中的行内样式: style={ json }

7、jsx语法中，自闭和标签必须加结束符

8、在jsx语法中，  js中的 if  else  for  都不能用

事件

创建事件==》事件绑定==》事件传参==》事件对象==》事件传播==》各个库或者框架中的特殊方法