深圳幻海软件技术有限公司 欢迎您!

7大技巧!用React Native实现编程效率最大化

2023-02-27

ReactNative是一款很强大的技术工具,用它能开发出有美感、原生态的跨平台应用程序。当下,ReactNative的应用率持续上升,尤其受入门级用户的青睐。当今针对ReactResearch的研究和文章,多围绕性能、扩充性以及与同类软件的对比情况展开论述。本文将介绍7个能将ReactNative

React Native是一款很强大的技术工具,用它能开发出有美感、原生态的跨平台应用程序。当下,React Native的应用率持续上升,尤其受入门级用户的青睐。

当今针对ReactResearch的研究和文章,多围绕性能、扩充性以及与同类软件的对比情况展开论述。本文将介绍7个能将React Native编程效率最大化的窍门:

 

入手一台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。

让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() => {} 
  • 1.

更改为

async componentDidMount() {} 
  • 1.

能让热加载重新运转起来。

当然,热加载不运行不一定是箭头函数的问题;不同的编码基数存在不同的问题。但让热加载持续运行的技巧在于,密切关注是哪一类代码导致它出现故障,并重构错误代码。最常用的重构方法就是简化代码形式。

用户需要耗费必要的时间让热加载重新运转。热加载能帮助用户更快地构建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 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

在截屏中,数据栏的数值总是“-”。这意味着stat变量的结构不太对,需要检查。

在React Native里,一种故障检测的方法是启动远程故障排查功能,去掉Chrome界面的标签页(否则RN就会影响那些后台标签页),打开dev工具,打开当前文件夹,在render功能前的return那里设置一个断点,重新加载应用,把应用导航至前面的断点界面,祈祷不要有源映射错误,然后再检查接收数据。

如果先载入stats变量,进行屏幕导航,再检查载入数据会更简便一些。

热加载技术可以将故障排除推进一步:

<View> 
 {stats.map(stat => 
 <Stat 
dog={console.log(stat)} {...stat} /> 
 )} 
</View> 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

基于render方程的本质,每次调用它时,每一个要素属性都会被评估,并以组件的形式返回。

然而,在本文的讨论的中,“以评估组件的形式返回”这一部分不是很重要,只需要关注“被评估”这一部分。

对纯随机、非显性的属性调用console.log(stat)命令(这里具体指代“dog”——我觉得有用的热点序列),然后保存以启动热加载,它就会评估整个render方程,其中包括dog属性。

最后得出如上数据,无需重启,无需检测程序,更不需要连接远程故障排查;这种方法就能立即反馈需求数据。

当然,也不难发现,其实需要展开的是stat.content而不是stat,因为数据嵌套在content之下。

在任何时候,使用热加载都能帮助用户极速解决编程故障!