关于React高、低版本的整理

React在2013年5月份开源以来，版本就一直在更新。13-17年主要是低版的（15版），17年9月份出的高版（16版），两个版本之间差别还是蛮大的，改动的小细节也不少，本文就这些改动做一个整理。

先说高版

1.引入的基本文件  

• react.production.min.js
•  react-dom.production.min.js
•  browser.min.js

2.定义组件的方式

用class Demo extends React.Component{}来定义组件

3.属性之间的传值用法

能使用组件defaultProps构造器传值，在组件构造和组件渲染之间用。

4.状态state方法

在constructor中通过this.state={}来设置初始状态，在事件中调用this.setState()需要在构造器中通过bind绑定this,this指向不一样。

5.生命周期函数

其生命周期整体流程钩子函数只有三个：componentWillMount(){}、render、componentDidMount(){}

   注：getDefaultProps、getInitialState只在低版中有效，在高版本无效

6.新增

新增了componentDidCatch这个生命周期函数，它可以捕获自身及子树上的错误并对错误做优雅处理，包括上报错误日志、展示出错提示，而不是卸载整个组件树，使用Error Boundary处理错误组件。但是，15版本，一旦某个组件发生错误，整个组件树将会从根节点被unmount下来。

Render方法新增了返回类型，16版本render方法支持直接返回string，number，boolean，null，portal，以及fragments(带有key属性的数组)，这可以在一定程度上减少页面的DOM层级。

setState传入null时不会再触发更新等等。

再说低版

1.引入的基本文件 

• react.min.js
• react-dom.min.js
• browser.min.js；

2.定义组件的方式

react是通过var Demo = React.createClass{}来定义组件的；

3.属性之间的传值用法

可以使用钩子函数getDefaultProps实现参数的传递，高版本不存在此函数；

4.状态state方法

用getInitialState()来定义初始状态，用this.setState()更新组件的状态；

5.生命周期函数

生命周期整体流程钩子函数总体有五个：getDefaultProps、getInitialState、componentWillMount(){}、render、componentDidMount(){}

注：定义组件的方式，高版本创建语法能在低版本中写，但是低版本创建语法不能在高版本中写，因为高版本废弃createClass（），但是react是用原生JS开发的，所以低版里面是可以用ES6的语法来定义组件的。