创建可重复使用的反应组件的实用指南-js教程-PHP中文网

创建可重复使用的反应组件的实用指南

尽管React是世界上最受欢迎，最常用的前端框架之一，但许多开发人员在重构代码以提高可重复性时仍在挣扎。如果您曾经发现自己在整个React应用程序中都重复了相同的代码段，那么您就可以使用正确的文章。

> 在本教程中，您将向您介绍三个最常见的指标，即该建立可重复使用的反应组件了。然后，我们将继续通过构建可重复使用的布局和两个令人兴奋的React挂钩来查看一些实用的演示。

>您完成阅读时，当创建可重复使用的React组件是适当的时，您将能够自己弄清楚

>如何做到。。 🎜> >本文假定对钩子的基本知识。如果您想了解这些主题，我建议您查看“启动React”指南和“ Intorduction tor React Hooks”。> 钥匙要点

识别可重复使用的机会：本文介绍了三个通用符号，表明需要创建可重复使用的反应组件：重复的CSS样式用于包装器，频繁使用相同的事件侦听器以及重复实现相同的GraphQl查询或突变。该指南可帮助开发人员认识到他们何时可以将重复代码抽象成可重复使用的组件，从而提高其应用程序的可维护性和可扩展性。

实用的演示和实现：通过详细的示例，本文提供了有关构建可重复使用的组件的实用演示，包括布局组件，用于管理事件侦听器的自定义React挂钩以及用于GraphQl查询的挂钩。这些示例是开发人员遵循的蓝图，使他们能够在自己的项目中应用类似的模式来简化开发并确保其应用程序的一致性。
可重复使用的反应组件的前三个指标
>
>时的某些迹象。用相同CSS样式的包装器重复创建包装纸

我最喜欢知道何时创建可重复使用的组件的迹象是重复使用相同的CSS样式。现在，您可能会想：“等一下：为什么我不简单地将相同的类名称分配给共享相同CSS样式的元素？”你绝对正确。每当不同组件中的某些元素共享相同样式时，创建可重复使用的组件并不是一个好主意。实际上，它可能引入不必要的复杂性。因此，您必须再问自己一件事：这些常见样式的元素
包装器>？>？例如，请考虑以下登录页和注册页：
>
// Login.js import './common.css'; function Login() { return ( <div className='wrapper'> <main> {...} </main> <footer className='footer'> {...} </footer> </div> ); } 
登录后复制
登录后复制
登录后复制
登录后复制
>将相同的样式应用于容器（
元素）和每个组件的页脚。因此，在这种情况下，您可以创建两个可重复使用的组件 - 和 - 并将孩子作为道具传递给他们。例如，可以对登录组件进行重构如下：
// SignUp.js import './common.css'; function Signup() { return ( <div className='wrapper'> <main> {...} </main> <footer className='footer'> {...} </footer> </div> ); } 
登录后复制
登录后复制
登录后复制
登录后复制
>
结果，您不再需要在多个页面中导入common.css或创建相同的
元素来包装所有内容。重复使用事件侦听器
// Login.js import Footer from "./Footer.js"; function Login() { return ( <Wrapper main={{...}} footer={<Footer />} /> ); } 
登录后复制
登录后复制
登录后复制
登录后复制
要将事件侦听器附加到元素上，您可以在usefeft（）内部处理它：
>

>您可以直接在JSX中进行此操作，如以下按钮组件中所示：
// App.js import { useEffect } from 'react'; function App() { const handleKeydown = () => { alert('key is pressed.'); } useEffect(() => { document.addEventListener('keydown', handleKeydown); return () => { document.removeEventListener('keydown', handleKeydown); } }, []); return (...); } 
登录后复制
登录后复制
登录后复制
>要将事件侦听器添加到文档或窗口时，您必须使用第一个方法。但是，正如您可能已经意识到的那样，第一种方法需要使用usefeff（），addeventListener（）和removeeventListener（）（）使用更多代码。因此，在这种情况下，创建自定义挂钩将使您的组件更加简洁。
>
有四种可能使用事件侦听器的情况：
// Button.js function Button() { return ( <button type="button" onClick={() => { alert('Hi!')}}> Click me! </button> ); }; 
登录后复制
登录后复制
登录后复制
>同一事件侦听器，同一事件处理程序

同一事件侦听器，不同的活动处理程序
- 不同的事件侦听器，同一事件处理程序
- 不同的事件侦听器，不同的事件处理程序
- 在第一种情况下，您可以创建一个挂钩，其中侦听器和事件处理程序都被定义。考虑以下钩子：
- 然后，您可以在任何组件中使用此钩子，如下所示：
在其他三种情况下，我建议创建一个接收事件和事件处理功能作为道具的钩子。例如，我将把Keydown和Handle Keyve Down作为道具传递给我的自定义挂钩。考虑以下钩子：

然后，您可以在任何组件中使用此钩子，如下所示：
// useEventListener.js import { useEffect } from 'react'; export default function useKeydown() { const handleKeydown = () => { alert('key is pressed.'); } useEffect(() => { document.addEventListener('keydown', handleKeydown); return () => { document.removeEventListener('keydown', handleKeydown); } }, []); }; 
登录后复制
登录后复制
登录后复制
// Login.js import './common.css'; function Login() { return ( <div className='wrapper'> <main> {...} </main> <footer className='footer'> {...} </footer> </div> ); } 
登录后复制
登录后复制
登录后复制
登录后复制
>重复使用同一GraphQl脚本

>在使GraphQl代码重复使用时，您实际上不需要寻找符号。对于复杂的应用程序，用于查询或突变的GraphQL脚本很容易占用30-50行代码，因为有许多属性需要请求。如果您多次或两次使用相同的GraphQl脚本，我认为它值得拥有自己的自定义钩。
考虑以下示例：
// SignUp.js import './common.css'; function Signup() { return ( <div className='wrapper'> <main> {...} </main> <footer className='footer'> {...} </footer> </div> ); } 
登录后复制
登录后复制
登录后复制
登录后复制
>而不是在每个页面中重复此代码的后端请求帖子，而是应该为此特定的API创建一个React Hook：
>

构建三个可重复使用的反应组件
// Login.js import Footer from "./Footer.js"; function Login() { return ( <Wrapper main={{...}} footer={<Footer />} /> ); } 
登录后复制
登录后复制
登录后复制
登录后复制
>现在，我们已经看到了一些
>创建可以在整个React应用程序中共享的新组件时的常见迹象，让我们将这些知识付诸实践并构建三个实用的演示。
1。布局组件 React通常用于构建复杂的Web应用程序。这意味着需要在React中开发大量页面，我怀疑应用程序的每个页面都有不同的布局。例如，由30页组成的Web应用程序通常使用少于五个不同的布局。因此，建立一个可以在许多不同页面中使用的灵活，可重复使用的布局至关重要。这将为您节省很多代码行，并因此有大量的时间。>
考虑以下反应功能组件：

这是一个典型的网页，它具有，a 和。如果还有30个这样的网页，您会很容易地厌倦了反复编写HTML标签并一遍又一遍地应用相同的样式。
>
>相反，您可以创建一个布局组件，该组件像props一样，接收
，和，如以下代码：：
// App.js import { useEffect } from 'react'; function App() { const handleKeydown = () => { alert('key is pressed.'); } useEffect(() => { document.addEventListener('keydown', handleKeydown); return () => { document.removeEventListener('keydown', handleKeydown); } }, []); return (...); } 
登录后复制
登录后复制
登录后复制
此组件不需要
和。因此，您可以将相同的布局用于页面，而不管它们包含标头还是页脚。
使用此布局组件，您可以将feed页面变成更复杂的代码块：>

>用于创建带有粘性元素的布局的Pro提示

// Button.js function Button() { return ( <button type="button" onClick={() => { alert('Hi!')}}> Click me! </button> ); }; 
登录后复制
登录后复制
登录后复制
许多开发人员倾向于使用位置：固定或位置：绝对是要将标头贴在视口顶部或页脚到底部的人时。但是，在布局的情况下，您应该尝试避免这种情况。
>
>由于布局的元素将是经过的道具的父元素，因此您希望将布局元素的样式保持尽可能简单 - 因此，通过，或。按预期。因此，我建议应用位置：固定和显示：flex tot to to布局的最外部元素，并设置溢出y：滚动到 element。
。
这是一个示例：
// useEventListener.js import { useEffect } from 'react'; export default function useKeydown() { const handleKeydown = () => { alert('key is pressed.'); } useEffect(() => { document.addEventListener('keydown', handleKeydown); return () => { document.removeEventListener('keydown', handleKeydown); } }, []); }; 
登录后复制
登录后复制
登录后复制

// Login.js import './common.css'; function Login() { return ( <div className='wrapper'> <main> {...} </main> <footer className='footer'> {...} </footer> </div> ); } 
登录后复制
登录后复制
登录后复制
登录后复制

现在，让我们在供稿页面上应用一些样式，看看您已经构建了什么：

// SignUp.js import './common.css'; function Signup() { return ( <div className='wrapper'> <main> {...} </main> <footer className='footer'> {...} </footer> </div> ); } 
登录后复制
登录后复制
登录后复制
登录后复制
>粘性标头和页脚演示

>这是行动中的代码。
>

这就是桌面屏幕上的外观。

这就是移动屏幕上的外观。

>此布局也按照iOS设备的意图工作！如果您不知道，iOS臭名昭著，因为它将与位置相关的意外问题带来了Web应用程序的开发。
2。事件听众

>通常，整个Web应用程序中使用了一次以上的事件侦听器。在这种情况下，创建自定义React Hook是一个好主意。让我们通过开发使用useCrollSaver Hook来了解如何执行此操作，该挂钩将用户设备的滚动位置保存在页面上 - 因此用户无需从顶部再次滚动。此挂钩对于列出了许多元素（例如帖子和评论）的网页将很有用。想象一下，没有滚动节省的情况下Facebook，Instagram和Twitter的供稿页面。
>让我们分解以下代码：>

>您可以看到usesCrollSaver Hook需要接收两个项目：ScrollableDiv，它必须是一个可滚动容器，就像上面布局中的容器一样，PageUrl将用作页面的标识符，因此您可以存储多个页面的滚动位置。

步骤1：保存滚动位置
// Login.js import Footer from "./Footer.js"; function Login() { return ( <Wrapper main={{...}} footer={<Footer />} /> ); } 
登录后复制
登录后复制
登录后复制
登录后复制

首先，您需要将“滚动”事件侦听器绑定到可滚动容器：

现在，每次用户滚动滚动时，都会运行称为handlescroll的功能。在此功能中，您应该利用LocalStorage或SessionStorage来保存滚动位置。不同之处在于，LocalStorage中的数据不会到期，而页面会话结束时会sessionStorage中的数据将被清除。您可以使用setItem（ID：String，value：string）将数据保存在任一存储中：>
// Login.js import './common.css'; function Login() { return ( <div className='wrapper'> <main> {...} </main> <footer className='footer'> {...} </footer> </div> ); } 
登录后复制
登录后复制
登录后复制
登录后复制

>步骤2：还原滚动位置

>用户回到网页时，应将用户直接定向到他或她以前的滚动位置 - 如果有的话。该位置数据当前保存在SessionStorage中，您需要将其取出并使用它。您可以使用GetItem（ID：String）从存储中获取数据。然后，您只需要将可滚动容器的滚动滚动式设置为此获得的值：>

// SignUp.js import './common.css'; function Signup() { return ( <div className='wrapper'> <main> {...} </main> <footer className='footer'> {...} </footer> </div> ); } 
登录后复制
登录后复制
登录后复制
登录后复制
>步骤3：在任何网页中使用uses crollsaver钩

>现在您已经完成了自定义挂钩，只要将两个必需的项目传递到钩子：scrollablediv和pageurl，就可以在任何网页中使用挂钩。让我们回到layout.js，然后在其中使用钩子。这将允许任何使用此布局来享受您的滚动节省的网页：>

scrollsaver demo
// Login.js import Footer from "./Footer.js"; function Login() { return ( <Wrapper main={{...}} footer={<Footer />} /> ); } 
登录后复制
登录后复制
登录后复制
登录后复制

>这是在沙箱中运行的代码。尝试滚动页面，然后在左下角和角落使用箭头重新加载应用程序。
>您会发现自己位于您关闭的位置！

3。查询/突变（特定于GraphQl）
，如果您喜欢像我一样将GraphQl与React一起使用，则可以通过为GraphQl查询或突变创建React Hook进一步减少代码库。
>
考虑以下示例以运行GraphQl Query GetPosts（）：>

如果从后端请求越来越多的属性，则您的GraphQL脚本将占用越来越多的空间。因此，您可以创建以下React Hook：
然后，您可以使用usegetPosts（）挂钩如下：

// App.js import { useEffect } from 'react'; function App() { const handleKeydown = () => { alert('key is pressed.'); } useEffect(() => { document.addEventListener('keydown', handleKeydown); return () => { document.removeEventListener('keydown', handleKeydown); } }, []); return (...); } 
登录后复制
登录后复制
登录后复制
结论
在本文中，您已经了解了可重复使用的反应组件的三个最常见指标和三种最受欢迎的用途案例。现在，当您可以创建可重复使用的反应组件时，您已经了解了
>的知识，并且
// Button.js function Button() { return ( <button type="button" onClick={() => { alert('Hi!')}}> Click me! </button> ); }; 
登录后复制
登录后复制
登录后复制
>如何轻松，专业地进行。您很快就会发现自己喜欢将代码的重构行纳入精致的可重复使用的反应组件或钩子中。使用这些重构技术，我们在Clay的开发团队能够将我们的代码库减少到可管理的尺寸。我也希望你也可以！
>

// useEventListener.js import { useEffect } from 'react'; export default function useKeydown() { const handleKeydown = () => { alert('key is pressed.'); } useEffect(() => { document.addEventListener('keydown', handleKeydown); return () => { document.removeEventListener('keydown', handleKeydown); } }, []); }; 
登录后复制
登录后复制
登录后复制
关于创建可重复使用的React组件的FAQ

react.js中的可重复使用的组件是什么？
React.js中的可重复使用的组件是基本的构建块，它封装了特定的用户界面（UI）功能，从而使以模块化和高效方式构建应用程序成为可能。这些组件旨在在整个应用程序甚至在不同的项目中都使用，提供了大大简化开发的代码可重复性。他们通过封装其逻辑和渲染来促进明显的关注点，以确保其内部实施细节在应用程序的其余部分中仍然隐藏了。这不仅可以增强代码组织和可维护性，而且还可以使开发人员通过共享和重复使用团队和项目的组件进行更协作的工作。
可重复使用的组件的主要优点之一就是他们保持在用户界面中一致性的能力。通过在应用程序的不同部分中使用相同的组件，您可以确保外观和感觉均匀，并遵守设计指南并创建更精致的用户体验。这些组件通过道具进行了参数化，从而可以自定义和适应各种用例。此参数化功能在一致性和灵活性之间提供了平衡，从而使开发人员根据每个应用程序功能或页面的特定要求来微调组件的行为和外观。
可重用性不仅节省了时间和精力，而且还简化了测试过程。隔离和封装的组件更易于测试，您可以创建单元测试以验证其正确性和功能。通过将可重复使用的组件纳入您的反应应用程序，您可以建立可维护，模块化和一致的代码库，最终提高开发效率并提高用户界面的整体质量。

REACT中可重复使用的组件的示例是什么？ REECT中可重复使用的组件的一个常见示例是“按钮”组件。按钮是用户界面的基本组成部分，在整个应用程序中都用于各种交互。在React中创建可重复使用的按钮组件可以使您在减少代码重复时保持一致的外观和行为。这是可重复使用的按钮组件的一个简单示例：

>从'react'';

const button =（{label，onclick，style}）=> { 🎜>
）;
};在此示例中，
>
导出默认按钮;

在此示例中，按钮组件被构造为功能组件，该功能组件采用三个关键道具：用于按钮上显示的文本的“标签”，“ onclick”，for for for。点击事件处理程序和可选的“样式”道具，用于自定义按钮的外观。该组件封装了按钮的HTML结构和行为，使其在整个应用程序中都可以轻松地重复使用，而无需重复代码。
>使用此按钮组件的用法显示其可重复使用性和灵活性。在父组件（在这种情况下为“应用程序”）中，您可以传递特定标签文本，单击事件处理功能和样式偏好，以创建具有不同目的和外观的不同按钮。通过使用此类可重复使用的组件，您可以维护统一的用户界面样式并提高代码可维护性。这些组件可以扩展到按钮之外，以包含更复杂的UI元素，例如输入字段，卡片或导航栏，从而产生模块化和可维护的React应用程序。可重复使用的组件不仅会加快开发的速度，而且会导致更加一致，用户友好的界面，该界面遵循设计指南和最佳实践。>
如何在React中创建可重复使用的组件？
在React.js中创建可重复使用的组件是构建模块化和可维护应用程序的基础实践。该过程从一个明确的计划开始，您可以在其中确定要封装在组件中的特定功能或用户界面（UI）元素。定义组件的目的后，您将在React项目中创建一个新的JavaScript/JSX文件。这是一个很好的做法，可以用大写字母开始命名文件，并遵守React的命名惯例。
在此新组件文件中，您定义了组件的行为和渲染逻辑。组件可以根据您的需求而具有功能性或基于班级的功能。在参数化组件时，您将道具接受为输入，这使您可以自定义其外观和行为。使用Proptypes或Typescript定义道具类型可确保类型的安全性和清晰度，从而更容易理解应如何使用组件。构建组件后，就可以在应用程序的其他部分中使用。您可以导入并合并它，并通过特定的道具为每个用例配置其行为。

结果是一个更有条理的代码库，可鼓励代码可重复使用并保持一致的UI样式。可重复使用的组件可以轻松地集成到应用程序的不同部分，提高开发效率，并为用户友好和视觉上一致的用户界面做出贡献。>
REACT中可重复使用的组件的好处是什么？ React中可重复使用的组件可重复使用的组件提供了许多好处，可显着增强开发过程和应用质量。它们通过将复杂的用户界面分解为较小的，独立的构件来促进模块化，从而使代码库更有条理和可维护。这些组件侧重于特定功能或UI元素，使开发人员能够独立管理和更新它们，从而降低了意外副作用的风险并简化了开发过程。可重复使用的组件的主要优点是它们的可重复使用性，可以节省时间和时间和时间。努力。您可以在应用程序的各个部分或不同项目中使用相同的组件，从而消除了重写相似代码的需求。这不仅加速了开发，还可以确保一个一致的用户界面。一致性是另一个关键好处。通过为特定的UI元素使用相同的组件，您可以保持统一的外观和行为，遵守设计指南并改善用户体验。他们接受道具，使开发人员能够对其行为和外观进行微调以适合不同的用例。此参数化增强了组件的灵活性和多功能性。当出现问题时，这些孤立的组件易于测试和调试，从而有效地解决问题。此外，通过在项目之间共享和重复组件，团队可以更有效地协作，保持统一的UI风格并确保代码一致性，这对于大规模和长期开发工作至关重要。总而言之，React简化开发中可重复使用的组件，鼓励代码可重复使用，保持UI一致性并提供可定制性，最终导致更有效，高质量的应用程序。
是什么使React中的可重复使用的组件？反应中精心设计的可重复使用的成分表现出多种关键特征。首先，可重复使用性是核心属性。这些组件应以在应用程序的不同部分甚至在单独的项目中使用。为了实现这一目标，必须高度参数化，使开发人员可以通过道具自定义其外观和行为。这种多功能性是使组件真正可重复使用的基本方面。
封装同样重要。可重复使用的组件应封装其内部逻辑和渲染，从而将实现详细信息从应用程序的其余部分中屏蔽。这种关注点的分离导致更清洁，更模块化的代码并简化集成。
模块化是另一个关键属性。良好的可重复使用的组件应该具有单一的目的，重点是特定功能或特定的UI元素。这种模块化设计增强了代码可维护性和调试效率。此外，易于测试至关重要。

最终，这些组件应保持清晰的API，指定他们接受的道具及其预期目的。这种清晰度可帮助其他开发人员了解如何有效使用组件。当将相同的组件用于特定的UI元素时，通过一致的用户界面做出贡献，它们可以确保具有凝聚力和用户友好的应用程序。从本质上讲，一个良好的可重复使用组件是可重新配置的，封装的，模块化的，易于测试的，并有助于代码可维护性和UI一致性。
>