React v15.5.0更新说明 & v16.0.0更新预告

Posted 2020-09-17 黑乌鸦

React今日发布了15.5.0版本，同时这也将是以15开头的最后一个版本，下一次发布，我们将迎来React 16.0.0

在15.5.0这一版本中，主要有以下两处改动：

独立React.PropTypes

在之前的版本之中，我们可以通过React.PropTypes这个API访问React内置的一些类型来检查props，在15.5.0版本中，这一API被独立成了一个新的包 prop-types

// 15.4 以前
import React from ‘react‘;

class Component extends React.Component {
  render() {
    return <div>{this.props.text}</div>;
  }
}

Component.propTypes = {
  text: React.PropTypes.string.isRequired,
}

// 15.5 以后
import React from ‘react‘;
import PropTypes from ‘prop-types‘;

class Component extends React.Component {
  render() {
    return <div>{this.props.text}</div>;
  }
}

Component.propTypes = {
  text: PropTypes.string.isRequired,
};

即将废弃React.createClass

目前的版本中我们一共有三种声明组件的方式：

• React.createClass
• javascript Function
• ES6 Class

因为之前JS当中并没有类的概念，所以React在内部实现了一个createClass的方法，但现在ES6已经十分普及，对Class的支持已经比较完善，所以在之后的版本中，React会废弃createClass这一方法。

当然，如果使用ES6 Class来声明组件的话，之前的mixins就无法使用了，所以React还为createClass方法准备了一个独立的包 create-react-class

// 15.4 以前
var React = require(‘react‘);

var Component = React.createClass({
  mixins: [MixinA],
  render() {
    return <Child />;
  }
});

// 15.5 以后
var React = require(‘react‘);
var createReactClass = require(‘create-react-class‘);

var Component = createReactClass({
  mixins: [MixinA],
  render() {
    return <Child />;
  }
});

以上是两项最主要的改变，也是最影响我们已有代码库的改动。你仍然可以在15.5.0版本中使用这两个API，但是在控制台会看到输出的废弃警告，并且在接下来的16.0.0版本中，这两个API会被彻底移除。

不过同学们也不同担心，这次改动之后，将可以“无痛直升”16.0.0版本。

另外还有一些有关测试和附件的改动就不再赘述，想要了解的同学可以去阅读React今天发布的博客React v15.5.0

React 16

• ReactDOM将会正式启用Fiber算法，不过API并不会改变，所以使用体验，你可能只会感觉到React更快，渲染更流畅了。关于Fiber的详细介绍，可以看这一篇讨论如何理解 React Fiber 架构？
• React.createClass/PropTypes/React.createFactory/React.DOM.* 几个方法将会被移除分离到单独的包中。

其余的改动和开发计划可以在React 15.5 and 16 Umbrella · Issue #8854 · facebook/react查阅。

你也可以通过下面的命令提前体验react 16.0.0版本

npm install [email protected]

React 16 正式版本有望在今夏发布：