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的语法来定义组件的。