全文共2841字，预计学习时长6分钟
图片来源：pexels.com/@bymalcolmgarret
React是一款很受欢迎的开发工具，性能优良。不过人无完人，React也一样。React有一些特有的注意事项——如果现在不进行处理，那么某一部分可能会造成应用程序的严重问题。
下面将介绍构建React应用程序时的10大禁忌。
1. 过于注重个人世界
如果花费了大量时间编写代码，而没有了解社区中的动态，则可能会犯社区报告中提到的错误。这样的错误可能会重复20次，直到最终在某一篇帖子中发现这个错误。
这种情况一旦发生，就必须返回并重构这20个代码，但为时已晚。此时别人已经前进了一大步。当你还在赶进度的时候，他们会去了解更新的编码动态。
当React开发出hooks功能时，很多人非常兴奋。你可以构建一系列迷你items来进行试验。其实，如果能对useReducer进行更深入的研究的话，仅仅30分钟的研究就足以让你回去重构大量的代码。
2. 使用.bind（而非类组件构造器）
大多数React开发人员知道，如果想在他们的方法内引用它来访问自己的类别实例，应该对类方法进行绑定。（除非使用转译器来转译类属性和类方法。）
但这里要介绍的是内联函数。这些函数在React组件的呈现方法中进行定义，并作为道具传递给子组件。
通过呈现方法定义内联函数时，每当组件重新呈现时，React都会开始指定一个新的函数实例。这种重新呈现较浪费资源，会导致性能问题。
请看下例：
已知onClick={() => sayWhereTheMoneyIs("I don'tknow")} 以及 onClick={() => showThemTheMoney(0.05)} 是内联函数。
一些教程（包括Udemy的教程）建议的做法似乎高速缓存了信息且避免了不必要的重新呈现，因为在呈现方法中没有使用箭向内联函数。但实际上，每个呈现阶段仍在创建新函数！
如果在类组件流行的时期关注了React生态系统中的社区动态，那么你可能已经了解了。
然而，自从React发布了hook以来，.bind就逐渐消失在人们的视野之中，因为类组件越来越不流行。提到.bind，人们通常会想到绑定类方法。为了进行补充，上例根本没有绑定类方法。不细心的话就更难注意到这个后果了。
新手应该特别注意这种反模式！
图片来源：pexels.com/@rawpixel
3. 将动态值作为密钥传递给子级
有必要为映射的子级提供唯一的密钥吗？这么做是有好处的。
现在，假设items1中的一些最终值碰巧与items2中的一些最终值相同。
当某人想要重构一个类似的组件时，确实可以通过为每个子级提供唯一的密钥来完成任务。但有两个错误：
· 首先，React为了生成唯一的值，进行了不必要的工作；此外，由于密钥每次都不同，每次呈现时都要重新创建所有节点。
· React中密钥表明了身份信息。为了确定组件身份，确实需要唯一的密钥，但事实并非如此。
现在，不要担心，每个items会有自己唯一的密钥来表明身份。
4. 空值时申明默认参数
在应用程序组件中，如果日期最终发生错误，那么它被初始化为空值。
运行代码时，如果直觉认为items是一个错误值，那么默认情况下它应该初始化为空值。但当日期错误时，应用程序会崩溃，因为items为空值。这是怎么回事？
在没有传递值或未定义的情况下，默认函数参数允许使用默认值对已命名参数进行初始化。
在本例中，即使空值发生错误，它仍然是一个值！
5. 不改变重复代码
当需要尽快修复程序时，比较倾向于复制并粘贴代码。有时，这可能是效率最高的方法。
现在应开始考虑如何抽象这些组件，以便在不更改安装启用的情况下进行多次重复使用。如果其中一个网格组件相对于其周围的网格容器存在样式问题，则必须对每一个组件进行手动更改。
更好的编码方式是抽象出重复的部分并粘贴到略微不同的道具中。
所以如果你的老板最终改变了主意，想让所有这些部分的高度都在300px左右，那么仅在一个地方做出改变即可。
如果想要创建一个支持多个用例的组件，不推荐这种解决方案。这仅用于特定的用途，即已知它只会在该环境中重复使用。支持多个用例的SectionContainer的更动态的可重复使用解决方案可能变得更泛化。在不更改安装启用的情况下执行操作，便可允许开发人员根据需要选择扩展组件的任何部分，同时保留基本安装启用。
6. 初始化构造函数中的道具
初始化构造函数的状态时可能会出现漏洞。这是因为只在第一次创建组件时调用构造函数。
下次尝试更改道具时，状态将保留其先前值，因为不会在重新呈现时调用构造函数。
如果还没有遇到这个问题，那么这将有所帮助。
图片来源：pexels.com/@pixabay
7. 用&&进行有条件呈现
当有条件地呈现组件时，一个常见的问题是&&运算符的使用。
如果条件不满足要求，React将尝试呈现任何提供的内容作为替代输出。因此，当出现以下情况时：
当items.length为空时，屏幕上呈现数字0。JavaScript将数字0视为错误值，因此当items为空数组时，&&运算符不会计算其右边的表达式，只返回第一个值。
要想保留语法，可以使用双重否定。
这样一来，items若为是空数组且计算的输出是布尔，React将不会在屏幕上呈现任何内容。
8. 不扩散先前的状态
如果不小心安装启用状态更新逻辑，则会出现漏洞。
最近的一个情况涉及React的hook，特别是UseReducer的安装启用。
当某函数调用并复制状态时，基础items的性能并没有更改。当使用.splice对其进行变异时，这将改变state.items，并引入漏洞。
更大的代码会产生更大的麻烦。我们都可能会忘记上面的一个小例子，但是当出现问题时，我们必须记住这一点。这一点很容易忘记，尤其是将代码运用至生产中时！
9. 不显示传递给子组件的道具
通常，建议显示传递给子组件的道具。
有以下几点优势：
· 易于调试。
· 开发者本人了解正在传递的道具。
· 其它开发者也了解情况，且易于读码。
· 易于了解组件的行动。
· 其它优势在于，当显示道具时，会对代码进行注释。这样所有人员都无需正式专案便可了解。大大节约了时间。
· 用来确定组件是否应重新呈现所需的道具将会减少。
可以有一些非常简洁的用例来传播所有的道具。
如果需要，可以考虑将组件拆分为不同的组件，以便更整洁、更易于自定义。
10. 道具钻探
将道具传递给多个子组件就是所谓的代码味道。
道具钻探是指父级将道具传递到内部的多个级别的组件。
现在，问题不在于父级或子级。它们应保持其安装启用不变。中间的组件可能会在React应用程序中出现问题。
这是因为目前中间的组件紧密耦合，并且接触了太多不必要信息。最糟糕的是，当父级重新呈现时，中间的组件也将重新呈现。这会影响链下面的所有子组件。
解决方法是使用上下文来代替。或者对道具进行还原（对道具进行序列化）。
留言 点赞 关注
我们一起分享AI学习与发展的干货
欢迎关注全平台AI垂类自媒体 “读芯术”
（添加小编微信：dxsxbb，加入读者圈，一起讨论最新鲜的人工智能科技哦～）