React 16 Roadmap

栏目: IOS · Android · 发布时间: 5年前

内容简介:从功能上看,React 16 规划中有 4 个关键特性:其中,Concurrent Mode(之前叫Async Rendering)无疑是单从形式上看,Hooks 是对函数式组件的增强,使之能与类组件平起平坐,甚至(期望)取而代之。

一.概览

从功能上看,React 16 规划中有 4 个关键特性:

  • Concurrent Mode

  • Hooks

  • Suspense

    • for Code Splitting

    • for Data Fetching

    • for SSR

  • Modernizing React DOM

其中,Concurrent Mode(之前叫Async Rendering)无疑是 最值得期待的东西,或将引领变革 (合作式调度机制可能泛化成为浏览器能力)

单从形式上看,Hooks 是对函数式组件的增强,使之能与类组件平起平坐,甚至(期望)取而代之。 实质意义在于进一步将更多的函数式思想引入到前端领域 ,比如 Effect、Monad 等。算是在提出v = f(d)的 UI 层函数式思路之后,在这条路上的进一步探索

Suspense 在Code Splitting场景已经露过面了,主要贡献在于 用户体验与开发体验 上。Data Fetching 的场景类似,在提升开发体验(统一数据请求及缓存方式)的同时,兼顾用户体验(显示 Loading)。而 SSR 场景下的 Suspense 能力则与前两种不同,考虑更多的是 页面加载性能与用户体验之间的平衡 ,期望通过服务端渲染与客户端渲染的配合(Hydration),让页面尽快达到真正可用的状态

Modernizing React DOM 则是一项针对 React DOM(6 年)历史遗留问题的重构计划,代号 React Fire,旨在简化实现并看齐现代浏览器 DOM 机制,比如去掉事件系统这层不必要的抽象,因为现代浏览器环境下不再需要这些 2013 年的 polyfill 了

二.Concurrent Mode

Concurrent Mode 意味着 非阻塞式渲染

Concurrent Mode lets React apps be more responsive by rendering component trees without blocking the main thread.

P.S.Concurrent Mode 之前叫做 async mode,改名是为了突出与其它异步渲染技术不同,有优先级调度的概念, 类似于分时操作系统并发执行多道程序的能力

对于计算密集(CPU-bound)型任务而言,Concurrent Mode 带来的非阻塞式渲染能力,能在渲染大组件树的同时,保证应用的交互响应能力(不至于卡死),是 React 愿景中很大的一块

具体的,Concurrent Mode 下允许中断耗时的渲染流程,让主线程有机会从中解放出来处理更高优的事情:

It is opt-in and allows React to interrupt a long-running render (for example, rendering a new feed story) to handle a high-priority event (for example, text input or hover).

还能配合 Suspense 跳过不必要的 Loading 状态(网络足够快的话,不用再闪个 Loading):

Concurrent Mode also improves the user experience of Suspense by skipping unnecessary loading states on fast connections.

并且,Concurrent Mode 特性所依赖的 合作式调度机制 ,将来可能会由浏览器提供原生实现(已经在 与 Chrome 团队合作 了)

P.S.关于调度器的更多信息,见 cooperative scheduling

Release 版本

React & React DOM 16.x(未发布)

官方资料

三.Hooks

Hooks 让函数式组件也能拥有状态、生命周期等 Class 组件特性(如 state, lifecycle, context, ref 等等):

Hooks let you use features like state and lifecycle from function components.

此外,还提供了一种跨组件复用状态逻辑的能力,不必再与组件树结构嵌套关系强耦合:

Hooks let you use features like state and lifecycle from function components. They also let you reuse stateful logic between components without introducing extra nesting in your tree.

例如:

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

这就是函数式组件的“状态”,context、ref、组件实例变量等都以类似的 Hook 方式提供了支持,因此 函数式组件拥有了与 Class 组件几乎相同的表达力

更进一步地,Hooks 被寄予厚望, 期望成为 React 组件的基本形式(作为 Class 组件的替代选项)

In the longer term, we expect Hooks to be the primary way people write React components. Our goal is for Hooks to cover all use cases for classes as soon as possible.

但是,大费周章地增强函数式组件不只是为了多一种选项,主要作用在于:

  • 减少组件树的嵌套层级

  • 复用生命周期逻辑(函数式组件 + Hooks 抽离 Class 组件在类(组件)实例级无法复用的部分)

收益体现在 2 方面:

  • 开发体验

    • 解决组件嵌套 wrapper hell 问题(“wrapper hell” of render props and higher-order components)

    • 复用生命周期中的重复逻辑

  • 基础建设

    • 解决大规模优化上的阻碍(比如内联组件的编译难题)

P.S.注意, 提出 Hooks 不是为了废弃掉 Class ,但在 Hooks 广泛应用之后,可能会把 Class 支持拆分到单独的 package 里,以减少 bundle 体积:

Hooks dont deprecate classes. However, if Hooks are successful, it is possible that in a future major release class support might move to a separate package, reducing the default bundle size of React.

Release 版本

React & React DOM v16.8.0

官方资料

四.Suspense

Suspense 就是 让 UI 挂起等待别的东西 ,基本机制是挂起渲染并显示个降级效果(suspending rendering and showing a fallback):

Suspense refers to Reacts new ability to suspend rendering while components are waiting for something, and display a loading indicator.

2 个目标:

  • 为 Code Splitting、Data Fetching 等场景提供一种方便的编程模型

  • 促进并发模式下的用户体验

Our longer term vision for Suspense involves letting it handle data fetching too (and integrate with libraries like Apollo). In addition to a convenient programming model, Suspense also provides better user experience in Concurrent Mode.

Suspense for Code Splitting

通过 React.lazy 懒加载组件,从而实现组件(树)粒度的代码拆分。例如:

// This component is loaded dynamically
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

P.S.关于 React 代码拆分的更多信息,见React Suspense

Release 版本

React & React DOM v16.6.0

官方资料

Suspense for Data Fetching

类似于 Code Splitting,也希望为数据请求的场景提供一种方便的通用方案:

Wed like to provide officially supported ways to use it for data fetching too.

例如让 UI 等待数据回来,在此期间通过 React.Suspense 显示 Loading:

// React Cache for simple data fetching (not final API)
import {unstable_createResource} from 'react-cache';

// Tell React Cache how to fetch your data
const TodoResource = unstable_createResource(fetchTodo);

function Todo(props) {
  // Suspends until the data is in the cache
  const todo = TodoResource.read(props.id);
  return <li>{todo.title}</li>;
}

function App() {
  return (
    // Same Suspense component you already use for code splitting
    // would be able to handle data fetching too.
    <React.Suspense fallback={<Spinner />}>
      <ul>
        {/* Siblings fetch in parallel */}
        <Todo id="1" />
        <Todo id="2" />
      </ul>
    </React.Suspense>
  );
}

最终愿景是由网络库来提供上层封装,让大多数数据请求都走 Suspense

react-cache

react-cache 对 Suspense for Data Fetching 设想提供了实验性的实现

目前尚处于非常不稳定的阶段(甚至缺少缓存过期之类的基础特性), 暂时不建议使用 。主要原因在于:

  • 依赖的一些底层 API 尚未 ready(见 Context.write ),导致 API 无法最终确定

  • 缺少一些 UI 模式支持(比如组件树层级无关的 Loading)

但最终会形成 一套规范 ,其它网络库(如 Apollo )遵守规范说明即可接入 Suspense 支持:

Well provide a reference implementation of a basic React Cache thats compatible with Suspense, but you can also write your own. Data fetching libraries like Apollo and Relay will be able to integrate with Suspense by following a simple specification that well document.

Release 版本

React & React DOM 16.x(未发布)

官方资料

Suspense for Server Rendering

Suspense 同样能够配合 SSR, 前后端合璧提升页面加载体验

具体的,渐进加载,并分块渲染页面内容,同时结合 Suspense 特性提升加载中的视觉体验:

We started designing a new server renderer that supports Suspense (including waiting for asynchronous data on the server without double rendering) and progressively loading and hydrating page content in chunks for best user experience.

P.S.其中 double rendering 是指前后端渲染结果不一致时(比如前端渲染依赖数据请求),为保证状态一致,需要丢弃后端渲染结果,前端再次渲染该组件,具体见[Hydration](https://reactjs.org/docs/react-dom.html#hydrate

目前相关消息很少,但确定 SSR 大幅重构是 2019 年的重点目标

The new server renderer is going to be our major focus in 2019, but its too early to say anything about its release schedule.

Release 版本

不确定

官方资料

五.Modernizing React DOM

名为 React Fire 的计划,想要简化实现(Simplifying)并与现代浏览器 DOM 看齐(Modernizing)

目前还在探索阶段,具体计划及进度见 React Fire: Modernizing React DOM

Release 版本

不确定

官方资料

参考资料


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

YC创业营: 硅谷顶级创业孵化器如何改变世界

YC创业营: 硅谷顶级创业孵化器如何改变世界

兰德尔·斯特罗斯 (Randall Stross) / 苏健 / 浙江人民出版社 / 2014-8-1 / CNY 52.90

在互联网创业成本日益降低、融资却越来越难的今天,硅谷的Y Combinator因何成为全世界创业者趋之若鹜的创业圣地?为什么25岁左右的青年最适合创业?创业者如何才能在遴选面试中脱颖而出?为什么YC特别看好那些主要由黑客组成的创业团队? YC真的歧视女性吗?如何想出能够赢得投资的新点子?创业者应该如何寻找联合创始人? 获准进入Y Combinator及其创业公司全程跟踪批量投资项目的第一人,......一起来看看 《YC创业营: 硅谷顶级创业孵化器如何改变世界》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具