React库的优势很明显：创建复杂的交互式用户界面非常简单。最大的特点是组件可以直接组合，不会破坏其他组件。甚至像Facebook、Instagram、Pinterest这样的社交媒体巨头也在大量使用React，同时通过像谷歌地图这样的大型API创建无缝的用户体验。如果您正在使用React构建应用程序，或考虑将其用于即将进行的项目，那么本教程适合您。希望它会通过公开一些更发人深省的代码实现来帮助您构建出色的React应用程序。以下是React中可能使您的应用程序崩溃的八种做法：1.将默认参数设置为null这是一个令人毛骨悚然的陷阱，可能会使开发人员全面崩溃。毕竟，应用程序崩溃不是小事-如果处理不当，任何类型的崩溃都可能随时导致资金损失。例如：在应用程序组件中，如果日期最终为假，它将被初始化为空。直觉告诉我们，默认情况下，当一个项目是假值时，它应该被初始化为一个空数组。但是，当日期为假时，应用程序会因为条目为空而崩溃。如果没有传递任何值或未定义的值，则默认函数参数允许使用默认值初始化命名参数！所以，下次将默认值设置为null时，请三思。当空数组是值的预期类型时，可以将值初始化为空数组。2.使用方括号获取属性有时获取属性的方式会影响应用程序的行为。也就是说，它会导致应用程序崩溃。这是一个使用方括号执行对象查找的示例：这些实际上是100%有效的用例，除了比对象键查找慢之外，确实没有问题。无论如何，随着查找的深入，应用会出现问题：如果你对这个代码片段进行了一些增强并犯了一个小错误（比如把j中的J大写），结果会立即返回undefined，并发生Crashes：令人毛骨悚然的部分是应用程序不会崩溃，直到部分代码尝试使用未定义的值进行属性查找。所以同时，joesProfile（变相的undefined）会在应用程序中运行，没有人会知道这个undefined值正在悄悄进来，直到一段代码执行属性查找，比如joesProfile.age，因为joesProfile未定义！为避免崩溃，一些开发人员会在查找不成功时初始化一些默认的有效返回值：至少目前，应用程序不会崩溃。这表明当您使用方括号表示法应用查找时，它通常是无效的。但是，如果没有实际例子，很难说明这种做法的严重性。那么，接下来让我们举一个真实的例子。以将要显示的代码示例为例，它可以追溯到8个月大的存储库。为了保护这段代码的来源隐私，我们重命名了几乎所有变量，但代码设计、语法和体系结构完全相同：fixVideoTypeNaming是一个函数，它将根据作为参数传入的值提取视频类型.如果参数是视频对象，它将从.videoType属性中提取视频类型。如果是字符串，调用者传入videoType，这样可以跳过第一步。我们发现videotype.mp4属性在应用程序的多处拼写错误。使用fixVideoTypeNaming可以快速修复此错误。现在，该应用程序是使用Redux构建的——因此使用了语法。要使用这些选择器，您可以导入连接到高阶组件以附加一个组件来监听那部分状态。UIComponent该组件接收HOC传递给它的所有属性，并根据属性中的数据显示适配的信息。理想情况下是可行的，但实际上只是暂时可行。如果回到容器，看看选择器是如何取值的，你可能其实埋下了一颗定时炸弹，等待爆炸：在开发任何类型的应用程序时，为了保证高可靠性和减少开发中的漏洞过程，测试通常在开发过程中进行，以确保应用程序按预期运行。然而，在这些代码片段的情况下，如果没有经过测试并且没有及早处理，应用程序将会崩溃。比如state、app、media、video、videoType就是链条的四个层级。如果开发人员在修复应用程序的另一部分时不小心犯了错误，状态、应用程序、媒体、视频变为未定义，则应用程序将崩溃，因为它无法读取未定义的videoType属性。此外，如果videoType发生另一个错误并且fixVideoTypeNaming未更新以适应mp3问题，则该应用程序有再次意外崩溃的风险。除非它发生在真正的用户身上，否则没有人能够检测到它。到那时就太晚了。永远不要认为应用程序永远不会遇到这样的漏洞。当心！3.渲染时粗心地检查空对象回到有条件渲染组件的黄金时代，有人过去常常做的一件事是检查数据是否使用Object.keys填充到对象中。如果有数据，那么如果条件通过，组件将继续呈现。假设调用了一些API，并且在响应中的某处将一个项目作为对象接收。话虽如此，乍一看似乎完全没问题。项目的预期类型是Object，因此使用Object.keys完全没问题。毕竟，如果出现问题并转换为假值，您确实可以通过将项目初始化为空对象来进行防御。但是服务器并不总是返回相同的结构。如果将来items变成数组会怎样？Object.keys(items)不会崩溃，但会返回一个奇怪的输出，如["0","1","2"]。该数据呈现的组件应该如何反应？但这还不是最糟糕的部分。这段代码最糟糕的是，如果属性中接收到的项目为空，则该项目甚至不会被初始化为默认值。然后在您开始使用该应用程序之前，它崩溃了：再次提醒，小心！4.渲染前粗心检查数组是否存在这可能和#3很相似，但是数组和对象经常互换使用，所以应该单独列出。如果你有这样做的习惯：那么至少要确保进行单元测试，始终关注这段代码，或者在传递给渲染函数之前尽早正确处理arr，否则如果arr变为app将崩溃对象字面量。当然&&运算符认为这是真的，并尝试.map对象文字，最终导致整个应用程序崩溃。所以请记住这一点。为值得您特别关注的更大问题节省精力和挫败感！5.不使用Linters如果你开发你的应用程序时没有使用任何类型的linters，或者不知道它们是什么，那么你必须知道它们为什么在开发中有用。用于辅助开发过程的linter是ESLint（https://eslint.org/?source=post_page------------------------)，这是一个著名的JavaScriptlinting工具，它允许开发人员在不执行代码的情况下发现问题。这个工具太有用了，它就像半个导师，及时纠正错误——就像有人在指导你一样。它甚至描述了为什么您的代码可能是错误的，并建议您应该做什么。下面是一个示例：ESLint的妙处在于，如果您不喜欢某些规则或不同意其中的某些规则，您可以禁用这些规则，这样它们就不会在开发过程中显示为linting警告/错误。6.渲染列表时解构这在过去的一些人身上发生过，而且很难检测到这个错误。基本上，如果您有一个项目列表，并且您要为每个项目呈现一堆组件，并且如果列表中的一个项目不是预期值，那么应用程序就有问题。如果应用程序不知道如何处理值类型，则可能会崩溃。下面是一个例子：代码运行成功。让我们看看API调用而不是返回这个——如果API客户端发生意外并且返回这个数组怎么办？然后应用程序将崩溃，因为它不知道如何处理：UncaughtTypeError:Cannotreadproperty'name'ofundefineddateval(DataList.js?[sm]:65)atArray.map(
