React V15.5.0 由 Facebook 正式发布

React V15.5.0 由 Facebook 正式发布

🗨

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


频道:Web