【React + TypeScript 实现高性能多列多选组件】

引言

在现代Web应用中，多选组件是常见的UI元素，尤其是在需要用户从多个选项中进行选择的场景。本文将介绍如何使用React和TypeScript实现一个功能完整、性能优化的多列多选组件，支持"Select All"功能和垂直填充的多列布局。

组件功能介绍

本文实现的MultiCheck组件具有以下功能：

基础多选功能：支持用户选择多个选项
"Select All"功能：一键全选/取消全选所有选项
多列布局：支持垂直填充的多列排列
受控组件设计：支持外部控制选中状态
性能优化：使用React Hooks优化渲染性能
类型安全：完整的TypeScript类型定义

技术栈

React 18：使用函数组件和Hooks
TypeScript：提供类型安全
CSS Grid：实现灵活的多列布局
React Hooks：useState,useEffect,useCallback

核心实现

1. 类型定义

首先，我们定义组件的类型，确保类型安全：

exporttypeOption={label:string,value:string}typeProps={label?:string,options:Option[],columns?:number,values?:string[]onChange?:(options:Option[])=>void,}

2. 状态管理

使用useState钩子管理选中状态，并通过useEffect实现与外部状态的同步：

const[selectedValues,setSelectedValues]=useState<string[]>(values);// 监听外部values变化，实现双向更新useEffect(()=>{setSelectedValues(values);},[values]);

3. 全选功能实现

实现"Select All"功能需要以下逻辑：

// 判断是否全选constisAllSelected=options.length>0&&selectedValues.length===options.length;// 处理全选事件consthandleSelectAllChange=useCallback(()=>{constnewSelected=isAllSelected?[]:options.map(opt=>opt.value);setSelectedValues(newSelected);if(onChange){constselectedOptions=isAllSelected?[]:[...options];onChange(selectedOptions);}},[options,isAllSelected,onChange]);

4. 多列垂直填充布局

使用CSS Grid实现垂直填充的多列布局：

<div className='div-option-container'style={{display:'grid',gridTemplateColumns:`repeat(${Math.min(columns,options.length+1)}, auto)`,gridTemplateRows:`repeat(${Math.ceil((options.length+1)/columns)}, auto)`,gridAutoFlow:"column",// 关键：实现垂直填充width:'100%'}}>{/* 选项内容 */}</div>

5. 性能优化

使用useCallback缓存事件处理函数，避免不必要的重新渲染：

consthandleOptionChange=useCallback((value:string)=>{setSelectedValues(prev=>{constnewSelected=prev.includes(value)?prev.filter(v=>v!==value):[...prev,value];if(onChange){constselectedOptions=options.filter(opt=>newSelected.includes(opt.value));onChange(selectedOptions);}returnnewSelected;});},[options,onChange]);

完整组件代码

import'./MultiCheck.css';importReact,{useState,useEffect,useCallback}from'react';exporttypeOption={label:string,value:string}typeProps={label?:string,options:Option[],columns?:number,values?:string[]onChange?:(options:Option[])=>void,}constMultiCheck:React.FunctionComponent<Props>=({label,options,columns=1,values=[],onChange}):JSX.Element=>{const[selectedValues,setSelectedValues]=useState<string[]>(values);useEffect(()=>{setSelectedValues(values);},[values]);constisAllSelected=options.length>0&&selectedValues.length===options.length;consthandleSelectAllChange=useCallback(()=>{constnewSelected=isAllSelected?[]:options.map(opt=>opt.value);setSelectedValues(newSelected);if(onChange){constselectedOptions=isAllSelected?[]:[...options];onChange(selectedOptions);}},[options,isAllSelected,onChange]);consthandleOptionChange=useCallback((value:string)=>{setSelectedValues(prev=>{constnewSelected=prev.includes(value)?prev.filter(v=>v!==value):[...prev,value];if(onChange){constselectedOptions=options.filter(opt=>newSelected.includes(opt.value));onChange(selectedOptions);}returnnewSelected;});},[options,onChange]);return(<div className='div-container'style={{width:`${200*columns}px`}}>{label&&<div className='div-label-container'>{label}</div>}<div className='div-option-container'style={{display:'grid',gridTemplateColumns:`repeat(${Math.min(columns,options.length+1)}, auto)`,gridTemplateRows:`repeat(${Math.ceil((options.length+1)/columns)}, auto)`,gridAutoFlow:"column",width:'100%'}}><div className='div-option'><input type="checkbox"id="select-all"checked={isAllSelected}onChange={handleSelectAllChange}/><label htmlFor="select-all">Select All</label></div>{options.map(option=>(<div key={option.value}className='div-option'><input type="checkbox"id={`option-${option.value}`}checked={selectedValues.includes(option.value)}onChange={()=>handleOptionChange(option.value)}className='div-option-checkbox'/><label htmlFor={`option-${option.value}`}>{option.label}</label></div>))}</div></div>)}exportdefaultMultiCheck;

使用示例

importReactfrom'react';importMultiCheck,{Option}from'./MultiCheck';constApp:React.FC=()=>{constoptions:Option[]=[{label:'选项1',value:'1'},{label:'选项2',value:'2'},{label:'选项3',value:'3'},{label:'选项4',value:'4'},{label:'选项5',value:'5'},{label:'选项6',value:'6'},];consthandleChange=(selectedOptions:Option[])=>{console.log('选中的选项:',selectedOptions);};return(<div className="App"><MultiCheck label="多选组件示例"options={options}columns={2}values={['2','4']}onChange={handleChange}/></div>);};exportdefaultApp;