在你崩溃之前，这8种做法会让React应用程序先崩溃

React库的优势非常明显：创建复杂的交互用户界面非常简单。最大的特点是可以在不破坏其他组件的情况下，将组件直接组合在一起。即使是Facebook、Instagram、Pinterest这样的社交媒体巨头也大量使用React，同时通过谷歌Maps这样的大型API创造无缝的用户体验。

如果你正在用React构建一个应用程序，或是考虑将其用于即将开展的项目，那么本教程就是为你准备的。希望通过公开一些需要再三考虑的代码执行，来帮助你构建出色的React应用程序。

下面是React里会使应用程序崩溃的八种做法：

1. 在null上设置默认参数

这是一个令人毛骨悚然的陷阱，可以让开发人员全线崩溃。毕竟，应用程序崩溃不是小事——任何类型的崩溃如果处理不当，随时都可能导致资金损失。

比如：

在应用程序组件中，如果日期最终是falsey，它将初始化为null。直觉告诉我们，在默认情况下，当项是一个falsey值时，应该将其初始化为空数组。但是当日期为falsey时，应用程序会崩溃，因为条目为空。

如果没有传递值或者未定义的值，那么默认函数参数允许使用默认值初始化已命名参数!

因此，下次将默认值设置为null时，一定要三思而后行。当空数组是值的预期类型时，可以将值初始化为空数组。

2. 用方括号抓取属性

有时抓取属性的方式可能会影响到应用程序的行为。也就是说会造成应用程序崩溃。下面是一个用方括号执行对象查找的例子：

这些实际上都是100%有效的用例，除了比对象键查找慢之外，实际上没有任何问题。无论如何，随着查找的深入，应用程序里也会出现问题：

如果你对此代码段实施某些增强并犯了一个小错误(例如将j中的J大写)，结果将立即返回undefined，并且会发生崩溃：

令人毛骨悚然的部分是，应用程序会直到一部分代码尝试使用未定义值进行属性查找时才会崩溃。

所以在同一时间，joesProfile(经过伪装的未定义)将在应用程序运行，没有人会知道这个未定义值正在蔓延，直到一段代码执行属性查找，如joesProfile.age，因为joesProfile未定义!

为避免崩溃，一些开发人员会在查找不成功时初始化一些默认有效返回值：

至少现在，应用程序没有崩溃。这说明，当你使用方括号表示法应用查找时，往往是无效的。

然而，如果没有实际的例子，很难解释这种做法的严重性。所以，接下来我们举一个真实的例子。以将要展示的这个代码示例为例，它可以追溯到8个月前的存储库。为了保护这个代码来源的一些隐私，我们重名了几乎所有的变量，但是代码设计、语法和架构完全一样：

fixVideoTypeNaming是一个函数，它将根据作为参数传入的值提取视频类型。如果参数是一个视频对象，它将从.videoType属性中提取视频类型。如果是字符串，则调用者传入videoType，这样就可以跳过第一步。有人发现视频类型.mp4property在应用程序的几块地方都被拼错了。用fixVideoTypeNaming来快速修补这个错误。

现在，这个应用程序是用Redux构建的——因此语法。

要使用这些选择器，你可以导入到connect高阶组件中，以附加一个组件来侦听状态的那部分。

UI组件

该组件接收HOC传递给它的所有属性，并显示适应属性里的数据的信息。理想状态下可行，现实中只是暂时可行。 如果回到容器中，看看选择器是怎么选择它们的值的，其实可能已经埋下了一个定时炸弹，正在等着爆炸：

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!