在开始一个新的React项目时，最好将一些您和您的团队将遵循的指南放在一起，以使您的代码可扩展成为一个好主意。在这篇文章中，我将与您分享我多年来使用React的一些见解，这些见解将帮助您确定自己的项目指南。1.了解如何在本地状态和全局状态之间组织状态React是一个根据当前状态管理UI的库。作为开发人员，您的工作是组织构成应用程序的状态的保存位置。一些开发人员更喜欢将每个数据保存在redux存储中，以跟踪所有可用状态。但是你真的需要向你的状态管理器发送一个动作来打开或关闭一个简单的下拉菜单吗？不要使用Redux来跟踪应用程序中的每个状态，而是在本地保留一些状态以避免过度杀伤你的应用程序。根据经验，您可以提出以下问题：应用程序的其他部分是否关心此数据？您是否需要能够基于此原始数据创建其他派生数据？您是否使用相同的数据来驱动多个组件？将此状态恢复到给定时间点是否有价值？您是否要缓存数据（例如，使用现有状态而不是重新请求它）？你想在热重载UI组件时保持这些数据一致吗（交换可能会丢失其内部状态）？使用本地状态的组件更加独立和可预测。2.从一开始就学习测试和编写自动化测试的好处编写自动化测试的问题在于，在某个时刻，如果不花费大量时间和资源，就不可能手动测试你的React项目。开始一个项目时，很容易证明跳过编写测试代码是合理的，因为您的代码库相对较小。如果您的React应用程序中只有5-10个组件，那么编写自动化程序真的感觉像是一件没有明显好处的苦差事。但是，当您有超过50个组件，并且有多个高阶组件时，手动测试您的项目可能需要一整天，而且即便如此，错误也可能在没有人注意到的情况下悄悄潜入。是的，编写测试代码将帮助您使代码更加模块化，它将帮助您更快地发现错误，并防止生产崩溃。但是，自动化测试的最终目的是在手动测试无法再验证代码是否按预期工作时帮助您扩展项目。但是你不能在不习惯的时候突然写测试代码，这就是你必须从头开始的原因。如果您不知道从哪里开始，请从集成测试开始，因为测试最重要的部分是验证您的组件是否正常工作。3.使用工具来帮助您扩展通常，您不需要在应用程序开始时向您的React项目添加很多工具。但由于我们讨论的是将React应用程序扩展到庞大的代码库，我会说你需要使用所有好的工具来帮助你。为了在团队成员之间提供一致的代码模式并减少语法错误，需要Prettier和ESLint。ReactRouter、date-fns和response-hook-form等强大的实用程序库是不错的选择。可以延迟添加TypeScript和Redux，直到您的应用程序容易出现类型错误，并且您的应用程序的某些部分需要一遍又一遍地使用相同的状态，您需要使其全局可用。从一开始就实现状态管理是不必要的，因为React本身已经找到了管理状态的最佳方式。Bit(Github)将您的组件作为单独的工件进行管理和共享。这意味着您可以单独测试和渲染每个组件。这将保证以后更容易维护和重用它。您还可以使用Next.js而不是CreateReactApp来启动您的项目。这些工具将帮助您维护大型React代码库，但请注意，您添加的每个工具都会增加项目的复杂性。在决定采用此工具之前进行研究。4.组织好项目文件在扩展React应用程序时，我学到的最好的技巧之一是组织项目文件并命名它们可以加快进度。一些开发者倾向于这样写index.js作为组件目录下的主文件：这似乎是合理的，因为当你将组件导入其他文件时，语句变成：importButtonfrom'../components/Button';但考虑在代码编辑器中并排打开它们：老实说，所有这些index.js都会让任何人感到困惑。但是如果你将那些index.js文件重命名为组件名称，你的import语句看起来会有点难看。importButtonfrom'../components/Button/Button';我的团队最终决定同时拥有一个以组件命名的文件和一个导出组件的index.js文件。我们还将CSS和单元测试文件放在组件目录中。这样，每个组件目录都可以是一个独立的组件。5.构建你的UI/逻辑组件库你不应该等到你的项目规模大了才构建组件库，你可以随时随地共享组件。每当构建新组件时，使用Bit对其进行跟踪并将其共享到Bit.dev上或您自己的服务器上的团队组件集合。如前所述，（真正的）独立组件易于维护，并且在共享和记录时也易于重用。组件库不仅仅用于UI组件。逻辑也应该包括在内——在React的情况下，作为自定义挂钩（大体上）。6.使用钩子将逻辑与组件分离随着项目的增长，您可能会注意到某些组件的逻辑似乎被重用了。为了在组件之间共享逻辑，您需要编写自定义挂钩。钩子是简单地向其调用者返回一些值的函数，这就是为什么您可以实现相同的模式以在组件之间重用逻辑。总结永远记住，大规模构建React应用程序是一项复杂的任务，需要您为消费者和开发人员考虑最佳决策。最终，最佳实践是适合您的用户和团队的。
