4年前，我爱上了
ReactJS ，从那时起，我就一直在使用这个出色的工具开发所有前端应用程序。 在这段时间里，我和我幸运的团队一起犯了很多错误，其中许多错误已成功解决。 在困难而昂贵的实验中发现了许多最佳解决方案。
今天，我想分享比其他人更经常犯的最关键和痛苦的错误。 在写这篇文章之前，我当然研究了互联网以寻找类似的文章，我惊讶地发现其中大多数已经过时并谈论了2019年无关紧要的事情。 因此，我试图汇编目前最紧迫的问题清单。
1.有状态的组件（类）比钩子更糟糕
也许值得从最令人
激动的ReactJS功能入手，该功能出现在16.8+版本中。与某些信念相反，此功能受到前几代开发人员的错误的困扰，并解决了许多问题。 如果您在2019年仍在使用类组件而不是钩子，那么您犯了一个大错误并且只是不了解它们的优势。 我不会在本文中对此进行详细说明，而让
Den Abramov播放的精彩视频看起来更好，但否则我将无法开始本文
当然，这本身并不是错误，但是与钩子相比，类的方法更容易出错，因为已经有很多文章写过：
- 您（可能）在React代码中最常见的错误
- React开发人员最常犯的7个错误
2.使用匿名函数作为道具
如果仍然可以认为第一个错误是对时尚的敬意，那么我向您保证，知道第二个错误将使您免于夜未眠和头痛的困扰。 毕竟，正是她使应用程序无法充分发挥作用，以致于它的用户永远不会对
ReactJS感到失望。 但是我们希望用户像他和我一样爱他，对吗？ 为避免此错误，您可以使用一个非常简单的规则-永远不要将匿名函数作为道具传递给组件。
export default function MyOtherComponent() { return ( <MyComponent getValue={i => i.value} /> {/* */} ); }
此错误的更复杂的版本可能看起来像这样（如果您不熟悉Redux，请不要阅读）：
import { connect } from 'react-redux'; import { createStructuredSelector } from 'reselect'; import MyComponent from './MyComponent'; import { fetchProjectData, projectId } from "./store/projects" const mapStateToProps = createStructuredSelector({ projectId, }); const mapDispatchToProps = { fetchProjectData, }; const mergeProps = ( { projectId, ...restState }: any, { fetchProjectData, ...restDispatch }: any, { memberId, ...restOwn }: any ) => ({ ...restState, ...restDispatch, ...restOwn, fetchProjectData: () => fetchProjectData(projectId), }); export default connect( mapStateToProps, mapDispatchToProps, mergeProps )(MyComponent);
当然，在两种情况下，匿名函数都会进入
props组件。 这很不好，因为每次渲染父元素时，此函数都将引用内存中的一个新对象，这意味着该对象将不等于前一个对象，并且将不必要地成功渲染您的组件。 这可能会大大降低应用程序的性能，以至于您自己在
React中会吐口水并感到失望，但是重点在于
props中的ANONYOUSOUS FUNCTIONS。 只是永远不要做-并且要快乐。
问题在于，这样的错误经常没有做错任何事情。 该代码本身就可以工作，仅此而已。 并没有发生任何明显的不良情况。 直到您再次推送匿名呼叫以从那里的服务器接收数据（第二个示例）之前，您将了解问题的严重性。 结果，这种匿名道具的堆积将使您的应用程序减慢到1995年的体验水平，那时我们不得不要求邻居释放电话线来下载页面。
仅需几句话，如何正确书写。 方法如下：
const getValue = i => i.value; return default function MyOtherComponent() { return ( <MyComponent getValue={getValue} /> ); }
import { connect } from 'react-redux'; import { createStructuredSelector } from 'reselect'; import MyComponent from './MyComponent'; import { fetchProjectData, projectId } from "./store/projects" const mapStateToProps = createStructuredSelector({ projectId, }); const mapDispatchToProps = { fetchProjectData, }; export default connect( mapStateToProps, mapDispatchToProps )(MyComponent);
3.应用程序中的多个React实例
该错误很可能与整个应用程序的整体架构有关，而不仅仅是与ReactJS有关。 但是，对于开发人员来说，这个实际问题通常过于昂贵，而对于不眠之夜则往往过于昂贵。
请不要在一页上塞满多个React应用程序实例。 实际上，在React文档中没有禁止使用这种方法的情况，我什至在某些文章中（甚至我在我的应用程序中都曾做到过）提出了建议，但在这种情况下却优化了这种方法并协调了应用程序的所有部分开始占用所有工作时间的一半以上。 这很容易避免：例如，如果您需要在新的
React应用程序中响应旧代码中的某些事件，则可以使用事件模型。 例如，像这样：
import React, { useCallback, useEffect } from 'react'; export default function MyComponent() { const reactHandlerOfLegacyEvent = useCallback((event) => {}, []); useEffect(() => { document.addEventListener("myLegacyEvent", reactHandlerOfLegacyEvent); return () => { document.removeEventListener("myLegacyEvent", reactHandlerOfLegacyEvent); }; }, [reactHandlerOfLegacyEvent]); return ({}); }
4.编写自己的库，而不是现有的开源
这个问题根本不是关于
ReactJS ，而是整个开发。 当然，在学习的同时，编写大量自己的库可以使您更快地成长并变得更大，但是如果您想站在编程的最前沿，则只需至少尝试解决问题的每个开源库。 只需询问搜索机器人，是否有任何图书馆可以解决您的问题-他们可以完美地回答此类问题。
我不会举一个我自己使用的库的示例，因为 我知道其中一半将在几个月后过时，而其他人将取代他们。 而且，这似乎与原始陈述相矛盾。 真的，为什么要使用几个月后就过时的库？ 答案非常简单-您可以看到尚未解决的问题的解决方案。 您可以改进现有实践，或者通过现有库中的问题示例了解如何更好地解决问题。 这只能通过使用开源库与开发人员进行交互来完成。
5.害怕使用别人的代码
像先前的错误一样，这并不是
ReactJS应用程序
独有的 ，但在它们中却很常见。 我多久看到一次6月大战如何勇敢地闯入战场，并重写了那些运行良好且没有问题的代码部分，仅仅是因为它们阅读了前面四个错误之一。 我自己就是那样。 但是有什么要欺骗的，我现在经常浪费时间，仅仅是因为运动就是生命。
但是我也学会了理解其他开发人员，他们的想法和遇到的问题。 查看在解决问题上花费（而不是徒劳）的时间和精力。 在5分之3的情况下，当我尝试“改进”他人的代码时，我得到的结果几乎与我相同。 仅仅因为在任务开始时，您通常看不到将来存在的所有问题。 所以，现在我尊重别人的代码，无论我觉得多么奇怪和“过时”。 我建议你。
谢谢啦
感谢您阅读本文以及所有有幸与我一起工作的人们。 感谢我们使我们的世界变得更加有趣并向前发展。 不要总是总是对的，不是总是熟练的，而是要前进。
写出您在评论中遇到的问题。 也许您有解决本文中我遗漏的问题的解决方案（我敢肯定是这样）。 一切顺利，心情愉快！