一、专栏介绍 🌍🌍
欢迎加入本专栏!本专栏将引领您快速上手React,让我们一起放弃放弃的念头,开始学习之旅吧!我们将从搭建React项目开始,逐步深入讲解最核心的hooks,以及React路由、请求、组件封装以及UI(Ant Design)框架的使用。让我们一起掌握React,开启前端开发的全新篇章!
二、什么是自定义组件 🌎🌎
自定义组件是指根据应用需求,自定义的组件。它们可以是有状态的或无状态的,可以接受props并返回JSX或null,并且可以包含生命周期方法、refs、context等等。 自定义组件在React应用中非常常见,因为React的核心思想就是组件化。每一个React页面都是由一个或多个组件构成,组件是构建React应用程序的基石。它们可以封装可重用的UI组件,使代码更加模块化和可维护。 自定义组件可以有很多用途。例如,它们可以创建可重用的UI组件,如按钮、表单、布局等。同时,它们也可以用于封装复杂的业务逻辑,将复杂的业务逻辑抽象为可重用的组件,提高代码的可维护性和可重用性。此外,自定义组件还可以用于实现AOP(面向切面编程),将通用逻辑(如认证、日志)封装到单独的组件中,避免在各个角落重复编写代码。 总之,自定义组件是React中非常重要的概念,它们可以帮助开发者更好地组织和维护代码,提高开发效率和质量。
三、组件需求 🌏🌏
根据需求,需要定义一个组件,该组件根据viewMode属性的不同显示不同的状态。当viewMode为edit时,显示一个标题和输入框,表示编辑状态;当viewMode为view时,显示一个标题和一个内容,表示查看状态。此外,该组件还需要集成原生的input输入框,并具有自己的属性。
四、编写组件源码 🔮🔮
新建文件src/components/CustomInput.tsx
自定义组件首字母一定要大写并且使用驼峰命名方式
InputHTMLAttributes<HTMLInputElement>为input框原生的属性。
import React, { InputHTMLAttributes } from 'react';
import './CustomInput.scss';const CustomInput: React.FC<InputHTMLAttributes<HTMLInputElement> & {label: string | number; // 这里的意思label属性可以是一个字符串也可以是一个数字。viewMode?: 'view' | 'edit'; // 这里的意思是view属性只能是view或者edit字符串}
> = ({ label, viewMode = 'edit', ...props }) => {// view = 'edit' 表示默认值就是editif (viewMode === 'edit') {return (<><div className={'ts-custom-input edit'}><span>{label}:</span><input {...props} /></div></>);}return (<><div className={'ts-custom-input view'}><span className={'title'}>{label}:</span><span className={'content'}>{props.defaultValue}</span></div></>);
};export default CustomInput;
新建文件src/components/CustomInput.scss
.ts-custom-input {width: 100%;height: 26px;line-height: 26px;&.view {.title {color: black;}.content {color: #696767;}}
}
使用组件
import React from 'react';
import CustomInput from './components/CustomInput';function App() {return (<div className="App"><CustomInputlabel="姓名"placeholder="请输入值"viewMode={'edit'}defaultValue={'我是默认值'}onChange={(e) => {console.log('👉👉👉-----------------输入值发生了变化,现在是:', e.target.value);}}/><CustomInput label="姓名" viewMode={'view'} defaultValue={'我是默认值'} /></div>);
}export default App;
效果
五、总结 💿💿
React中自定义组件非常重要、很有必要花时间好好的学学。
自定义组件可以将UI切分成一些独立的、可复用的部件,这样只需专注于构建每一个单独的部件,从而在多个项目中重用代码。这提高了开发效率,降低了维护成本。
组件化开发降低了系统各个功能之间的耦合性,提高了功能内部的聚合性。这使得代码更容易理解和修改,降低了开发复杂度。
自定义组件遵循一定的命名和规范,使得代码更加清晰和易于维护。当需要修改或扩展功能时,只需找到对应的组件进行修改,而不需要在整个项目中搜索和修改相关代码。
自定义组件使得团队成员可以更容易地分工合作,每人负责一个或多个组件的开发和维护。这提高了团队的协作效率,降低了沟通成本。
自定义组件可以接受不同的属性和参数,根据需求进行定制。这使得组件具有很高的灵活性,可以适应各种场景和需求。
自定义组件可以独立地进行测试和调试,这使得问题定位和修复更加容易。同时,组件的独立性也使得自动化测试更加容易实现。
总之,React中自定义组件的重要性在于它们提供了代码重用、降低耦合性、提升可维护性、更好的团队协作、灵活性和易于测试和调试等好处,从而提高了开发效率和质量。
👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇