【译】React 16 beta 版发布！

2017-07-30
暂无评论
阅读Markdown格式
2406 字
5分钟阅读时长

提醒：本文最后更新于 2447 天前，文中所描述的信息可能已发生改变，请谨慎使用。

原文：http://www.zcfy.cc/article/3733

令人欣慰，React 16 首个 beta 版已经发布可以公开测试了！下面我来告诉大家如何使用以及新版的一些值得注意的地方。

如何使用

安装

由于还是 beta 版，为了保障正常 NPM 安装还是使用 15.6 正式版，beta 版我们使用 next 标签发布在 NPM 上，你需要使用如下命令安装使用 beta 版：

# Yarn
yarn add react@next react-dom@next

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

Javascript 环境要求

由于 React 16 依赖 Map 和 Set 新的数据集合类型，所以我们不支持一些老浏览器和设备（例如 <IE11）。如果你要支持它们的话，最好为项目引入一个全局的 Polyfill，core-js 和 babel-polyfill 都是不错的选择。

下面是在 React 16 中使用 core-js 来支持老浏览器的示例：

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 16 还依赖了 requestAnimationFrame 方法，同样如果浏览器不支持的话我们需要提供一个 shim，例如：

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

React 16 给我们带来了什么？

React 16 是 React core（之前代号为“Fiber”）重构的首个过渡版。本次重构实现了一下几个目的：

本次 React 16 的首个版本主要集中在解决与现有应用程序的兼容问题，所以目前暂时还不支持异步渲染。我们会在之后的 16.x 版本中提供选项开启异步渲染功能。我们无法预料 React 16.0 会让你的应用变得更快还是更慢，但是我们希望大家看到 React 的改进与回归。

有趣的点

  • 虽然这个版本是 React 的重构版，但是我们希望它还是能向后兼容的。所以如果你已经修复了 15.x 版本所有控制台提示的已废弃警告的话，16 beta版你使用起来也肯定没问题的。
  • 目前一些依赖了已废弃或者已不支持的 API 接口的第三方组件需要修复这些问题才能兼容当前的 beta 版。现在已经可以给这些项目提 issue 解决这个兼容性问题了。（当然如果是我们的更新无意中破坏了某些接口，也欢迎告诉我们！）
  • 我们对 15.x 和 16.x 两个版本的性能差异非常感兴趣。我们不期望有非常大的变化，但是还是希望有一定的提升的。如果有相关的讨论可以在 issue 中提出！
  • 我们完全重构了服务端渲染功能，现在我们提供流模式来支持这个功能（代码放置在 react-dmo/node-stream中）。服务端渲染不再使用标记验证，而是将其尽可能地附加到现有 DOM 中，并对不一致进行警告。服务端渲染功能可能还有一些问题，如果碰到了请 issue 告诉我们。
  • React Native 有另外的发布周期，会在之后的版本中支持 16 beta版本。（目前有 alpha 版本支持了但是还不是使用 Fiber 引擎。）

重大改变

错误处理

  • 以前， React 的运行时错误会导致组件状态中断并显示一个令人费解的错误。React 16 新增一种称之为“错误边界”的特殊组件修复了这个问题。该组件能够捕捉组件树的运行错误，并支持降级显示 UI 提升交互。
  • 如果我们不适用错误边界组件的话，组件有未捕捉的错误时整个组件树会被卸载。这样能够避免由于错误而导致界面不正常，不过反过来说的话为了更好的交互你可能需要在某些组件中添加错误边界组件来更友好的显示错误。
  • React 15 对不同方法名称的错误边界的非文档支持非常有限。之前叫做 unstable_handleError，现在我们将其重命名为 componentDidCatch。

点击此处阅读了解更多的 React 错误处理行为。

队列和生命周期

  • ReactDOM.render() 和 React.unstable_renderSubtreeIntoContainer()：
    • 这两个方法在生命周期方法中执行时将会返回 null。如果真有这种需求，可以使用 portals 或者 ref 来代替。
  • setState：
    • 传递 null 给 setState 方法将不会触发更新。你可以自定义更新方法决定是否需要重新渲染。
    • 在 render 方法中直接调用 setState 总会导致更新。这点和之前不太一样。不管怎么说我们都不应该在 render 方法中直接调用 setState 方法。
    • setState 的回调函数（第二个参数）现在会在 componentDidMount/componentDidUpdate 生命周期之后立即出发，之前是在所有组件渲染完成之后才触发。
  • 当我们使用 <A /> 组件代理 <B /> 组件时，B.componentWillMount 总是为比 A.componentWillUnmount 先触发。老版本中 A.componentWillUnmount 在某些情况下会被先触发。
  • 之前，带 ref 组件的改变总是会在 render 之前将组件和 ref 进行分离。现在我们修改了 ref 变化的时间，让它在 DOM 变更后再做变化。
  • 使用非 React 重新渲染组件中的容器内容是不安全的。之前的版本中虽然可以使用，但是并不推荐。现在我们会在控制台中使用 console.error 发出警告。如果非得这么做的话你可以使用 ReactDOM.unmountComponentAtNode 方法清除组件。点击此处查看示例。
  • componentDidUpdate 生命周期不在返回 prevContext 参数。（具体详情查看 #8631）

模块

  • 移除 react/lib/* 和 react-dom/lib/* 模块。即使在 CommonJS 环境，React 和 ReactDOM 都被预编译成单文件了。如果你之前依赖了这些文档中没说明的 React 内部组件，你可能需要更新下。如果你有不得已的使用理由，请在 issue 中告诉我们，我们会试着为你做一个特别的版本！
  • 移除 react-with-addon.js 编译版本。所有的兼容组件已经独立发布在 NPM 中，并且都提供了对应的浏览器直接引用的单文件版本。
  • 我们修改了浏览器直接引用的单文件构建版本的名称和路径，用来区分开发版和生产版的区别。例如：
    • 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

插件

  • React 16 将不支持 react-addons-perf 组件。在之后的发布周期中我们可能需要提供类似功能的组件，不过目前还没有进行迁移。目前你可以直接使用 Chrome 开发者工具的 Performance 模块来优化组件，使用 Performance Observer API 在项目中收集性能数据。具体可查看该 issue。

已知问题

  • 当有内联样式时，服务端渲染会在生产环境中崩溃。(#10299, #10300 修复)
    • 在 16.0.0-beta.2 中已修复
  • 服务端渲染还不支持返回数组和字符串（已有 PR #10221，需要 review）。
  • 服务端渲染在某些情况下还是会返回 data-reactid 属性。(#10306)
  • Shallow renderer 还尉氏县 unstable_batchedUpdates 方法。(有待完善)
  • 一些流行的第三方组件还不能很好的工作（例如 Enzyme）。
  • 部分用户反馈 Google 爬虫访问使无法使用 16 渲染页面（来源）。
  • 某些情况下不返回真实的报错而是返回 Error: null。（ reactjs/react-redux#756 (comment)）
  • (欢迎在原文中为 React 报告更多的问题)

更新

  • 2017-07-24 在 NPM 上抽次发布 beta 版。

英文原文：https://github.com/facebook/react/issues/10294

编辑本页
下一页 【译】程序猿升级攻略

0 评论