挑战：编写一个简单的 React 组件来跟踪按钮被单击的次数。每次按下按钮，数字都会增加。
任务：使用 useState 钩子实现此操作。
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
};
export default Counter;
为什么这很重要：这是 React 中状态管理最基本的示例之一。它演示了如何使用挂钩轻松存储、更新和显示动态值。
专业提示：如何添加“重置”按钮将计数设置回 0？试试吧！
挑战：实现一个包含两个输入字段（姓名和电子邮件）的表单。这些值应该随着用户输入而动态更新，并且当提交表单时，输入的数据应该出现在屏幕上。
import React, { useState } from 'react';
const UserForm = () => {
const [formData, setFormData] = useState({
name: '',
email: ''
});
const handleChange = (e) => {
const { name, value } = e.target;
setFormData((prevData) => ({ ...prevData, [name]: value }));
};
return (
<form>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
placeholder="Name"
/>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
placeholder="Email"
/>
<button type="submit">Submit</button>
</form>
);
};
export default UserForm;
为什么这很重要：在 React 中处理表单输入是一项关键技能，特别是对于需要用户交互的应用程序，例如登录表单或搜索字段。
专业提示：在允许表单提交之前，您如何处理验证以确保电子邮件格式正确？
挑战：创建一个待办事项列表，用户可以通过在输入字段中键入内容并按“添加”来添加任务。每个任务都应该有一个“删除”按钮来删除任务。
import React, { useState } from 'react';
const TodoList = () => {
const [todos, setTodos] = useState([]);
const [newTodo, setNewTodo] = useState('');
const addTodo = () => {
if (newTodo.trim()) {
setTodos([...todos, newTodo]);
setNewTodo('');
}
};
const removeTodo = (index) => {
setTodos(todos.filter((_, i) => i !== index));
};
return (
<div>
<input
type="text"
value={newTodo}
onChange={(e) => setNewTodo(e.target.value)}
placeholder="Add a new task"
/>
<button onClick={addTodo}>Add</button>
<ul>
{todos.map((todo, index) => (
<li key={index}>
{todo} <button onClick={() => removeTodo(index)}>Remove</button>
</li>
))}
</ul>
</div>
);
};
export default TodoList;
为什么这很重要：管理列表和状态更新是 React 应用程序中的一项常见任务，特别是对于构建动态用户界面。
专业提示：如果您尝试添加空的待办事项会发生什么？你会如何防止这种情况发生？
挑战：构建一个搜索输入，在用户停止输入后等待 500 毫秒，然后再执行搜索（通过更新状态来模拟）。为此使用 useEffect。
import React, { useState, useEffect } from 'react';
const Search = () => {
const [query, setQuery] = useState('');
const [searchTerm, setSearchTerm] = useState('');
useEffect(() => {
const timeoutId = setTimeout(() => {
setSearchTerm(query);
}, 500);
return () => clearTimeout(timeoutId);
}, [query]);
return (
<div>
<input
type="text"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Search..."
/>
<p>Results for: {searchTerm}</p>
</div>
);
};
export default Search;
为什么这很重要：去抖动在搜索字段中至关重要，可以防止不必要的 API 调用，从而提高性能和用户体验。
专业提示：如何通过在用户键入时添加加载指示器来改进这一点？
挑战：创建一个根据按钮切换显示“Hello”或“Goodbye”的组件。每次单击按钮时，消息都会切换。
import React, { useState } from 'react';
const ToggleMessage = () => {
const [showHello, setShowHello] = useState(true);
return (
<div>
<p>{showHello ? 'Hello' : 'Goodbye'}</p>
<button onClick={() => setShowHello(!showHello)}>
Toggle Message
</button>
</div>
);
};
export default ToggleMessage;
为什么这很重要：条件渲染是 React 强大功能的核心部分，这一挑战有助于巩固如何根据状态更改显示内容。
专业提示：您如何修改它，使其以蓝色显示“Hello”，以红色显示“Goodbye”？
好奇者的奖励挑战：
对于每个组件，您将如何重构逻辑以分离关注点并提高代码的可重用性？考虑在适当的情况下创建自定义挂钩！
以上是面试时您必须了解的 eact.js 顶级编码挑战！的详细内容。更多信息请关注PHP中文网其他相关文章！
