如果您是一名从事构建高度交互式用户界面的前端开发人员，那么您很可能在工具箱中获得了React。在使用React驱动的创作时，您应该小心处理与React最佳实践相符的事情。这有助于保持代码更有条理。
如您所知，React是一个由Facebook创建的库，它允许与许多有趣的组件集成。实际上，任何开发人员都可以创建自己的组件并使其可供社区访问。
今天，我们主题并向您展示React最基本的最佳实践：
?1。保持组件小巧且功能特定
众所周知，使用React，可以拥有执行大量任务的巨大组件。但是设计组件的更好方法是将它们保持为小，以便一个组件对应于一个功能。理想情况下，单个组件应呈现页面的特定位或修改特定行为。这有很多好处：
- 功能特定的组件可以是独立的，这使得测试和维护更容易。
- 每个小组件都可以在多个项目中重用。
- 执行常规功能的组件可供社区使用。
- 使用更小的组件，可以更轻松地实现性能优化。
- 更新更小的组件更容易。
- 更大的组件必须更难以执行并且可能难以维护。
创建一个简洁组件和创建多个功能特定组件之间的平衡可能因组织而异。毕竟，您可以拥有任意数量的组件，并以任何您希望获得相同最终结果的方式重新组合它们。
♻️2。可重用性很重要，因此请将新组件的创建保持在最低要求
通过坚持一个函数=一个组件的规则，您可以提高组件的可重用性。这意味着如果已经存在该函数的组件，则应该跳过尝试为函数构建新组件。
通过在项目中或在任意数量的项目中重用组件，您不仅可以实现一致性，还可以为社区做出贡献。
另一方面，如果任何组件变得庞大，笨重且难以维护，最好将其分解为所需的更小的组件。
例如，您甚至可以进一步创建可以处理图标的Button组件。然后，每当您需要一个按钮时，您将拥有一个要使用的组件。使其更加模块化将允许您使用相同的代码覆盖许多情况。你必须瞄准中间的某个地方。您的组件应该足够抽象，但不应过于复杂。
class IconButton扩展了React.Component {（…）render（）{return（ ）; 3.巩固重复的代码 – 干掉你的代码
所有代码的通用规则是尽可能简洁明了。
这里也没有什么不同，因为React最佳实践也指示您保持代码简洁和精确。一种方法是避免重复 – 不要重复自己（干）。
您可以通过仔细检查代码的模式和相似性来实现这一点。如果您发现任何问题，您可能会重复编码，并且可以消除重复。最有可能的是，一点改写可以使它更简洁。
这在很大程度上依赖于React中的可重用性原则。假设您要添加包含图标的多个按钮，而不是为每个按钮添加标记，您只需使用我们上面显示的IconButton组件即可。您甚至可以将所有内容映射到数组中。
const buttons =（'facebook'，'twitter'，'youtube'）;回来（
）; ?4。仅在必要时进行评论
仅在必要时将注释附加到代码。这不仅符合React的最佳实践，同时还有两个目的：
- 这将使代码视觉上完全无杂乱。
- 如果您碰巧在稍后的某个时间更改了代码，则可以避免注释和代码之间发生潜在冲突。
?5。在功能后命名组件
在执行它的函数之后命名一个组件是一个好主意，这样它很容易识别。
例如，ProductTable – 它可以立即传达组件的功能。另一方面，如果您根据代码的需要命名组件，则可能会在将来的某个时间点混淆您。
另一个例子，最好将组件命名为Avatar，以便它可以在任何地方使用 – 对于作者，用户或评论。相反，如果我们在其使用的上下文中命名组件AuthorAvatar，我们将限制该组件的实用程序。
此外，在函数之后命名组件使其对社区更有用，因为它更有可能被发现。
?6。使用大写字母表示组件名称
如果像大多数人一样使用JSX（JavaScript扩展），那么您创建的组件的名称需要以大写字母开头。例如，您将组件命名为SelectButton而不是selectbutton，或Menu而不是menu。我们这样做是为了让JSX能够以与默认HTML标签不同的方式识别它们。
早期的React版本维护了所有内置名称的列表，以区别于自定义名称。但由于名单需要不断更新，因此被废弃，资本成为常态。
如果JSX不是您选择的语言，您可以使用小写字母。但是，这可能会降低项目之外的组件的可重用性。
?7。将有状态方面与渲染分开
React中的组件可以是有状态的或无状态的。有状态组件存储有关组件状态的信息并提供必要的上下文。相比之下，无状态组件没有内存，也无法为UI的其他部分提供上下文。它们只从父组件接收道具（输入）并返回JSX元素。它们具有可扩展性和可重用性，与JavaScript中的纯函数类似。
React最佳实践之一是将有状态数据加载逻辑与渲染无状态逻辑分开。最好有一个有状态组件来加载数据，另一个无状态组件来显示这些数据。这降低了组件的复杂性。
后来的React版本v16.8有一个新功能 – React Hooks，它编写有状态的功能相关组件。这可能最终消除对基于类的组件的需求。
例如，您的应用程序正在mount上获取一些数据。您要做的是管理主组件中的数据，并将复杂的渲染任务作为道具传递给子组件。
从'./RenderTable'导入RenderTable; class Table extends Component {state = {loading：true}; render（）{const {loading，tableData} = this.state;返回加载？
真的，这个规则不需要解释。您编写的代码应该按预期运行，并且可以轻松快速地进行测试。将测试文件命名为与.test后缀的源文件相同是一种很好的做法。然后很容易找到测试文件。
您可以使用JEST来测试您的React代码。
?9。与任何一个组件相关的所有文件都应该在一个文件夹中
将与任何一个组件相关的所有文件保存在一个文件夹中，包括样式文件。
如果只有特定组件使用的任何小组件，则将这些较小的组件保存在该组件文件夹中是有意义的。然后，层次结构将易于理解 – 大型组件具有自己的文件夹，所有较小的部件都分成子文件夹。这样，您可以轻松地将代码提取到任何其他项目，甚至可以随时修改代码。
例如，对于Form组件，CSS文件，图标，图像，测试和与Form相关的任何其他子组件等所有部分都应驻留在同一文件夹中。如果您明智地命名文件，并将相关文件逻辑地保存在一起，那么以后找到它们将不会有任何困难。
?10。使用比特等工具
有助于组织所有React组件的React最佳实践之一是使用Bit等工具。
这些工具有助于维护和重用代码。除此之外，它还有助于代码变得可被发现，并促进团队协作构建组件。此外，代码可以跨项目同步。
?11。使用代码段库
代码段可帮助您跟上最佳和最新语法。它们还有助于保持代码相对无bug，因此这是您不应错过的React最佳实践之一。
您可以使用许多代码段库，例如ES7 React，Redux，JS Snippets等。
?12。遵循linting规则，分解太长的线条
Linting是一个过程，我们运行一个程序来分析潜在错误的代码。
大多数情况下，我们将其用于与语言相关的问题。但它也可以自动修复许多其他问题，特别是代码风格。在React代码中使用linter有助于保持代码相对错误和无错误。
关于React最佳实践的最后一句话
我希望这个React最佳实践列表能够帮助您将项目放在正确的轨道上，并避免在未来的任何潜在问题。
如果您有任何与React相关的问题，请随时在下面的评论中提交。
AndreiBăicuş的代码示例。
…
不要忘记加入我们的速成课程，以加快您的WordPress网站。通过一些简单的修复，您可以将加载时间减少50-80％：