ReactNative是一个非常强大的技术工具，可以用来开发美观、原生态的跨平台应用。目前ReactNative的应用率持续上升，尤其受到入门用户的青睐。今天ReactResearch上的研究和文章大多集中在性能、可扩展性和与同类软件的比较上。本文将介绍7个技巧，最大限度地提高ReactNative编程的效率：获得一台Mac如果你真的用惯了微软系统，并认为使用熟练的操作系统会更好（我一开始也是这么想的），但是个人经验表明，有一个规则是程序员不得不相信的——那就是MacOS（AppleComputerOperatingSystem）无疑是ReactNative开发领域最适合的系统配置。主要有两个原因：1.显然，MacOS可以为用户构建iOS客户端应用程序提供便利。所有ReactNative教程都假定用户拥有Mac并非巧合。所以如果你想做跨平台开发，你迟早会需要一台Mac。2、ReactNative在iOS系统上性能更好，运行更稳定。ReactNative最初是从iOS软件“发家致富”的。无论是模拟器、构建过程、实时/热重载功能，还是远程JS故障排除功能，都可以在MacOS上完美运行。在微软系统上，npm、ReactNative本身，甚至微软的命令行都充满了bug。在Mac上开发ReactNative的速度至少是在其他系统上的两倍。因此，要想赢在起跑线上，就必须确保自己是（或将成为）macOS用户。更高配置的MacReactNative是一种可以充分利用资源并从中受益的技术软件。它的工作流程最多允许同时运行三到四个不同的iOS/Android模拟器。配置越高，性能越好——能够实时观察用户的应用是否在所有目标平台上正常运行，不仅贴心，也为开发者节省了大量的时间。不用担心“在一个平台上解决了一个问题，却给其他平台引入了新的漏洞”的意外。此外，在IDE中每一次CTRL+S保存操作都会重新构建系统，将构建应用到编码验收的等待时间降到最低，大大减少一天重复数百次的耗时过程。得到有效利用。此外，没有什么比立即看到一个正在运行的程序更令人满意的了。从旧款Macmini到新款2018款MacBook，生产力提高了约50%。因此，尽量购买最高配置的Mac。让IDE成为帮手每个IDE都带有某种格式化功能，有些人可能认为这就足够了。但是今天的IDE变得更加智能，格式功能只是冰山一角。缩进代码、清除变量、整理输入、翻译引用以及其他使程序整洁的事情——所有这些事情都可以用IDE完成，也应该用IDE完成！直到我不记得上次按tab键是什么时候了。Echobind网站上有一篇关于“HowtomergePrettier+Eslint+airbnbrulesintoVScode”的优秀文章。传送门：https://blog.echobind.com/integrating-prettier-eslint-airbnb-style-guide-in-vscode-47f07b5d7d6a本文中的建议将缩短用户开发的时间，提高结果的满意度。将所有程序编译成代码段，尽量遵循DRY原则。编程时，你是否总是手动输入或？将它们变成代码片段怎么样！不要止步于此——也许您想应用您刚刚设计的新视图样式，为什么不试一试呢？上述步骤可以认为是对编写的代码“应用压缩算法”。重复的操作被识别并替换为“标识符”（代码片段）。总结用户的编程习惯，根据个人习惯生成用户自己的项目索引。不要让IDE妨碍编程。了解如何轻松高效地使用IDE，而不会浪费通过上述步骤节省的时间。此外，编写三字节程序和列表生成是成为编程高手的必备技能。双倍的窗口，双倍的速度？不一定......但是启用双窗口有点帮助。总是在两个文件之间来回操作的用户一定养成了分窗的习惯。或许两个窗口一开始看起来有点力不从心，但是拆分窗口，尤其是在重要的编程环节，才是提高编程效率的基础和核心。要熟悉快捷键并习惯使用快捷键，还有很长的路要走。因此，您需要找到并组合适合您的IDE命令。对于本文作者来说，刚好满足个人需求（VS代码编写）的命令是：workbench.action.focusSecondEditorGroup，解决了打开新标签页的麻烦，使用单键组合（CTRL+2)移动文件文件夹也使选项卡更加集中。例如，在屏幕上显示标记和样式的同时创建UI（用户界面）可以节省时间和精力。合理使用热加载说到代码变更预览，ReactNative的热加载技术是最“顶级”的运行内容之一。但上述说法的前提是用户会使用hotreload功能。目前，关于热重载问题的ReactNative反馈条目中的热门评论超过130条，有充分的证据表明热重载非常脆弱。热重载崩溃的原因往往难以检测，但我注意到，大多数时候热重载崩溃的根本原因不是代码本身的“错误”，而是代码与热重载的不兼容。例如，经过数小时的故障排除后，将以下代码格式：componentDidMount=async()=>{}更改为asynccomponentDidMount(){}使热重新加载再次起作用。当然，热重载不起作用不一定是箭头函数的问题；不同的编码基础有不同的问题。但保持热重载运行的诀窍是密切关注导致它失败的代码类型，并重构有问题的代码。最常见的重构方法是简化代码形式。用户需要花费必要的时间才能使热重载再次工作。热加载可以帮助用户更快地构建UI，下面我会详细解释，热加载也是排查UI和业务逻辑故障的重要工具。当巧妙地使用热加载从Web过渡到ReactNative时，系统布局是用户批评的主要问题——原因是ReactNative的界面缺乏合理（或有用）的“检查”UI，无法让用户改变从视觉上检查特征的大小、形状和边界。除了提供更快、更高效的开发过程之外，热重载也是一个有用的因素检查工具。其测试效果如下。结合热加载和快捷代码片段，无需重新构建IDE，一秒内满足所有用户需求。制作一个生成红色边框的bred片段并将其应用于任何元素。按CMD+S查看屏幕上的弹出元素。用户还可以根据个人喜好调整或增强元素样式。这个看似简单的有限操作，其实可以节省10%的操作时间。使用此方法后，您不再需要打开检测弹窗和菜单，也不用担心它们打断您的工作流程。从此，您可以随时随地清除故障。使用热重载的另一个实用技巧是用户可以在现有的开发框架上检查所有变量值。比如这个例子：前几周，这篇文章的作者做了这个“玩家数据”的界面，应该是显示玩家数据的，但是由于从上周开始某段代码被破解了，所以有必要找找看哪里问题是。代码如下：{stats.map(stat=>)}...exportconstStat=({value='-',name})=>...importseabornassb截图中，数据栏的值一直是“-”。这意味着stat变量的结构不正确，需要检查。在ReactNative中，一种故障检测方法是开启远程排查功能，去掉Chrome界面的标签（否则RN会影响那些后台标签），打开devtool，打开当前文件夹，在render函数前返回在那里设置断点，重新加载应用程序，将应用程序导航到之前的断点界面，祈祷不会有源映射错误，然后检查接收到的数据。首先加载统计变量，导航屏幕，然后检查加载的数据会更容易。热重载技术可以进一步推动故障排除：{stats.map(stat=>)}基于渲染方程，每个特征属性在每次被调用并作为组件返回时都会被评估。不过在本文的讨论中，“以评估组件的形式返回”这部分并不是很重要，只有“被评估”这部分。对一个纯随机的非显性属性调用console.log(stat)命令（这里特指“dog”——我觉得有用的热点序列），然后保存以开始热重载，它将评估整个渲染方程，其中就有狗的属性。最后，在不重启、不测试程序、不连接远程排错的情况下得到以上数据；这种方法可以立即反馈需求数据。当然不难发现，需要展开的是stat.content，而不是stat，因为content下嵌套了数据。在任何时候，使用热加载都可以极速帮助用户解决编程故障！
