mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Updated docs for next
This commit is contained in:
Website Deployment Script
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Introducing Hot Reloading – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Introducing Hot Reloading – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="active">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-section"><h3>Recent Posts</h3><ul><li><a class="" href="/react-native/blog/2016/07/06/toward-better-documentation.html">Toward Better Documentation</a></li><li><a class="active" href="/react-native/blog/2016/03/24/introducing-hot-reloading.html">Introducing Hot Reloading</a></li></ul></div></div><div class="inner-content"><div><h1>Introducing Hot Reloading</h1><p class="meta">March 24, 2016 by <a target="_blank">Martín Bigio</a></p><hr><div><p>React Native's goal is to give you the best possible developer experience. A big part of it is the time it takes between you save a file and be able to see the changes. Our goal is to get this feedback loop to be under 1 second, even as your app grows.</p><p>We got close to this ideal via three main features:</p><ul><li>Use JavaScript as the language doesn't have a long compilation cycle time.</li><li>Implement a tool called Packager that transforms es6/flow/jsx files into normal JavaScript that the VM can understand. It was designed as a server that keeps intermediate state in memory to enable fast incremental changes and uses multiple cores.</li><li>Build a feature called Live Reload that reloads the app on save.</li></ul><p>At this point, the bottleneck for developers is no longer the time it takes to reload the app but losing the state of your app. A common scenario is to work on a feature that is multiple screens away from the launch screen. Every time you reload, you've got to click on the same path again and again to get back to your feature, making the cycle multiple-seconds long.</p><h2><a class="anchor" name="hot-reloading"></a>Hot Reloading <a class="hash-link" href="#hot-reloading">#</a></h2><p>The idea behind hot reloading is to keep the app running and to inject new versions of the files that you edited at runtime. This way, you don't lose any of your state which is especially useful if you are tweaking the UI.</p><p>A video is worth a thousand words. Check out the difference between Live Reload (current) and Hot Reload (new).</p><span><iframe width="100%" height="315" src="https://www.youtube.com/embed/2uQzVi-KFuc" frameborder="0" allowfullscreen></iframe>
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Introducing Hot Reloading – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Introducing Hot Reloading – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="active">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-section"><h3>Recent Posts</h3><ul><li><a class="" href="/react-native/blog/2016/07/06/toward-better-documentation.html">Toward Better Documentation</a></li><li><a class="active" href="/react-native/blog/2016/03/24/introducing-hot-reloading.html">Introducing Hot Reloading</a></li></ul></div></div><div class="inner-content"><div><h1>Introducing Hot Reloading</h1><p class="meta">March 24, 2016 by <a href="https://twitter.com/martinbigio" target="_blank">Martín Bigio</a></p><hr><div><p>React Native's goal is to give you the best possible developer experience. A big part of it is the time it takes between you save a file and be able to see the changes. Our goal is to get this feedback loop to be under 1 second, even as your app grows.</p><p>We got close to this ideal via three main features:</p><ul><li>Use JavaScript as the language doesn't have a long compilation cycle time.</li><li>Implement a tool called Packager that transforms es6/flow/jsx files into normal JavaScript that the VM can understand. It was designed as a server that keeps intermediate state in memory to enable fast incremental changes and uses multiple cores.</li><li>Build a feature called Live Reload that reloads the app on save.</li></ul><p>At this point, the bottleneck for developers is no longer the time it takes to reload the app but losing the state of your app. A common scenario is to work on a feature that is multiple screens away from the launch screen. Every time you reload, you've got to click on the same path again and again to get back to your feature, making the cycle multiple-seconds long.</p><h2><a class="anchor" name="hot-reloading"></a>Hot Reloading <a class="hash-link" href="#hot-reloading">#</a></h2><p>The idea behind hot reloading is to keep the app running and to inject new versions of the files that you edited at runtime. This way, you don't lose any of your state which is especially useful if you are tweaking the UI.</p><p>A video is worth a thousand words. Check out the difference between Live Reload (current) and Hot Reload (new).</p><span><iframe width="100%" height="315" src="https://www.youtube.com/embed/2uQzVi-KFuc" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
</span><p>If you look closely, you can notice that it is possible to recover from a red box and you can also start importing modules that were not previously there without having to do a full reload.</p><p><strong>Word of warning:</strong> because JavaScript is a very stateful language, hot reloading cannot be perfectly implemented. In practice, we found out that the current setup is working well for a large amount of usual use cases and a full reload is always available in case something gets messed up.</p><p>Hot reloading is available as of 0.22, you can enable it:</p><ul><li>Open the developer menu</li><li>Tap on "Enable Hot Reloading"</li></ul><h2><a class="anchor" name="implementation-in-a-nutshell"></a>Implementation in a nutshell <a class="hash-link" href="#implementation-in-a-nutshell">#</a></h2><p>Now that we've seen why we want it and how to use it, the fun part begins: how it actually works.</p><p>Hot Reloading is built on top of a feature <a href="https://webpack.github.io/docs/hot-module-replacement-with-webpack.html" target="_blank">Hot Module Replacement</a>, or HMR. It was first introduced by Webpack and we implemented it inside of React Native Packager. HMR makes the Packager watch for file changes and send HMR updates to a thin HMR runtime included on the app.</p><p>In a nutshell, the HMR update contains the new code of the JS modules that changed. When the runtime receives them, it replaces the old modules' code with the new one:</p><p><img src="/react-native/blog/img/hmr-architecture.png" alt=""></p><p>The HMR update contains a bit more than just the module's code we want to change because replacing it, it's not enough for the runtime to pick up the changes. The problem is that the module system may have already cached the <em>exports</em> of the module we want to update. For instance, say you have an app composed of these two modules:</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// log.js
|
||||
</span><span class="token keyword">function</span> <span class="token function">log<span class="token punctuation">(</span></span>message<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
|
||||
File diff suppressed because one or more lines are too long
+2
-2
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user