react 最大的优势之一是其基于组件的架构，它允许开发人员构建模块化和可重用的 ui 部分。可重用的组件不仅可以节省时间，还可以确保整个应用程序的一致性。在这篇博文中，我们将探索在 react 中构建可重用组件的最佳实践，并提供实用的编码示例。
为什么要构建可重用组件？
在深入研究代码之前，我们先讨论一下为什么可重用组件很重要：
- – 一致性：重用组件可确保整个应用程序的外观和感觉一致。
- – 可维护性：隔离组件中的功能使您的代码更易于管理和更新。
- – 效率：构建可重用组件可以节省开发时间，因为您可以利用现有组件，而不是从头开始创建新组件。
1. 从简单的组件开始
构建可重用组件的第一步是识别应用程序中经常使用的 ui 元素。首先创建简单的、独立的组件。
示例：按钮组件
import react from 'react';
import proptypes from 'prop-types';
import './button.<a style="color:#f60; text-decoration:underline;" href="https://www.codesou.cn/" target="_blank">css</a>';
const button = ({ label, onclick, type = 'button' }) => (
<button classname="btn" onclick="{onclick}" type="{type}">
{label}
</button>
);
button.proptypes = {
label: proptypes.string.isrequired,
onclick: proptypes.func,
type: proptypes.oneof(['button', 'submit', 'reset']),
};
export default button;
2. 使组件可配置
为了使组件真正可重用，它们应该可以通过 props 进行配置。这允许您自定义组件的外观和行为，而无需修改其内部代码。
示例：可配置按钮组件
import react from 'react';
import proptypes from 'prop-types';
import './button.css';
const button = ({ label, onclick, type = 'button', classname = '', disabled = false }) => (
<button classname="{`btn" onclick="{onclick}" type="{type}" disabled>
{label}
</button>
);
button.proptypes = {
label: proptypes.string.isrequired,
onclick: proptypes.func,
type: proptypes.oneof(['button', 'submit', 'reset']),
classname: proptypes.string,
disabled: proptypes.bool,
};
export default button;
这里，button 组件有额外的属性，如 classname 和disabled，使其更加灵活，能够适应不同的用例。
3. 对更复杂的组件使用组合
组合允许您通过组合更简单的组件来构建复杂的组件。这种方法遵循 react 将 ui 分解为可管理的小块的理念。
示例：卡片组件
import react from 'react';
import proptypes from 'prop-types';
import './card.css';
const card = ({ title, content, footer }) => (
<div classname="card">
<div classname="card-header">{title}</div>
<div classname="card-body">{content}</div>
<div classname="card-footer">{footer}</div>
</div>
);
card.proptypes = {
title: proptypes.node.isrequired,
content: proptypes.node.isrequired,
footer: proptypes.node,
};
export default card;
在此示例中，card 组件由 title、content 和 footer props 组成，允许您传递任何 react 元素来创建自定义卡片布局。
4. 利用孩子获得更大的灵活性
children 属性允许您将组件和元素作为子级传递，从而为可重用组件的使用方式提供更大的灵活性。
示例：模态组件
import react from 'react';
import proptypes from 'prop-types';
import './modal.css';
const modal = ({ isopen, onclose, children }) => {
if (!isopen) return null;
return (
<div classname="modal">
<div classname="modal-content">
<button classname="modal-close" onclick="{onclose}">x</button>
{children}
</div>
</div>
);
};
modal.proptypes = {
isopen: proptypes.bool.isrequired,
onclose: proptypes.func.isrequired,
children: proptypes.node,
};
export default modal;
模态组件使用 children 属性来渲染传递给它的任何内容，使其成为一个高度灵活且可重用的用于显示模态对话框的组件。
5.有效地设计组件的样式
设计可重用组件的样式可能具有挑战性，但是使用 css-in-js 库（例如 styled-components 或 emotion）可以帮助以模块化方式管理样式。
示例：样式按钮组件
import React from 'react';
import styled from 'styled-components';
const StyledButton = styled.button`
background-color: ${(props) => (props.primary ? 'blue' : 'gray')};
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
&:hover {
background-color: ${(props) => (props.primary ? 'darkblue' : 'darkgray')};
}
`;
const Button = ({ label, primary, onClick }) => (
<styledbutton primary="{primary}" onclick="{onClick}">
{label}
</styledbutton>
);
export default Button;
在此示例中，styledbutton 组件使用 styled-components 来应用基于主要 prop 的条件样式，从而提供了一种干净且模块化的样式设置方法。
结论
在 react 中构建可重用组件是创建可维护、一致且高效的应用程序的强大方法。通过从简单的组件开始，使它们可配置，利用组合和子组件，并使用有效的样式技术，您可以创建一个可重用组件库，这将节省您在开发过程中的时间和精力。此外，使用 storybook 等工具记录您的组件可确保它们易于其他人理解和使用。
快乐编码！
