关于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方法支持直接返回stringnumberbooleannullportal,以及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的语法来定义组件的。

 

猜你喜欢

转载自blog.csdn.net/keep789/article/details/81414626
今日推荐