React
v16.7.0GitHub

React v15.5.0

April 06, 2017 by Andrew Clark

自上次更新React已经是一年前了。我们下一次的重要发布，React 16，将包含一些让人兴奋的提升，包含一个完全重写的React内核。我们认真考虑了稳定性，并致力于以最小的改动将这些特性带给我们的用户。

最后，我们发布了React 15.5.0。

新的弃用警告 {#new-deprecation-warnings}

最大的改变是我们将React.PropTypes和React.createClass 移到他们的自己的包。二者仍然可以通过主要的React独享访问，但是在开发模式下，使用其中的一个将在控制台上打印一个过时的弃用警告。这将会让之后代码大小有所优化。

这些警告并不会影响你的应用行为。然而，我们意识到他们可能会造成一些困惑，尤其是你使用的测试框架将console.error视为失败时。

添加新警告并不是我们轻易做的。 警告在React中不仅仅是建议 - 它们是我们能够让尽可能多地人使用最新版React的策略的组成部分。我们从不在不增加路径的情况下增加警告。

因此，当警告可能在短期内造成困惑，我们相信能刺激开发者在当前迁移代码库而防止在未来产生更大困惑。提前修复警告确保你已为下一个重要发布做好了准备。若你的应用在15.5时产生了0个警告，那么在16中应该能够继续工作而无需任何改变。

关于每一项新的弃用，我们已经提供了一份代码修改（codemod）以自动迁移你的代码。它们已可以利用来作为 react-codemod项目的部分。

从 React.PropTypes 迁移 {#migrating-from-reactproptypes}

属性类型是用于在开发期间对属性进行运行时校验的一项特性。我们已将内建的属性类型提取到一个独立的包中以反映是否并非每个人都会使用的事实。

在15.5中，不再是从React主对象中访问 PropTypes ，而是安装prop-types包并从中引入他们：

// 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,
};

对于这一改变，codemo 自动处理这一转换。基础用法：

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

propTypes， contextTypes 和 childContextTypes仍将和以前一样。唯一的改变是以前内建的的验证器现在位于独立的包内。

你也可能考虑使用 Flow来静态地检查你的JavaScript代码类型，包括React 组件.

从 React.crateClass 迁移 {#migrating-from-reactcreateclass}

当React首次发布时，在JavaScript中并没有通用的方式创建类，因此我们提供我们一个自定义方法：React.createClass。

而后，类被添加进该语言中作为ES2015的一部分，因此我们增加了使用JavaScript的类来创建React组件的能力。与函数式组件一起，JavaScript类现在都是在React创建组件的首选方式。

对于已经存在的 createClass 组件，我们建议你将它们迁移到JavaScript类。然而，若你的组件依赖于混合（mixins），迁移至类可能不会立即可行。若是如此，create-react-class 作为一个顺带的替换方案已在npm上可用：

// 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 />;
  }
});

你的组件仍然能够和之前一样继续工作。

对于这一变化，codemo 尝试转换createClass组件为一个JavaScript类，并在必要时回退到create-react-class。该方案已处理了Facebook内部数千计的组件。

基本用法：

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

不再支持的 React 附件 {#discontinuing-support-for-react-addons}

我们将停止维护React附件包。真实地，大多数包已经有很长时间没有维护了。它们仍将持续继续工作，但我们建议尽快迁移以防止将来的破坏。

  • react-addons-create-fragment - React 16将优先支持碎片，在这点上该包已不再必要。我们推荐使用键控元素的数组。
  • react-addons-css-transition-group。使用react-transition-group/CSSTransitionGroup。1.1.1版本提供了插入式的替代方案。
  • react-addons-linked-state-mixin 直接设置value和onChange处理器
  • react-addons-pure-render-mixin - 使用React.PureComponent。
  • react-addons-shallow-compare - 使用React.PureComponent。
  • react-addons-transition-group 使用react-transition-group/TransitionGroup。1.1.1版本提供了一个插入式的替代方案。
  • react-addons-update - 使用immutability-helper，一个插入式替代方案。
  • react-linked-input - 直接设置value和onChange处理器。

我们也放弃对于react-with-addonsUMD构建的支持。其将在React 16中被移除。

React 测试套件 {#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';

这反应了我们所说的测试套件实际上是一套包装了DOM渲染器的API。

浅渲染是一个例外，其并不是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';

感谢 {#acknowledgements}

特别感谢这些人转让npm包名称的所有权：

安装 {#installation}

我们推荐使用Yarn或npm来管理前端依赖。若你是初次接触包管理器，Yarn documentation是一个不错的起点。

通过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

我们推荐如webpack 或 Browserify打包器，以让你可以编写模块化代码并将其打包到一起放在一个小的包内以优化加载时间。

记住默认情况下，React在开发模式下运行会带有额外检查并提供有用的警告。当部署你的应用时，确保其在生产模式编译。

万一你未使用打包器，我们也提供了一个预先构建好的包在npm上，你可以在你的页面中通过script标签引入。

我们还在npm上发布了react，react-dom及附件包的15.5.0版本以及在bower上的react包。

修改日志 {#changelog}

15.5.0 (April 7, 2017) {#1550-april-7-2017}

React {#react}

  • 为React.createClass增加一个独立的警告。将用户指向create-react-class。（@acdlite 在 d9a4fa4的提交）
  • 为React.PropTypes增加一个独立的警告。将用户指向prop-types。（@acdlite 在 043845c的提交）
  • 修复同时使用ReactDOM和ReactDOMServer。（@wacii 在 #9005提的PR）
  • 修复关于Closure Compiler的问题。（@Shastel 在 #8882提的PR）
  • 另一个关于Closure Compiler的修复。（@Shastel 在 #8882提的PR）
  • 为无效的元素类型警告增加组件栈信息。（@n3tr 在 #8495提的PR）

React DOM {#react-dom}

  • 修正当在数字输入中回退时的Chrome bug。(@nhunzaker 在 #7359提的PR)
  • 增加react-dom/test-utils，暴露React测试套件。(@bvaughn)

React Test Renderer {#react-test-renderer}

React Addons {#react-addons}

  • 最后一次发布附件；他们将不再被维护
  • 移除peerDependencies以让附件能够无限期继续工作。（@acdlite 和 @bvaughn 在 8a06cd7 和 67a8db3的提交）
  • 更新以移除React.createClass 和 React.PropTypes 的引用。（@acdlite 在 12a96b9的提交）
  • react-addons-test-utils被移除。使用react-dom/test-utils 和 react-test-renderer/shallow 代替。（@bvaughn）
编辑本页面