1.在本地和全局应用程序状态之间合理分配数据
React是一个库，负责根据应用程序的当前状态管理用户界面。程序员的任务是合理组织有状态的工作。一些开发人员倾向于将所有数据存储在Redux存储库中。这使他们能够组织所有应用程序数据的集中处理。
但是，在考虑应在应用程序状态中包含哪些数据时，值得考虑的是，是否需要将操作传递给状态管理系统，例如，打开一个简单的下拉菜单。例如，用户输入到反馈表中的数据也是如此。应用程序的所有部分都需要知道以这种形式输入的内容吗？当涉及到输入表单时，此类数据通常由应用程序在相当短的时间内处理。此外，它们仅由负责在屏幕上显示表单的组件使用。
与其使用Redux存储来存储应用程序正在使用的所有内容，不如将一些数据存储在组件的本地状态中。这将避免使应用程序体系结构过于复杂。
在考虑您到底需要在哪里存储一些数据时，值得问自己以下问题：
- 您是否需要在应用程序的不同部分访问此数据？
- 您是否需要根据这些数据形成新事物的能力？
- 不同的组件是否使用相同的数据？
- 能够还原包含此数据的应用程序状态，并将其恢复为特定时间点的形式，这对您是否有价值（也就是说，您是否有兴趣通过沿相反方向沿代码执行路径移动的方式进行调试）？
- 您是否打算缓存此数据（也就是说，如果应用程序已经拥有了，请使用现有状态，而不是重新加载它）？
- 热重装组件时是否需要保留这些数据（在此过程中，组件的内部状态可能会丢失）？
对上述问题的肯定回答表明，数据已在组件外部以某种方式使用。这意味着将它们存储在应用程序的全局状态是有意义的。但是，应该注意的是，使用局部状态的组件更加独立和可预测。
2.从一开始就学习如何测试应用程序并为您的项目配备测试
创建自动化测试非常重要。事实是，在React项目的某个工作阶段，对其进行手动测试将花费大量时间和资源。
在项目开始时，当其代码库仍然较小时，很容易决定不为其编写测试。如果一个应用程序有5到10个组件，那么创建自动化测试看起来就像是毫无意义的例行任务。但是，如果一个项目增加到超过50个组件并且包含许多高阶组件，则手动测试可能需要一整天的时间。即使采用这种方法，也可能会出现错误，没人会注意到。
另外，编写测试通过将代码分成模块来帮助改进代码的结构。这将帮助您更快地发现错误，并保护项目免受生产故障的影响。自动化测试的意义在于，它可以在一个手动测试不再能够确认代码正常工作的阶段，帮助一个不断发展的项目发展。
的确，如果您不习惯创建测试，那么拥有一个相当大的项目的您将无法立即为其编写代码。这就是为什么您需要从头开始编写测试的原因。如果您不确定从哪里开始测试您的项目，请从集成测试开始。关键是，测试中最重要的事情是确认组件之间是否正确交互。
3.应用有助于扩展应用程序的其他工具
通常，在React项目的开发过程开始时，不需要使用大量辅助工具。但是，由于我们正在谈论的项目可能会变得很大，因此值得注意的是，专用工具将极大地促进对其的工作。这是其中一些的说明：
- 使用Prettier和ESLint可帮助团队中的程序员编写一致的代码。这些工具可以帮助减少语法和代码中的其他错误。使用辅助库（如React Router，date-fns，react-hook-form）也会使项目受益。
- TypeScript Redux , , . , .
- - , React , .
- 使用位允许您组织与作为应用程序的独立构建块呈现的组件的工作。这意味着您可以隔离测试和渲染组件。这种使用组件的方法使它们更易于维护和重用。
- 您可以使用相应的Next.js工具来创建新的React应用程序，而不是create-react-app 。
这些工具将帮助您维护大型React应用程序代码库。但是在选择工具时，请记住，每种工具都会增加项目的复杂程度。在项目中包含任何内容之前，请仔细研究所有内容并做出明智的决定。
4.注意项目文件结构
开发可伸缩的React应用程序时遇到的最好的技巧之一是组织项目文件并明智地命名它们可以帮助加快处理速度。一些开发人员经常将其作为目录中存储的文件夹中的主文件
components使用index.js。
各个组件的文件命名
相同。这种组织项目的方法似乎很合理，因为在某个文件中导入组件时，相应的指令非常简单：
import Button from '../components/Button';
但是，如果您在编辑器中打开此类组件的文件怎么办？
无处不在-仅index.js
在其中导航将很不方便。确定每个组件属于哪个组件并不容易
index.js。但是，如果重命名这些文件以匹配组件名称，则导入说明的吸引力将降低：
import Button from '../components/Button/Button';
在这种情况下怎么办？例如，我的团队提出了以下解决方案：在组件文件夹中，有一个文件，其代码名称与组件名称相对应，并且在文件旁边有
index.js一个导出组件的文件。
组件代码文件和index.js导出组件
我们还将CSS和单元测试文件放在components目录中。使用这种方法，每个组件目录都包含与相应组件相关的所有内容。
设备齐全
5.创建组件库
最好在项目早期就开始构建组件库，而不是等待组件增长。在处理组件的过程中，可以将它们设计为适合重复使用的独立模块。可以使用Bit创建组件库，可以使用bit.dev资源，也可以通过在家中部署系统来创建。
6.使用钩子将组件的逻辑与其自身分开
随着项目的发展，您可能会注意到一些组件的逻辑在不同的地方反复使用。您可以使用专有的挂钩来组织组件逻辑的共享。
例如，我们有一个用于计算篮球比赛得分的应用程序。
篮球比赛中计分的应用程序
如果您查看该应用程序的代码，则文件中将显示该代码
HomeTeam.js并AwayTeam.js使用相同的逻辑来处理仪表。在这种情况下，当使用相同的代码来管理界面时，您可以将该代码与组件分开，并将其放在单独的文件中。
在这里，我将用于存储计数器状态的代码和用于增加计数器的逻辑分离到了一个单独的文件中
util.js。该文件导入到组件中。
挂钩本质上是返回某些值的普通函数。在他们的帮助下，您可以设置要在各种组件中重用的代码的样式。
结果
始终牢记，开发大型React应用程序是一项复杂的任务，需要做出决策时要考虑到此类应用程序的用户和开发人员的利益。在每个特定项目上进行工作时应遵循的建议的选择取决于这些建议对使用该项目的人和正在开发该项目的人的良好程度。
选择用于项目开发的工具和技术时，值得尝试。这将使您能够准确选择对React应用程序有益的内容。希望我今天与您分享的技巧对您有用。
在构建需要很好扩展的React项目时，您使用什么开发工具和技术？
