react

react框架是由facebook开发的，主旨是解决数据交互频繁，以及组件复用的大型pc项目。

react是一个典型的mvc框架，但它仅仅是一个典型的mvc的view层

react默认是单向数据流，以组件为核心向四周扩散构建项目

react是一种未来的语言，是一种未来的方向

react的特性和优点

明式设计，采用声明范式

高效，使用虚拟dom进行渲染

灵活，仅仅是一个view层的框架，所以他跟其他的很多框架都有良好的兼容性

推荐使用js声x和tsx(typescript)，引擎模板来替换js

组件复用性高

单向数据流，结构清晰

mvc和mvvm （mvvm是mvc的一个分支）

mvc：model、view、controller：

model不能直接访问controler（代表框架backbone）

mvvm：model、view、viewModel：（数据双向绑定）

viewModel是model与view之间的桥梁，view与viewModel不能访问

react中的数据传输的核心：state和prop

react中的组件的状态：state往往定义一些变量，后期可能发生更新改变

父子组件之间的传递，我们使用prop，它往往用来传递一些不发生改变的参数

state：

设置变量：setState

获取变量：getStategetInitialState

react中的event对象

react的时间中都存在一个react，自己定义的对象，event主要是为了解决浏览器之间的兼容性

事件对象为空，是为了降低性能消耗

框架：antd、react-bootstrap

react被动更新

react是单向数据流操作，默认是不主动封信dom元素内容，绑定onChange事件模拟

react中特殊属性ref

使用来获取你真实dom元素中的内容 ReactDOM.findDOMNode

react数据双向绑定

react是一个mvc框架，但是他也可以实现mvvm中的数据双向绑定

react组件的生命周期可以分为3个过程：

1、Mounting：初始渲染中    2、Updating：更新渲染中    3、Unmounting：卸载中

Mounting：初始渲染中（第一次渲染中，它一共包括了5个生命周期）

getDefaultProps：设置属性（默认的prop）

getInitialState：设置初始状态

componentWillMount：在初始化渲染之前最后一次执行的函数（ajax回调处理）

render：进行第一次渲染

componentDidMount：在渲染完毕后执行的函数，在这个函数中，我们往往进行dom元素的操作

es6中：app.defaultProps = ?或者使用es7 static.defultProps

getInitialState：初始化状态值

construstor(props){

super(props)

this.state = {}

}

constructor：es6中的构造函数，在类中最先执行，往往配合super一块使用，相当于一个回调返回整个类的对象，这样才能使用this对象。

Updating：更新渲染中（它一共可以包括五个声明周期函数）

componentWillReceiveProps：当组件接受新的props时候触发，在这个函数中，我们可以更改prop或者state的值（nextprop，nextstate）

shouldComponentUpdate：是否允许第二次更新，返回值布尔类型单个组件性能测试的生命周期函数的测试

componentWillUpdate：在更新渲染之前执行，最后一次，但是尽量不要在次函数中更改state或者props

render：更新渲染

componentDidUpdate：在你更新渲染完毕后，第一次执行的函数可以进行dom的操作

Unmounting：卸载中（包括一个生命周期函数）

componentWillunmount：在你卸载之前触发的函数

语法：ReactDOM.unmountComponentAtNode()

react中创建元素，使用createElement(type,props object,child)

type创建元素的类型，

props object 属性的对象，

child 内容或者是它的内部元素

创建组件和创建元素配合使用

在createElement当中，如果type是组件类型，nameprops object，针对的就是组件中的属性，如果type不是组件，props object针对的是元素的属性

key属性：

唯一的，react中用来追踪那些列表中的元素被修改，被添加或者被替换的辅助标识

它往往和react当中diff算法配合使用

react中的key属性不是给开发者使用而是给react本身使用的

react中的工厂方法

react中引入Factory，主要是为了引入函数化（FP）编程的思想

函数化编程主要以函数作为模块，进行指向类编程，函数化编程，不需要主动回调，只需要被动指向

面向对象的编程思想（oop），和函数化编程思想（FP）

前端工程化越来越趋向于成熟，很多情况下，利用fp的思想进行开发，更加方便

方法：createFactory(string/type)

mixin

react是一个组件化的框架，主旨是组件与组件之间的相互独立，但是有时候组件与组件之间需要继承或者共享一些方法，这时候我们就要使用react提供的mixin的属性。

mixin往往要配合声明周期函数一块使用

react组件分类：业务组件（处理业务）和技术组件（处理功能）