全文共 3586字，預計學習時長 7分鐘
React Native是一款很強大的技術工具，用它能開發出有美感、原生态的跨平台應用程式。當下，React Native的應用率持續上升，尤其受入門級使用者的青睐。
當今針對ReactResearch的研究和文章，多圍繞性能、擴充性以及與同類軟體的對比情況展開論述。本文将介紹7個能将React Native程式設計效率最大化的竅門：
圖檔來源：pexels.com/@mockupeditor-com-56805
入手一台Mac
假如你真的習慣了微軟系統，又認為使用熟練使用的作業系統會更好（我起初也是這麼想的），但是個人經驗表明，有一條規則程式員不得不信——那就是，MacOS（蘋果電腦作業系統）無疑是React Native開發領域裡的最合适的系統配置。
主要原因有兩點：
1. 很明顯，MacOS能為使用者建構iOS用戶端應用提供便利。React Native的所有使用教程都預設使用者持有Mac絕非巧合。是以想做跨平台開發，早晚都需要一台Mac。
2. React Native在iOS系統上性能更優，運作更穩定。React Native本來就是從iOS軟體“發家”的。不論是模拟器、建構過程、實時加載/熱加載功能還是遠端JS故障排除功能，都能在MacOS上完美運作。在微軟系統上，npm和React Native本身，甚至是微軟的指令行都漏洞百出。
在Mac端開發React Native至少比在其他系統上的快兩倍。是以，想赢在起跑線上，就要確定是（或即将成為）macOS使用者。
入手更高配置的Mac
React Native是那種能夠充分利用資源，并從中獲益的技術軟體。它的工作流可以讓至多三四個不同的iOS/安卓仿真器同時運作。
配置越高，性能越好——能夠實時觀測使用者的應用程式是否在所有目标平台上正常運作，不僅貼心，還為開發者節省了大量時間。不用再擔心“解決一個平台上的問題，卻給其他平台引入新的漏洞”的意外發生。
另外，IDE上的每一次CTRL+ S 儲存操作都會重建體系，這将最小化建構應用和編碼驗收之間的等待的時間，讓一天之内重複成百上千次的工序耗時大大減少，時間是以得到有效利用。
還有，沒有比即刻看到程式的實施效果更令人滿意的事了。
從老版Mac mini到2018年新版MacBook，工作效率提高了約50%。是以，盡量購買最高配置的Mac.
圖檔來源：pexels.com/@lee-campbell-18167
讓IDE成為幫手
每一個IDE都自帶某種格式特征，或許有人會覺得這就足夠了。但當今的IDE已經變得更為智能，讓格式特征成為其冰山一角。
縮進代碼、清除變量、整理輸入、轉換引用等其他操作能使使用者的程式變得整齊劃一——這些操作都可以用IDE實作，且應該用IDE實作！直到記不起最近一次按下tab鍵是什麼時候。
Echobind網站上有一篇關于“如何把Prettier+Eslint+airbnb規則合并成VS代碼”的優質文章。
傳送門：https://blog.echobind.com/integrating-prettier-eslint-airbnb-style-guide-in-vscode-47f07b5d7d6a
這篇文章的建議會縮短使用者開發耗時，提高成果滿意度。
把所有程式都編成代碼段
盡量遵循DRY原則。程式設計的時候，你是否總是手動輸入<View></View>或者<Text></Text>？不如把它們轉化為代碼段！
不要就此止步——也許你還想應用剛設計出來的一種全新風格的視圖，為何不動手嘗試呢？
以上步驟可以看作對編寫的代碼“應用壓縮算法”。識别出重複的操作，并用“辨別符”（代碼段）代替。歸納使用者的程式設計習慣，根據個人習慣生成使用者自己的項目索引。
别讓IDE妨礙程式設計。學習如何簡便高效地使用IDE，就不會浪費以上步驟節省下來的時間。
另外，編寫三位元組程式和清單生成是成為程式設計大神的必備技能。
視窗加倍，速度加倍？
倒不一定……但開啟雙視窗多少有用。
總是在兩個檔案之間來回操作的使用者，一定要養成拆分視窗的習慣。
也許兩個視窗剛開始會顯得有些力不從心，但是，拆分視窗，特别是在重要程式設計環節中拆分視窗，是提高程式設計效率的基礎和核心。
熟悉快捷鍵和習慣使用快捷鍵還差很遠。是以，需要找到并組合适合自己的IDE指令。
對本文作者來說，恰好滿足了個人（VS碼編寫）需求的指令是：workbench.action.focusSecondEditorGroup
它解決了打開新标簽頁帶來的麻煩，用單個按鍵組合（CTRL+ 2），既移動了檔案夾，也讓标簽頁更集中。
比如說，建立UI（使用者界面）的同時在螢幕上顯示标記和樣式，既省時又省力。
合理使用熱加載
談到代碼更改預覽，React Native的熱加載技術就是最“尖端”的運作内容之一。
但以上論斷的前提是使用者會使用熱加載功能。目前，ReactNative回報條目中有超過130項熱門評價是關于熱加載問題的，充分證據表明，熱加載十分脆弱。
熱加載崩潰的原因常常難以偵測，但我注意到大多時候，熱加載崩潰的根源，不在代碼自身的“毛病”，而在于代碼不能和熱加載相容。
舉個例子，經過幾個小時的故障排除，将以下代碼格式：
componentDidMount = async() => {} 更改為
async componentDidMount() {} 能讓熱加載重新運轉起來。
當然，熱加載不運作不一定是箭頭函數的問題；不同的編碼基數存在不同的問題。但讓熱加載持續運作的技巧在于，密切關注是哪一類代碼導緻它出現故障，并重構錯誤代碼。最常用的重構方法就是簡化代碼形式。
使用者需要耗費必要的時間讓熱加載重新運轉。熱加載能幫助使用者更快地建構UI，并且，我将在下文具體說明，熱加載也是排除UI和商業邏輯故障的重要工具。
巧妙利用熱加載
從Web過渡到React Native時，系統布局是為使用者诟病的主要問題——其原因多在于，React Native的界面缺乏合理（或者是說有用）的“檢驗”UI，不能使使用者從視覺上檢驗各要素的尺寸、形态和邊界。
熱加載除了提供更快、更高效的開發流程之外，還是一種實用的要素檢驗工具。
它的檢驗效果如下。
将熱加載和快捷代碼段組合之後，能在一秒鐘内滿足使用者的所有需求，且不需重建IDE。
做一個可以生成紅色邊框的bred代碼段，就能夠将其運用于任何要素。按下CMD+ S就能通過螢幕看到彈出的要素。使用者還可以根據個人喜好，調整或增強要素風格。這看起來簡單又局限的操作，實際上能節省10%的操作時間。
使用這種方法之後，再也不需要打開檢測彈窗和菜單，不用擔心它們會打斷你的工作流，從此實作随時随地清除故障。
使用熱加載的又一實用竅門是，使用者能夠在現有的開發架構上檢測所有的變量數值。比如這個例子：
幾周前，本文作者做成了這個“玩家資料”界面，這裡本應顯示玩家的資料，但由于某一個代碼自上周起出了問題，于是需要找出問題在哪裡。
代碼如下：
<View>
{stats.map(stat =>
<Stat {...stat} />
)}
</View>
...
export const Stat= ({ value = '-', name }) => ...
import seaborn as sb 在截屏中，資料欄的數值總是“-”。這意味着stat變量的結構不太對，需要檢查。
在React Native裡，一種故障檢測的方法是啟動遠端故障排查功能，去掉Chrome界面的标簽頁（否則RN就會影響那些背景标簽頁），打開dev工具，打開目前檔案夾，在render功能前的return那裡設定一個斷點，重新加載應用，把應用導航至前面的斷點界面，祈禱不要有源映射錯誤，然後再檢查接收資料。
如果先載入stats變量，進行螢幕導航，再檢查載入資料會更簡便一些。
熱加載技術可以将故障排除推進一步：
<View>
{stats.map(stat =>
<Stat
dog={console.log(stat)} {...stat} />
)}
</View> 基于render方程的本質，每次調用它時，每一個要素屬性都會被評估，并以元件的形式傳回。
然而，在本文的讨論的中，“以評估元件的形式傳回”這一部分不是很重要，隻需要關注“被評估”這一部分。
對純随機、非顯性的屬性調用console.log(stat)指令（這裡具體指代“dog”——我覺得有用的熱點序列），然後儲存以啟動熱加載，它就會評估整個render方程，其中包括dog屬性。
最後得出如上資料，無需重新開機，無需檢測程式，更不需要連接配接遠端故障排查；這種方法就能立即回報需求資料。
當然，也不難發現，其實需要展開的是stat.content而不是stat，因為資料嵌套在content之下。
在任何時候，使用熱加載都能幫助使用者極速解決程式設計故障！
留言 點贊 關注
我們一起分享AI學習與發展的幹貨
歡迎關注全平台AI垂類自媒體 “讀芯術”