Facebook 发布 React V15.5.0

　　4月7日，Facebook宣布正式发布React 15.5.0版本。以下是这个版本的主要功能，摘自其发布声明。

　　新的弃用警告

　　本次最大的变化是把 React.PropTypes 和 React.createClass 各自抽取成包。它们仍然可以通过React对象访问，但是在开发模式下，这样的用法会在控制台上出现一次过时警告。这是为了便于日后对代码大小做优化。

　　这些警告不会影响应用程序的功能，但短期内可能有一些别的影响，比如某些测试框架可能会把console.error 当作出错来处理。

　　对于这些被弃用的方法，我们提供了一个Codemod来自动迁移代码，它们是 react-codemod 工程的一部分。

　　从 React.PropTypes 迁移

　　propTypes 是在开发过程中进行运行时验证的特性, 但其实并不是所有人都在用这个功能, 所以我们把内置的prop types抽取到单独的包中.

　　在15.5中, 不再建议通过React对象访问PropTypes, 而是安装prop-types包并import.

　　// Before (15.4 and below)

　　import React from 'react';

　　class Component extends React.Component {

　　render() {

　　return <div>{this.props.text}</div>;

　　}

　　}

　　Component.propTypes = {

　　text: React.PropTypes.string.isRequired,

　　}

　　// After (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,

　　};

　　针对这个变化, codemod会自动进行转换, 基本用法:

　　jscodeshift -t react-codemod/transforms/React-PropTypes-to-prop-types.js <path>

　　propTypes，contextTypes和childContextTypes 各API都仍然和以前一样，唯一的变化就是原来内置的验证器现在位于各自单独的包里。

　　你还可以使用Flow对你的Java代码和React组件做静态检查。

　　从 React.createClass 迁移

　　在React发布之初，Java中并没有创建类的惯用方法，所以我们提供了自己的：React.createClass。

　　之后，类作为ES2015的一部分添加到Java语言中，因此我们又增加了用Java类创建React组件的功能。除了功能组件，Java类现在是在React中创建组件的首选方法。对于现有的createClass组件，我们建议您将它们迁移到Java类。

　　// Before (15.4 and below)

　　var React = require('react');

　　var Component = React.createClass({

　　mixins: [MixinA],

　　render() {

　　return <Child />;

　　}

　　});

　　// After (15.5)

　　var React = require('react');

　　var createReactClass = require('create-react-class');

　　var Component = createReactClass({

　　mixins: [MixinA],

　　render() {

　　return <Child />;

　　}

　　});

　　您的组件还是会像之前一样工作。对于这项改变, codemod会尝试将createClass组件转换为Java类，必要的话也可以回退到create-react-class。它已经在Facebook内部转换了数千个组件。

　　基本用法：

　　jscodeshift -t react-codemod/transforms/class.js path/to/components

　　不再继续支持React Addons

　　我们将不再继续维护React插件包, 其实其中大部分的包已经有很长时间没有维护过了. 它们可以继续使用, 但我们建议尽快迁移以防将来影响应用的功能.

react-addons-create-fragment - React 16将对fragment提供支持，那么到时候就不需要这个包了。
react-addons-css-transition-group - 改用react-transition-group/CSSTransitionGroup代替。
react-addons-linked-state-mixin - 通过显式地设置value和onChange handler来代替。
react-addons-pure-render-mixin - 用 React.PureComponent 代替。
react-addons-shallow-compare - React.PureComponent改为使用。
react-addons-transition-group - 使用 react-transition-group/TransitionGroup 代替。
react-addons-update - 用 immutability-helper 代替。
react-linked-input - 通过显式地设置value和onChange handler来代替。

　　我们也将停止对react-with-addons UMD构建的支持, 它会在React 16中移除。

　　React Test Utils

　　目前, React 测试工具库内置在react-addons-test-utils, 在15.5版本中将被移入 react-dom/test-utils：

　　// Before (15.4 and below)

　　import TestUtils from 'react-addons-test-utils';

　　// After (15.5)

　　import TestUtils from 'react-dom/test-utils';

　　这其实说明了我们所说的Test Utils实际上是一套包装DOM渲染器的API。

　　exception是浅渲染，不是基于特定DOM的。浅层渲染器已被移至react-test-renderer/shallow。

　　// Before (15.4 and below)

　　import { createRenderer } from 'react-addons-test-utils';

　　// After (15.5)

　　import { createRenderer } from 'react-test-renderer/shallow';

　　安装

　　推荐使用Yarn 或者 npm 来管理前端依赖.

　　用Yarn 安装 React:

　　yarn add react@15.5.0 react-dom@15.5.0

　　用 npm 安装 React:

　　npm install --save react@15.5.0 react-dom@15.5.0