正文

揭秘 React 面试时必备的项目案例，新手快速掌握最佳实战技巧

/0 浏览量
0625

在 React 面试中，项目案例往往能展现你的实际能力和技术水平。作为一名 React 开发者，掌握一些优秀的项目案例，不仅能提升你的面试成功率，还能让你在职场中更具竞争力。本文将为你揭秘 React 面试时必备的项目案例，帮助新手快速掌握最佳实战技巧。

一、React 基础项目案例

1. Todo List

项目简介：一个简单的待办事项列表，用于展示 React 的基本用法，如组件化、状态管理、事件处理等。

实战技巧：

  • 使用 useState 钩子管理待办事项列表状态。
  • 使用 useEffect 钩子处理组件加载、更新和卸载等生命周期事件。
  • 使用 useRef 钩子获取 DOM 元素。
import React, { useState, useEffect, useRef } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const inputRef = useRef();

  useEffect(() => {
    // 组件加载、更新和卸载等生命周期事件
  }, []);

  const addTodo = () => {
    const todo = inputRef.current.value;
    if (todo.trim() !== '') {
      setTodos([...todos, todo]);
      inputRef.current.value = '';
    }
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={addTodo}>Add Todo</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

2. React Router 路由案例

项目简介：使用 React Router 实现一个单页面应用（SPA），包含多个页面和路由。

实战技巧：

  • 使用 react-router-dom 库中的 Route 和 Switch 组件定义路由。
  • 使用 Link 组件实现页面跳转。
  • 使用 Redirect 组件处理重定向。
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link, Redirect } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/">
            <Home />
          </Route>
          <Redirect from="*" to="/" />
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

export default App;

二、React 进阶项目案例

1. React Hooks 实战

项目简介：使用 React Hooks 实现一个可搜索、可分页的列表组件。

实战技巧：

  • 使用 useState 钩子管理列表数据和搜索关键词状态。
  • 使用 useEffect 钩子处理异步请求和组件卸载。
  • 使用 useCallback 钩子优化组件性能。
import React, { useState, useEffect, useCallback } from 'react';

function SearchList() {
  const [data, setData] = useState([]);
  const [keyword, setKeyword] = useState('');
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);

  const fetchData = useCallback(async () => {
    const response = await fetch(
      `https://api.example.com/data?keyword=${keyword}&page=${page}&pageSize=${pageSize}`
    );
    const result = await response.json();
    setData(result.data);
  }, [keyword, page, pageSize]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  return (
    <div>
      <input
        type="text"
        value={keyword}
        onChange={(e) => setKeyword(e.target.value)}
      />
      <button onClick={() => setPage(page - 1)} disabled={page <= 1}>
        Prev
      </button>
      <button onClick={() => setPage(page + 1)}>
        Next
      </button>
      <ul>
        {data.map((item, index) => (
          <li key={index}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default SearchList;

2. React Context 实战

项目简介：使用 React Context 实现一个可配置的主题切换功能。

实战技巧：

  • 创建一个 ThemeContext 上下文，用于传递主题数据。
  • 使用 useContext 钩子获取和设置主题。
  • 使用 ThemeProvider 组件包裹应用，确保上下文在组件树中正确传递。
import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

const useTheme = () => useContext(ThemeContext);

function App() {
  const { theme, setTheme } = useTheme();

  return (
    <div>
      <h1>Theme: {theme}</h1>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Toggle Theme
      </button>
    </div>
  );
}

export default App;

通过以上案例，你可以掌握 React 面试时必备的项目案例和实战技巧。在实际开发中，不断积累项目经验，提升自己的技术能力，才能在激烈的竞争中脱颖而出。祝你在面试中取得好成绩！

-- 展开阅读全文 --