- 正确答案：使用React编写一个可复用的搜索框组件，需支持输入实时搜索、防抖处理、空值校验、回车触发搜索、清空功能，并可根据业务需求灵活扩展（如支持下拉建议、高亮关键词等）。 - 解答思路： 1. 使用函数式组件配合React Hooks（useState, useEffect, useRef）实现状态管理与副作用控制。 2. 维护输入值（value）、是否显示清空按钮（showClear）等状态。 3. 实现输入事件处理函数，更新状态并根据配置决定是否立即触发搜索或仅在回车时触发。 4. 添加防抖逻辑，避免频繁请求后端接口。 5. 提供回调函数（如onSearch, onChange）供父组件监听用户行为。 6. 支持可选的下拉建议列表和点击建议项自动填充功能。 7. 可进一步封装为UI库中的通用组件，支持样式定制与无障碍访问。 - 深度知识讲解：考察点包括： 1. React基础：组件生命周期（函数组件+Hook）、状态管理、事件系统。 2. 闭包与防抖机制：利用useRef保存定时器ID，防止重复请求。防抖是前端性能优化的重要手段，在高频触发场景（如resize、scroll、input）中减少无效计算。 3. 引用类型与响应式更新：useRef返回可变对象，其.current属性在组件整个生命周期中保持不变，适合存储不触发重渲染的数据（如timerId）。 4. 表单受控组件：通过value + onChange实现输入框的受控模式，确保React state与DOM同步。 5. 合成事件与原生事件区别：React事件是合成事件，异步环境中需注意event的池机制（event.persist()），但在现代React中已自动处理。 6. 函数节流 vs 防抖： - 防抖（debounce）：n秒内只执行最后一次调用，适用于搜索框、窗口大小调整。 - 节流（throttle）：固定时间间隔执行一次，适用于滚动加载。 7. 可访问性（a11y）：添加aria-label、role="search"、placeholder等属性提升无障碍体验。 8. 性能优化：避免不必要的重渲染（使用React.memo、useCallback）。 - 代码示例： ``` import React, { useState, useEffect, useRef } from 'react'; // 搜索框组件 function SearchBox({ placeholder = '请输入关键词搜索...', onSearch, // 回车或点击搜索图标时触发 onChange, // 输入内容变化时触发（可选） debounceDelay = 300, // 防抖延迟时间 suggestions = [], // 下拉建议列表 onSuggestionClick, // 点击建议项回调 allowClear = true, // 是否允许清空 autoFocus = false, defaultValue = '' }) { const [value, setValue] = useState(defaultValue); const [showSuggestions, setShowSuggestions] = useState(false); const inputRef = useRef(null); const timerRef = useRef(null); // 清除定时器 useEffect(() => { return () => { if (timerRef.current) clearTimeout(timerRef.current); }; }, []); // 防抖逻辑封装 const debouncedSearch = (val) => { if (timerRef.current) clearTimeout(timerRef.current); timerRef.current = setTimeout(() => { if (val && onSearch) { onSearch(val.trim()); } }, debounceDelay); }; const handleChange = (e) => { const val = e.target.value; setValue(val); // 实时反馈给父组件 if (onChange) { onChange(val); } // 触发防抖搜索（如果未设置onSearch则不触发） if (onSearch) { debouncedSearch(val); } // 控制建议框显示 if (suggestions.length > 0) { setShowSuggestions(val.length > 0); } }; const handleKeyDown = (e) => { if (e.key === 'Enter') { e.preventDefault(); if (value.trim() && onSearch) { onSearch(value.trim()); } } }; const handleClear = () => { setValue(''); if (onChange) onChange(''); if (onSearch) onSearch(''); // 可选：清空也触发搜索 if (inputRef.current) inputRef.current.focus(); setShowSuggestions(false); }; const handleSuggestionClick = (item) => { setValue(item.label || item); if (onSearch) onSearch(item.label || item); if (onSuggestionClick) onSuggestionClick(item); setShowSuggestions(false); if (inputRef.current) inputRef.current.focus(); }; const showClearButton = allowClear && value; return (

{showClearButton && ( )}

{/* 建议下拉列表 */} {showSuggestions && suggestions.length > 0 && (

handleSuggestionClick(item)} style={{ padding: '8px 12px', cursor: 'pointer', borderBottom: '1px solid #f0f0f0' }} onMouseDown={(e) => e.preventDefault()} // 防止点击失焦导致菜单消失 > {label}

)} {/* 点击外部关闭建议框 */} {showSuggestions && (

setShowSuggestions(false)} /> )}

); } // 使用示例 function App() { const [results, setResults] = useState([]); const [suggestions, setSuggestions] = useState([ { label: 'React 教程' }, { label: 'Vue 入门' }, { label: 'Node.js 实战' } ]); const handleSearch = (query) => { console.log('搜索:', query); // 模拟请求 setResults(query ? [`结果1: ${query}`, `结果2: ${query}`] : []); }; const handleSuggestionClick = (item) => { console.log('选择了建议:', item); }; return (

搜索框示例

搜索结果：

{results.map((r, i) => (

{r}

))}

); } export default SearchBox; ``` - 扩展知识点： 1. 如果需要支持高亮匹配关键词，可在建议项中使用正则替换： ```js function highlightText(text, keyword) { if (!keyword) return text; const regex = new RegExp(`(${keyword})`, 'gi'); return text.replace(regex, '$1'); } ``` 然后用dangerouslySetInnerHTML渲染（注意XSS风险过滤）。 2. 可集成第三方库如Downshift或React-Select实现更复杂的下拉交互。 3. 在大型应用中，可将搜索状态抽离到Redux或Context中统一管理。 4. 支持快捷键（如Ctrl/Cmd + K聚焦搜索框）提升用户体验。 5. SSR兼容性：避免在服务端渲染时依赖window对象（如document监听）。该组件具备良好的封装性、可配置性和可维护性，符合企业级项目对UI组件的要求。

懂车帝前端企业效率二面

全站热榜

创作者周榜