构建React应用程序，请避开这十大禁忌

全文共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，加入读者圈，一块儿讨论最新鲜的人工智能科技哦～）