面试时您必须了解的 eact.js 顶级编码挑战！

1. 使用 React Hooks 构建计数器

挑战：编写一个简单的 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？试试吧！

---

2. 创建一个表单来捕获用户输入

挑战：实现一个包含两个输入字段（姓名和电子邮件）的表单。这些值应该随着用户输入而动态更新，并且当提交表单时，输入的数据应该出现在屏幕上。

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 中处理表单输入是一项关键技能，特别是对于需要用户交互的应用程序，例如登录表单或搜索字段。

专业提示：在允许表单提交之前，您如何处理验证以确保电子邮件格式正确？

---

3. 使用添加和删除功能构建待办事项列表

挑战：创建一个待办事项列表，用户可以通过在输入字段中键入内容并按“添加”来添加任务。每个任务都应该有一个“删除”按钮来删除任务。

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 应用程序中的一项常见任务，特别是对于构建动态用户界面。

专业提示：如果您尝试添加空的待办事项会发生什么？你会如何防止这种情况发生？

---

4. 在搜索输入中实现去抖

挑战：构建一个搜索输入，在用户停止输入后等待 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 调用，从而提高性能和用户体验。

专业提示：如何通过在用户键入时添加加载指示器来改进这一点？

---

5. 在“你好”和“再见”消息之间切换

挑战：创建一个根据按钮切换显示“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中文网其他相关文章！