咱前端人下班回到家，累得只想瘫沙发，但心里又惦记着提升技术，毕竟面试压力摆在那儿呢。别愁！今天咱就来点干货，3 个超实用的 React 技巧，既能解决项目里的常见问题，又能让你在面试时自信满满，关键是学起来不费劲，躺着都能看懂！

一、条件渲染不纠结，这招让代码更清爽

平时开发中，判断用户登录状态显示不同内容，或者根据数据加载状态展示加载中界面，这些场景可太常见了。要是条件渲染写得乱糟糟，不仅自己看着难受，面试官也会皱眉头。

实战技巧：多种条件渲染方式灵活用

// 方式一：普通if语句，适合逻辑稍复杂的情况
function UserInfo({ isLogin, userData, loading }) {
let content;
if (loading) {
return <div>数据加载中...</div>; // 加载时显示 loading 提示
}
if (isLogin) {
content = (
<div>
<h3>欢迎你，{userData.name}</h3>
<p>邮箱：{userData.email}</p>
</div>
);
} else {
content = <p><a href="/login">请登录</a>后查看个人信息</p>; // 未登录时显示登录链接
}
return content;
}
// 方式二：三目运算符，简洁处理简单条件
function Button({ isDisabled, onClick }) {
return (
<button
onClick={onClick}
disabled={isDisabled}
style={{ backgroundColor: isDisabled ? '#ccc' : '#4a90e2' }} // 根据禁用状态改变按钮颜色
>
{isDisabled ? '按钮禁用' : '立即点击'} // 根据禁用状态显示不同文本
</button>
);
}
// 方式三：&& 短路逻辑，适合条件为真时渲染元素
function Message({ error }) {
return (
<div>
<h2>操作结果</h2>
{error && <p style={{ color: 'red' }}>{error.message}</p>} // 有错误时显示错误信息
</div>
);
}

高频面试题：React 里条件渲染有哪些常见方法？

面试官问这个，咱就把上面几种方式清晰说出来。可以这样答：平常最常用的就是普通 if 语句，逻辑复杂点也能处理得明明白白；简单点的情况，用三目运算符很简洁，一眼就能看清楚条件和对应渲染的内容；还有 && 短路逻辑，适合条件为真时才渲染某个元素，比如加载失败显示错误信息这种场景就很合适。这几种方法根据具体情况选，代码就能既清晰又高效。

二、列表渲染别踩坑，key 值用法要牢记

列表渲染在 React 里太普遍了，渲染用户列表、商品列表等等，可要是 key 值用不好，页面更新可能出问题，面试官也爱揪着这个点问。

实战技巧：正确使用 key 值，提升渲染效率

function TodoList({ todos, onDelete }) {
return (
<ul>
{todos.map((todo) => (
<li key={todo.id} className="todo-item"> // 用唯一的id作为key，确保列表项的唯一性
<span>{todo.text}</span>
<button onClick={() => onDelete(todo.id)}>删除</button> // 点击按钮删除对应todo
</li>
))}
</ul>
);
}
// 注意！千万别用index作为key，来看反例
function WrongTodoList({ todos, onDelete }) {
return (
<ul>
{todos.map((todo, index) => ( // 用index作为key，当列表顺序变化或删除项时，容易导致组件状态混乱
<li key={index} className="todo-item">
<span>{todo.text}</span>
<button onClick={() => onDelete(todo.id)}>删除</button>
</li>
))}
</ul>
);
}

高频面试题：为什么不建议用 index 作为列表的 key？

要是面试官问这个，咱就结合例子说。可以这样答：用 index 当 key，当列表里的项顺序变化或者删除某一项时，后面项的 index 都会变，React 就没办法准确识别每个列表项，可能会复用错误的组件实例，导致页面状态混乱，比如输入框的值错乱、组件重新渲染异常等问题。所以一定要用列表项自带的唯一标识，像 id 这种，这样才能让 React 高效准确地更新 DOM。

三、自定义 Hook 自己写，复用逻辑超轻松

项目里有时候会有重复的状态逻辑，比如表单验证、数据请求，这时候自定义 Hook 就派上大用场了，能让代码更简洁，复用性更强，面试时说到这个，绝对加分。

实战技巧：写个表单验证的自定义 Hook

// 自定义Hook：处理表单验证
function useFormValidation(initialValues, validationRules) {
const [values, setValues] = useState(initialValues); // 存储表单值
const [errors, setErrors] = useState({}); // 存储验证错误信息
const handleChange = (e) => {
setValues({
...values,
[e.target.name]: e.target.value // 更新表单对应字段的值
});
};
const handleBlur = (e) => {
const { name, value } = e.target;
const newErrors = {};
if (validationRules[name]) {
// 遍历验证规则，检查当前字段是否符合规则
validationRules[name].forEach((rule) => {
switch (rule.type) {
case 'required':
if (!value.trim()) {
newErrors[name] = rule.message || '该字段为必填项'; // 必填项验证
break;
}
case 'email':
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
newErrors[name] = rule.message || '邮箱格式不正确'; // 邮箱格式验证
}
// 可根据需求添加更多验证类型
}
});
}
setErrors(newErrors); // 更新错误信息
};
const handleSubmit = (e) => {
e.preventDefault();
// 提交表单前进行全量验证
const newErrors = {};
Object.keys(validationRules).forEach((field) => {
validationRules[field].forEach((rule) => {
const value = values[field];
if (rule.type === 'required' && !value.trim()) {
newErrors[field] = rule.message || '该字段为必填项';
} else if (rule.type === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
newErrors[field] = rule.message || '邮箱格式不正确';
}
});
});
setErrors(newErrors);
if (Object.keys(newErrors).length === 0) {
// 没有错误时执行提交逻辑
console.log('表单提交成功', values);
}
};
return { values, errors, handleChange, handleBlur, handleSubmit }; // 返回表单相关的状态和方法
}
// 使用示例
function SignUpForm() {
const validationRules = {
username: [{ type: 'required', message: '用户名必填' }],
email: [{ type: 'required', message: '邮箱必填' }, { type: 'email', message: '邮箱格式错误' }]
};
const { values, errors, handleChange, handleBlur, handleSubmit } = useFormValidation(
{ username: '', email: '' },
validationRules
);
return (
<form onSubmit={handleSubmit}>
<div>
<label>用户名：</label>
<input
name="username"
value={values.username}
onChange={handleChange}
onBlur={handleBlur}
/>
{errors.username && <span style={{ color: 'red' }}>{errors.username}</span>} // 显示用户名错误信息
</div>
<div>
<label>邮箱：</label>
<input
name="email"
value={values.email}
onChange={handleChange}
onBlur={handleBlur}
/>
{errors.email && <span style={{ color: 'red' }}>{errors.email}</span>} // 显示邮箱错误信息
</div>
<button type="submit">提交</button>
</form>
);
}

高频面试题：说说自定义 Hook 的优势和使用场景

面试官问这个，咱就结合实际项目说。可以这样答：自定义 Hook 最大的优势就是能复用组件之间的状态逻辑，避免代码重复，让组件更简洁。像表单验证、数据请求、窗口尺寸监听这些场景，都可以把相关逻辑封装成自定义 Hook，不同组件需要的时候直接调用，不用重复写代码，维护起来也方便。而且它还能让组件的逻辑更清晰，可读性更强，提升开发效率。

现在咱把这几个技巧和面试题都弄明白了，是不是感觉心里更有底了？既能在项目里写出更漂亮的代码，面试时也能对答如流。

有人觉得 React 类组件已经过时了，现在都该用函数组件加 Hook；可也有人觉得类组件的生命周期钩子更直观，复杂逻辑用类组件更好管理。你更倾向于哪种写法呢？快来评论区说说你的看法，一起讨论讨论！觉得文章有用的，别忘了点赞关注，后续还有更多实用的前端知识分享哦！