内容简介：译者注:译者并不精通英语, 但是深知英语对于程序员的重要性, 所以译者在翻译的时候保留了英语原文, 希望给你一个原滋原味的阅读体验并且能熟悉一些常见的英文.希望有读者可以指出我的翻译错误, 感激不尽.
- 本文来源: reactjs.org/blog/2018/1…
- LISENCE: Creative Commons Attribution 4.0 International
- 本文采用 中文/英文 对译(不支持 IE/Edge 浏览器), 点击中文即显示英文原文, 希望能对你的英语有所帮助. 如有错误, 欢迎读者指正
- 译者: 蒋璇 , 就职于丁香园, 任职Insight 医药数据库 前端开发. 开源社区热爱者
React 16.x Roadmap November 27, 2018 by Dan Abramov
You might have heard about features like "Hooks", "Suspense", and "Concurrent Rendering" in the previous blog posts and talks. In this post, we’ll look at how they fit together and the expected timeline for their availability in a stable release of React.
tl;dr
- React 16.6:为了代码分割的 Suspense( 已经发布 )
- React 16.9:为了数据获取的 Suspense(~mid 2019)
- React 16.6: Suspense for Code Splitting (already shipped)
- React 16.7: React Hooks (~Q1 2019)
- React 16.8: Concurrent Mode (~Q2 2019)
- React 16.9: Suspense for Data Fetching (~Q3 2019)
- 为了服务端渲染的 Suspense
- Modernizing React DOM
- Suspense for Server Rendering
We expect to get more clarity on their timeline in the coming months.
该文章只是一个蓝图 — 其中没有任何内容需要您立即关注. 当发布每一个功能时, 我们会发布一篇完整的文章宣布它们.
This post is just a roadmap — there is nothing in it that requires your immediate attention. When each of these features are released, we’ll publish a full blog post announcing them.
Release Timeline
We have a single vision for how all of these features fit together, but we’re releasing each part as soon as it is ready so that you can test and start using them sooner. The API design doesn’t always make sense when looking at one piece in isolation; this post lays out the major parts of our plan to help you see the whole picture. (See our versioning policy to learn more about our commitment to stability.)
The gradual release strategy helps us refine the APIs, but the transitional period when some things aren’t ready can be confusing. Let’s look at what these different features mean for your app, how they relate to each other, and when you can expect to start learning and using them.
React 16.6: Suspense for Code Splitting (shipped)
React.lazy()
and <React.Suspense>
. React.lazy()
and <React.Suspense>
. const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<React.Suspense fallback={<Spinner />}>
<div>
<OtherComponent />
</div>
</React.Suspense>
);
}
复制代码
React.lazy()
和 <React.Suspense>
来实现代码分割. 你可以在本文中找到另一个实用的解释 React.lazy()
with <React.Suspense>
is documented in the Code Splitting guide. You can find another practical explanation in this article. We have been using Suspense for code splitting at Facebook since July, and expect it to be stable. There’s been a few regressions in the initial public release in 16.6.0, but they were fixed in 16.6.3.
Code splitting is just the first step for Suspense. 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. You’ll find information about these topics further below.
Status in React DOM: Available since React 16.6.0.
Status in React DOM Server: Suspense is not available in the server renderer yet. This isn’t for the lack of attention. We’ve started work on a new asynchronous server renderer that will support Suspense, but it’s a large project and will take a good chunk of 2019 to complete.
React.lazy()
和 <Suspense>
工作. Status in React Native: Bundle splitting isn’t very useful in React Native, but there’s nothing technically preventing React.lazy() and <Suspense> from working when given a Promise to a module.
React.lazy()
和 <React.Suspense>
进行代码拆分 React 组件. 如果你进行服务端渲染, 你则必须接受等待, 直到新的服务端渲染器准备就绪. Recommendation: If you only do client rendering, we recommend widely adopting React.lazy() and for code splitting React components. If you do server rendering, you’ll have to wait with adoption until the new server renderer is ready.
React 16.7: Hooks (~Q1 2019)
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>
);
}
复制代码
Hooks introduction and overview are good places to start. Watch these talks for a video introduction and a deep dive. The FAQ should answer most of your further questions. To learn more about the motivation behind Hooks, you can read this article. Some of the rationale for the API design of Hooks is explained in this RFC thread reply.
We have been dogfooding Hooks at Facebook since September. We don’t expect major bugs in the implementation. Hooks are only available in the 16.7 alpha versions of React. Some of their API is expected to change in the final 16.7 version (see the end of this comment for details).
Hooks represent our vision for the future of React. They solve both problems that React users experience directly (“wrapper hell” of render props and higher-order components, duplication of logic in lifecycle methods), and the issues we’ve encountered optimizing React at scale (such as difficulties in inlining components with a compiler). Hooks don’t 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.
react
和 react-dom
的第一个版本是 16.7.0-alpha.0
. 我们预计在接下来的几个月发布更多的 alphas 版本(在本文书写时, 最新的版本为 16.7.0-alpha.2
). 你可以通过安装 react@next
和 react-dom@next
来尝试它们. 不要忘记更新 react-dom
— 否则 Hooks 不会工作. Status in React DOM:The first version of react and react-dom supporting Hooks is 16.7.0-alpha.0. We expect to publish more alphas over the next months (at the time of writing, the latest one is 16.7.0-alpha.2). You can try them by installing react@next with react-dom@next. Don’t forget to update react-dom — otherwise Hooks won’t work.
react-dom
的 16.7 alpha 版本用 react-dom/server
来完全支持 Hooks. Status in React DOM Server: The same 16.7 alpha versions of react-dom fully support Hooks with react-dom/server.
useEffect
被触发的太晚, 仍然需要解决. Status in React Native: There is no officially supported way to try Hooks in React Native yet. If you’re feeling adventurous, check out this thread for unofficial instructions. There is a known issue with useEffect firing too late which still needs to be solved.
Recommendation: When you’re ready, we encourage you to start trying Hooks in new components you write. Make sure everyone on your team is on board with using them and familiar with this documentation. We don’t recommend rewriting your existing classes to Hooks unless you planned to rewrite them anyway (e.g. to fix bugs). Read more about the adoption strategy here.
React 16.8: Concurrent Mode (~Q2 2019)
Concurrent Mode lets React apps be more responsive by rendering component trees without blocking the main thread. 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). Concurrent Mode also improves the user experience of Suspense by skipping unnecessary loading states on fast connections.
你之前可能已经听说过 Concurrent Mode 被称为 "async mode". 我们已经将其名字改为 Concurrent Mode, 以突出显示 React 在不同优先级上执行工作的能力. 这使得它与其他异步渲染的方法区别出来.
You might have previously heard Concurrent Mode being referred to as “async mode”. We’ve changed the name to Concurrent Mode to highlight React’s ability to perform work on different priority levels. This sets it apart from other approaches to async rendering.
// Two ways to opt in: // 1. Part of an app (not final API) <React.unstable_ConcurrentMode> <Something /> </React.unstable_ConcurrentMode> // 2. Whole app (not final API) ReactDOM.unstable_createRoot(domNode).render(<App />); 复制代码
There is no documentation written for the Concurrent Mode yet. It is important to highlight that the conceptual model will likely be unfamiliar at first. Documenting its benefits, how to use it efficiently, and its pitfalls is a high priority for us, and will be a prerequisite for calling it stable. Until then, Andrew’s talk is the best introduction available.
<React.StrictMode>
中产生警告的组件可能无法正常工作. 另外, 我们已经看到 Concurrent Mode 在其他代码中面临性能问题, 这些问题有时被误认为是 Concurrent Mode 自身的性能问题. 例如, 一个运行在每毫秒的无主的 setInterval(fn, 1)
调用在 Concurrent Mode 下将会有更差的影响. 我们计划发布更多关于诊断和解决此类问题的向导, 作为 16.8 发布文档的一部分. Concurrent Mode is much less polished than Hooks. Some APIs aren’t properly "wired up" yet and don’t do what they’re expected to. At the time of writing this post, we don’t recommend using it for anything except very early experimentation. We don’t expect many bugs in Concurrent Mode itself, but note that components that produce warnings in may not work correctly. On a separate note, we’ve seen that Concurrent Mode surfaces performance problems in other code which can sometimes be mistaken for performance issues in Concurrent Mode itself. For example, a stray setInterval(fn, 1) call that runs every millisecond would have a worse effect in Concurrent Mode. We plan to publish more guidance about diagnosing and fixing issues like this as part of the 16.8 release documentation.
Concurrent Mode is a big part of our vision for React. For CPU-bound work, it allows non-blocking rendering and keeps your app responsive while rendering complex component trees. That’s demoed in the first part of our JSConf Iceland talk. Concurrent Mode also makes Suspense better. It lets you avoid flickering a loading indicator if the network is fast enough. It’s hard to explain without seeing so Andrew’s talk is the best resource available today. Concurrent Mode relies on a cooperative main thread scheduler, and we are collaborating with the Chrome team to eventually move this functionality into the browser itself.
unstable_
前缀存在, 但是我们不推荐尝试它, 除非你愿意经常遇到障碍或者缺少功能. 16.7 alpha 版本包括没有 unstable__
前缀的 React.ConcurrentMode
和 ReactDOM.createRoot
, 但是我们可能在 16.7 中保持前缀, 并且只在 React 16.8 中记录和标记 Concurrent Mode 为稳定. Status in React DOM: A very unstable version of Concurrent Mode is available behind an unstable_ prefix in React 16.6 but we don’t recommend trying it unless you’re willing to often run into walls or missing features. The 16.7 alphas include React.ConcurrentMode and ReactDOM.createRoot without an unstable_ prefix, but we’ll likely keep the prefix in 16.7, and only document and mark Concurrent Mode as stable in React 16.8.
Status in React DOM Server: Concurrent Mode doesn’t directly affect server rendering. It will work with the existing server renderer.
Status in React Native: The current plan is to delay enabling Concurrent Mode in React Native until React Fabric project is near completion.
<React.StrictMode>
中包装一些组件子树并修复生成的警告是很好的第一步. 通常, 旧代码预计不会立即兼容. 例如, 在 Facebook, 我们主要打算在最近开发的代码库中使用 Concurrent Mode, 并在不久的将来保持旧代码运行在同步模式下. Recommendation: If you wish to adopt Concurrent Mode in the future, wrapping some component subtrees in and fixing the resulting warnings is a good first step. In general it’s not expected that legacy code would immediately be compatible. For example, at Facebook we mostly intend to use the Concurrent Mode in the more recently developed codebases, and keep the legacy ones running in the synchronous mode for the near future.
React 16.8: Concurrent Mode (~Q2 2019)
As mentioned earlier, Suspense refers to React’s ability to “suspend” rendering while components are waiting for something, and display a loading indicator. In the already shipped React 16.6, the only supported use case for Suspense is code splitting. In the future 16.9 release, we’d like to provide officially supported ways to use it for data fetching too. We’ll provide a reference implementation of a basic "React Cache" that’s 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 we’ll document.
// 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>
);
}
// Other libraries like Apollo and Relay can also
// provide Suspense integrations with similar APIs.
复制代码
There is no official documentation for how to fetch data with Suspense yet, but you can find some early information in this talk and this small demo. We’ll write documentation for React Cache (and how to write your own Suspense-compatible library) closer to the React 16.9 release, but if you’re curious, you can find its very early source code here.
The low-level Suspense mechanism (suspending rendering and showing a fallback) is expected to be stable even in React 16.6. We’ve used it for code splitting in production for months. However, the higher-level APIs for data fetching are very unstable. React Cache is rapidly changing, and will change at least a few more times. There are some low-level APIs that are missing for a good higher-level API to be possible. We don’t recommend using React Cache anywhere except very early experiments. Note that React Cache itself isn’t strictly tied to React releases, but the current alphas lack basic features as cache invalidation, and you’ll run into a wall very soon. We expect to have something usable with the React 16.9 release.
Eventually we’d like most data fetching to happen through Suspense but it will take a long time until all integrations are ready. In practice we expect it to be adopted very incrementally, and often through layers like Apollo or Relay rather than directly. Missing higher level APIs aren’t the only obstacle — there are also some important UI patterns we don’t support yet such as showing progress indicator outside of the loading view hierarchy. As always, we will communicate our progress in the release notes on this blog.
<React.Suspense>
工作了. 但是, 在 React 次级版本发布之前我们还没有拥有一个好的 cache 实现. 如果你是敢于冒险的, 你可以通过查看 React Cache alphas 来尝试写一个你自己的 cache. 但是, 请注意, 心智模型(译者注: 关于心智模型见here)是完全不同的, 在文档准备好之前误解的可能性非常高. <React.Suspense>
in React 16.6. However, we don’t expect to have a good cache implementation until this React minor release. If you’re feeling adventurous, you can try to write your own cache by looking at the React Cache alphas. However, note that the mental model is sufficiently different that there’s a high risk of misunderstanding it until the docs are ready. Status in React DOM Server: Suspense is not available in the server renderer yet. As we mentioned earlier, we’ve started work on a new asynchronous server renderer that will support Suspense, but it’s a large project and will take a good chunk of 2019 to complete.
Recommendation: Wait for this minor React release in order to use Suspense for data fetching. Don’t try to use Suspense features in 16.6 for it; it’s not supported. However, your existing components for code splitting will be able to show loading states for data too when Suspense for Data Fetching becomes officially supported.
Other Projects
Modernizing React DOM
We started an investigation into simplifying and modernizing ReactDOM, with a goal of reduced bundle size and aligning closer with the browser behavior. It is still early to say which specific bullet points will “make it” because the project is in an exploratory phase. We will communicate our progress on that issue.
Suspense for Server Rendering
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. You can watch an overview of its early prototype in this talk. The new server renderer is going to be our major focus in 2019, but it’s too early to say anything about its release schedule. Its development, as always, will happen on GitHub.
And that’s about it! As you can see, there’s a lot here to keep us busy but we expect much progress in the coming months.
We hope this post gives you an idea of what we’re working on, what you can use today, and what you can expect to use in the future. While there’s a lot of discussion about new features on social media platforms, you won’t miss anything important if you read this blog.
We’re always open to feedback, and love to hear from you in the RFC repository, the issue tracker, and on Twitter.
译者注:
译者并不精通英语, 但是深知英语对于 程序员 的重要性, 所以译者在翻译的时候保留了英语原文, 希望给你一个原滋原味的阅读体验并且能熟悉一些常见的英文.
希望有读者可以指出我的翻译错误, 感激不尽.
译文转载请注明出处
以上所述就是小编给大家介绍的《React 16.x 蓝图[双语版]》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- public 和私有类字段[双语]
- 重磅 | CS 294 2018 今日开课！双语字幕独家上线！
- 「Flask笔记」 蓝图
- flask蓝图构建小项目
- 5. 使用Flask蓝图(blueprint)
- flask使用蓝图规划大型项目
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
