React Native 0.61 Update brengt een belangrijke nieuwe functie die de ontwikkelervaring verbetert.
Kenmerken van React Native 0.61
In React Native 0.61 binden we de huidige hoogtepunten van “live herladen” (herladen bij opslaan) en “hot herladen” samen in één nieuwe functie genaamd “Fast Refresh”. Fast Refresh bestaat uit de volgende principes:
- Snel vernieuwen ondersteunt de huidige React volledig, inclusief functiecomponenten en Hooks.
- Fast Refresh herstelt na typefouten en verschillende misstappen en valt indien nodig terug tot volledig herladen.
- Fast Refresh voert geen invasieve codewijzigingen uit, dus het is betrouwbaar genoeg om standaard ingeschakeld te zijn.
Snel vernieuwen
React Native heeft al een tijdje live herladen en hot herladen. Bij live herladen wordt de hele applicatie opnieuw geladen wanneer er een codewijziging wordt gedetecteerd. Dit zou uw huidige positie binnen de applicatie verliezen, maar zou garanderen dat de code niet in een kapotte staat verkeerde. Bij heet herladen wordt geprobeerd de voortgang die u heeft gemaakt eenvoudigweg te ‘repareren’. Dit kan worden gedaan zonder de hele applicatie opnieuw te laden, waardoor u uw voortgang veel sneller kunt zien.
Heet herladen klonk geweldig, maar het bevatte nogal wat fouten en werkte niet met de huidige React-functies zoals functionele componenten met haken.
De React Native-groep heeft beide functies opnieuw gemaakt en gecombineerd in de nieuwe Fast Reload-functie. Het is standaard ingeschakeld en zal waar mogelijk doen wat kan worden vergeleken met een hot herladen, en terugvallen op een volledige herlaadbeurt als dit absoluut niet het geval is.
Upgraden naar React Native 0.61
Op dezelfde manier wordt bij alle React Native-upgrades voorgesteld dat u de verschillen voor de recent gemaakte projecten bekijkt en deze wijzigingen op uw eigen project toepast.
Werk de afhankelijkheidsversies bij
De eerste stap is het upgraden van de voorwaarden in uw package.json en deze introduceren. Houd er rekening mee dat elke React Native-versie is gekoppeld aan een bepaalde versie van React, dus zorg ervoor dat u die ook bijwerkt. Je moet er ook voor zorgen dat de react-test-renderer overeenkomt met de React-versie. Als je het gebruikt en dat upgrade de metro-react-native-babel-preset en Babel-versies.
Stroom-upgrade
In eerste instantie een simpele. De versie van Flow die React Native gebruikt is vernieuwd in 0.61. Dit houdt in dat u ervoor moet zorgen dat de afhankelijkheid van de stroomcontainer die u heeft, is ingesteld op ^0.105.0 en dat u een vergelijkbare waarde heeft in de [versie] van uw .flowconfig-bestand.
Als u Flow gebruikt voor typecontrole in uw project, kan dit tot extra fouten in uw eigen code leiden. De beste suggestie is dat u de changelog voor de versies in het bereik van 0.98 en 0.105 onderzoekt om te zien wat de oorzaak ervan kan zijn.
Als je Typescript gebruikt voor het controleren van het type van je code, kun je het .flowconfig-bestand en de flowbin-afhankelijkheid echt elimineren en dit stukje van de diff negeren.
Als u geen typecontrole gebruikt, wordt u aangeraden er een te gebruiken. Beide keuzes zullen werken, maar het wordt aanbevolen om Typescript te gebruiken.