×

新人第025天---【译】React 16 beta中文文档

96
cyuamber
2017.08.04 01:34* 字数 1770

React 10 beta版发布了。翻译了官网上的文档,方便大家阅读。恳请大家批评指正。

原地址:https://github.com/facebook/react/issues/10294

React 16 beta版公测开始啦!🎉

安装指南

测试版已经在npm包中发布了,标签是“next”。 常规的npm安装将继续安装15.6版。要安装测试版需要使用以下命令:

yarn add react@next react-dom@next

或者:

npm install --save react@next react-dom@next

对你来说,React 16意味着什么?

React 16是第一个对React核心代码(之前的代号是“Fiber”)进行重写的版本。重写有以下几个目标:

  • 移除了一些旧的内部抽象,它们发展的不好,阻碍了内部变更。
  • 实现一些备受期待的功能,比如: 在render中返回数组、 组件错误恢复以及跟踪每个错误的可读组件堆
  • 开发者可以尝试对组件进行异步渲染,以获得更好的呈现效果

React 16.0主要关注与现有app的兼容性。目前还不支持异步渲染。在后期的 React 16.x版本的发布过程中,我们将加入异步模式的选择项。我们并不期待 React 16.0会给你的app带来多大的速度上的改变,但是我们却很关注你是否看到了进步,或者退步。

环境要求

React 16依赖于Map和Set这一类型集。如果你所支持的老式浏览器和设备本身不提供(如 <IE11),请考虑在你的应用bundle中加入一个全局polyfill,比如core-js或是babel-polyfill。

在使用core-js的React 16 的polyfill环境中,支持旧版本浏览器的写法如下:

import 'core-js/es6/map';
import 'core-js/es6/set';

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

React同样依赖于requestAnimationFrame(测试环境也是如此)。测试环境中,一个简单的shim如下:

global.requestAnimationFrame = function(callback) {
  setTimeout(callback, 0);
};

兴趣点

  • 这是对React完全的重写,但是我们还是期望能与你现有的代码兼容。如果你修复了15.x版本中引入的所有deprecation警告,那16beta版本就可以完美运行了。
  • 用户需要更新依赖于弃用或是不支持的API的第三方库以保证其在新版本下正常运行。现在正是对存在问题的库提出issue的好时机。
  • 我们尤其感兴趣的是来自于用户的关于15.x和16.x两个版本之间的不同表现的反馈。或许没有什么巨大变化,但是我们还是想听听有哪些进步或是退步。请在这里指出来!
  • 服务器渲染器被完全重写,现在提供一种流模式(现在通过react-dom/node-stream来实现不过未来可能会有变化)。服务器渲染器不再使用标记验证,而是尽量与已存在的DOM相关联,并对不一致发出警告。服务器渲染器的代码还很新,因此可能会存在issue。请在这里提出来。
  • React Native属于不同的发布周期,它的测试版本将在未来发布。

突破性变更

错误处理

  • 以前,runtime错误会使React的state终止并产生含混不清的错误。 React 16修复了这一点,引入了一种叫做“error boundaries”的特殊组件。Error boundaries能在组件树中捕获runtime错误,记录错误,同时显示一个备选UI。
  • 如果组件中存在未捕获的的错误,那么组件树中就不存在error boundary,那么整个组件树就会unmounted。这样做有利于避免那些脏bug打断UI的显示,但这也意味着开发者需要在app中添加一些error boundary来优雅地处理错误。
  • React 15对error boundaries也有支持,但未被写进文档,方法名也不同。React 15名叫unstable_handleError,现在更名为:componentDidCatch

点击这里了解更多关于错误处理行为的信息.

进程安排和生命周期

  • 现在,如果在一个生命周期的方法中使用ReactDOM.render() 和ReactDOM.unstable_renderIntoContainer() 则会返回null
  • 为了应对这一点,开发者可以使用the new portal API 或者是 refs.
  • setState:
    • setState为空将不会再触发更新。开发者可以在更新函数中决定是否需要重新渲染。
    • 在render中直接调用setState总是可以导致更新。这与之前不同。尽管如此,开发者还是不应该在render过程中调用setState。
    • setState回调(第二个参数)在componentDidMount / componentDidUpdate后会立即触发,而不是在所有组件渲染完成之后。
  • 当使用<A />替代<B />的时候, B.componentWillMount总是会在A.componentWillUnmount之前发生。以前,A.componentWillUnmount总是会在某些事件中首先结束。
  • 以前,更改一个组件的引用总会将其在调用组件渲染之前与组件分离。现在我们将其延后,在变化应用到DOM时才更改引用。
  • 使用除了React之外的工具更改容器内容并重新渲染是很不安全的。这样做虽然有效,但却从不受支持。现在,我们会对这种做法发出警告。开发者可以清空组件树并使用ReactDOM.unmountComponentAtNode. 参见此例.
  • componentDidUpdate生命周期不再接收prevContext参数。(参见 #8631

打包

  • react/lib/*react-dom/lib/*已经被移除了。即使在CommonJS环境中,React和ReactDOM都会被提前编译为一个单独的文件(“flat bundles”)。如果开发者之前依赖于非文件记录的内部构建,而他们现在又失效了,请在此issue下告知我们您的具体情况,我们会尝试为您提出迁移方案。
  • react-with-addons.js构建也被移除了。所有兼容性扩展在npm上分开发布,也有单文件浏览版本供开发者参阅。
  • 在15.x版本中引入的deprecations现在从核心包中移除了。React.createClass 现在改为 create-react-class, React.PropTypes 改为 prop-types, React.DOM 改为 react-dom-factories, react-addons-test-utils 改为 react-dom/test-utils, and shallow renderer 改为 react-test-renderer/shallow.参见15.5.015.6.0的博客,那里有介绍如何迁移代码并自动化codemods。
  • 单文件浏览构建的名称和路径发生了变化,为的是突出开发和发布的不同。比如:react/dist/react.js → react/umd/react.development.js
    • react/dist/react.min.js → react/umd/react.production.min.js
    • react-dom/dist/react-dom.js → react-dom/umd/react-dom.development.js
    • react-dom/dist/react-dom.min.js → react-dom/umd/react-dom.production.min.js
前端学习笔记
Web note ad 1