首页手记 React 面试真题详解与解答指南

React 面试真题详解与解答指南

标签：

面试 React

概述

本文深入探讨了React的核心概念和面试中常见的真题，包括组件化开发、生命周期方法和性能优化等。文章不仅提供了详细的代码示例，还介绍了如何使用React Router和Redux来构建复杂的应用。通过这些内容，读者可以更好地理解和应用React的核心知识。

React 基础概念回顾

React 的定义与特点

React 是由 Facebook 开发并维护的一种用于构建用户界面的 JavaScript 库。它首次发布于2013年，由于其高效的性能和易于使用的特性，已成为构建单页面应用（SPA）的首选库之一。React 的核心特点包括：

虚拟 DOM：React 利用虚拟 DOM 技术来提高应用程序的性能。当组件的状态或属性发生变化时，React 不直接更新 DOM，而是将变化的状态生成一个新的虚拟 DOM 树。然后，React 比较新旧虚拟 DOM 树，找出差异，并仅将实际需要更新的部分同步到真实的 DOM 中。
声明式编程：React 采用声明式编程模型，允许开发者描述应用程序的状态，而不需要关心具体更新 DOM 的过程。这使得代码更易于理解和维护。
组件化开发：React 鼓励将应用分解为独立、可复用的组件。每个组件负责管理自身状态和渲染自己的用户界面。这种模块化的编程方式简化了应用的开发和维护。
单向数据流：React 的数据流从父组件流向子组件，这有助于更清晰地追踪数据的流向，同时避免了组件之间的复杂交互。

JSX 语法简介

JSX 是 JavaScript XML 的简称，它是一种 JavaScript 的扩展语法，允许在 JavaScript 代码中编写类似 HTML 的语法。JSX 使得 React 组件的编写更加直观和简洁。

在 JSX 中，标签之间可以嵌套标签，标签可以包含属性和 JavaScript 表达式。例如，下面的 JSX 代码创建了一个简单的按钮组件：

const Button = (props) => {
  return <button onClick={props.handleClick}>{props.text}</button>;
};

const App = () => {
  const handleClick = () => {
    console.log('Button clicked');
  };

  return (
    <div>
      <Button text="Click me" handleClick={handleClick} />
    </div>
  );
};

在这个例子中，<Button /> 组件接收两个属性：text 和 handleClick。当点击按钮时，handleClick 函数会被调用。

React 组件的创建与使用

React 组件可以分为类组件和函数组件两种类型。类组件继承自 React.Component 类，而函数组件是一个简单的 JavaScript 函数。以下是两种组件的创建方法：

类组件

类组件通过继承 React.Component 类来定义，并且需要实现 render 方法。在 render 方法中，返回 JSX 代码来描述组件的用户界面。

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: "Click me"
    };
  }

  handleClick = () => {
    this.setState({ text: "Clicked!" });
  }

  render() {
    return (
      <button onClick={this.handleClick}>{this.state.text}</button>
    );
  }
}

class App extends React.Component {
  render() {
    return <Button />;
  }
}

函数组件

函数组件简单地定义为一个返回 JSX 代码的函数。函数组件没有自己的状态，只能接收属性作为输入。

const Button = (props) => {
  const handleClick = () => {
    console.log('Button clicked');
  };

  return (
    <button onClick={handleClick}>
      {props.text}
    </button>
  );
};

const App = () => {
  return <Button text="Click me" />;
};

组件的使用

组件可以在其他组件中使用，如上面的示例所示。组件可以接收属性（props），并在 JSX 中使用它们。

const App = () => {
  return (
    <div>
      <Header title="My App" />
      <Button text="Click Me" />
    </div>
  );
};

const Header = (props) => {
  return <h1>{props.title}</h1>;
};

常见面试问题解析

React 生命周期方法详解

React 组件的生命周期分为三个主要阶段：挂载阶段（mounting）、更新阶段（updating）、卸载阶段（unmounting）。在每个阶段，React 会调用不同的生命周期方法。以下是这些方法的简要说明：

挂载阶段

constructor(props): 构造函数，用于初始化组件状态。通常在构造函数中进行状态的初始化。

constructor(props) {
  super(props);
  this.state = { count: 0 };
}

static getDerivedStateFromProps(props, state): 在组件挂载或接收到新 prop 时调用，返回新的状态对象或 null。主要用于根据输入属性更新状态。

static getDerivedStateFromProps(props, state) {
  if (props.newState) {
    return { count: props.newCount };
  }
  return null;
}

render(): 渲染组件。返回 JSX 代码来描述组件的用户界面。这是组件生命周期中唯一必须实现的方法。

render() {
  return <div>{this.state.count}</div>;
}

componentDidMount(): 组件挂载完成后调用。可用于执行 DOM 操作、设置网络请求等。

componentDidMount() {
  console.log('Component mounted');
}

更新阶段

static getDerivedStateFromProps(props, state): 如果组件接收到新的 prop，也会在此阶段调用。
shouldComponentUpdate(nextProps, nextState): 在接收到新的 prop 或状态时调用，返回一个布尔值。返回 true 表示组件需要重新渲染，返回 false 表示不需要重新渲染。

shouldComponentUpdate(nextProps, nextState) {
  return this.state.count !== nextState.count;
}

getSnapshotBeforeUpdate(prevProps, prevState): 在组件更新之前调用，返回一个值或 null。主要用于获取组件更新前的状态。

getSnapshotBeforeUpdate(prevProps, prevState) {
  return this.state.count;
}

render(): 重新渲染组件

render() {
  return <div>{this.state.count}</div>;
}

componentDidUpdate(prevProps, prevState, snapshot): 组件更新完成后调用。用于执行任何需要在组件更新后进行的操作。

componentDidUpdate(prevProps, prevState, snapshot) {
  console.log('Component updated');
}

卸载阶段

componentWillUnmount(): 组件卸载前调用。主要用于清理定时器、取消网络请求等。

componentWillUnmount() {
  console.log('Component unmounting');
}

虚拟 DOM 的工作原理

在 React 中，虚拟 DOM 是一个 JavaScript 对象，它模仿了真实 DOM 的结构。当组件的状态或属性发生变化时，React 会重新创建一个新的虚拟 DOM 树。然后，React 会将新创建的虚拟 DOM 树与旧的虚拟 DOM 树进行比较，找出变化的部分。最后，React 只会将实际发生变化的部分同步到真实的 DOM 中，从而提高效率。

虚拟 DOM 的优势

减少 DOM 操作：虚拟 DOM 通过比较新旧虚拟 DOM 树找出差异部分，只更新差异部分，减少了昂贵的 DOM 操作。
提高性能：由于虚拟 DOM 只更新实际发生变化的部分，因此性能得到了显著提升。

虚拟 DOM 的实现

在 React 中，虚拟 DOM 的实现是通过 React.createElement 函数创建的。这个函数会创建一个描述组件树的 JavaScript 对象。例如：

const element = React.createElement(
  'h1',
  { className: 'greeting' },
  'Hello, world!'
);

上面的代码创建了一个虚拟 DOM 元素，描述了一个 <h1> 标签，标签的 className 属性为 greeting，标签内容为 Hello, world!。

虚拟 DOM 的比较

React 使用 ReactDom.render 方法将虚拟 DOM 树渲染到真实的 DOM 上。在每次更新状态或属性时，React 会重新创建一个新的虚拟 DOM 树，并将其与旧的虚拟 DOM 树进行比较。比较的方式是通过 ReactDom.reconcile 函数实现的。

const oldVTree = ReactDom.render(<OldComponent />);
const newVTree = ReactDom.render(<NewComponent />);

const patches = ReactDom.reconcile(oldVTree, newVTree);
ReactDom.applyPatches(oldVTree, patches);

上面的代码展示了如何在 React 中进行虚拟 DOM 比较和更新的过程。

React 中 props 和 state 的区别与应用

在 React 中，组件可以通过两种方式接收数据：props 和 state。

props

props 是组件的属性，用于从父组件向子组件传递数据。props 是只读的，不能直接修改。如果需要修改 props，可以通过父组件更新来实现。

const App = () => {
  return <ChildComponent text="Hello" />;
};

const ChildComponent = (props) => {
  return <div>{props.text}</div>;
};

state

state 是组件的内部状态，用于存储组件自身的数据。state 是可变的，可以使用 setState 方法来更新状态。

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}

props 和 state 的区别

来源：props 来源于父组件，state 来源于组件自身。
目的：props 用于传递数据，state 用于存储组件内部数据。
修改方式：props 是只读的，不能直接修改；state 是可变的，可以使用 setState 方法来更新。
生命周期：props 在组件挂载和更新时会改变，state 在组件挂载、更新或用户交互时改变。
使用场景：props 用于数据传递，state 用于管理组件内部的状态。

props 和 state 的应用

props：props 用于父组件向子组件传递数据。例如，在一个应用中，父组件可以向子组件传递用户信息、配置等数据。
state：state 用于存储组件的内部状态。例如，在一个计数器组件中，可以使用 state 来存储计数器的当前值。

面试题解答示范

如何优化 React 应用的性能

在构建 React 应用时，优化性能是非常重要的。以下是一些常见的优化技巧：

使用 `React.memo` 和 `useMemo`

React.memo 是一个高阶组件，用于优化函数组件的渲染。它会比较组件的 props，如果 props 没有变化，则不会重新渲染组件。

import React from 'react';

const MemoComponent = React.memo(({ text }) => {
  console.log('Memo component rendered');
  return <div>{text}</div>;
});

const App = () => {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <MemoComponent text={`Count: ${count}`} />
    </div>
  );
};

useMemo 钩子用于优化函数组件中的计算密集型操作。它会缓存计算结果，避免不必要的计算。

import React, { useMemo } from 'react';

const App = () => {
  const [count, setCount] = React.useState(0);

  const expensiveCalculation = useMemo(() => {
    // 模拟复杂的计算操作
    return count * count;
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Expensive calculation: {expensiveCalculation}</p>
    </div>
  );
};

使用 `shouldComponentUpdate` 和 `React.PureComponent`

shouldComponentUpdate 是一个生命周期方法，用于控制组件是否需要重新渲染。如果返回 false，组件将不会重新渲染。

class PureComponentExample extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return nextProps.count !== this.props.count;
  }

  render() {
    return <div>{this.props.count}</div>;
  }
}

React.PureComponent 是一个简单的类组件，它自动实现了 shouldComponentUpdate 方法，只在 props 或 state 发生变化时重新渲染。

class PureComponentExample extends React.PureComponent {
  render() {
    return <div>{this.props.count}</div>;
  }
}

使用 `key` 属性

在渲染列表时，使用 key 属性可以帮助 React 更有效地更新列表。key 属性是一个特殊的属性，用于唯一标识列表中的每个元素。

const App = () => {
  const [items, setItems] = React.useState(['Item 1', 'Item 2', 'Item 3']);

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};

使用 `React.lazy` 和 `Suspense`

React.lazy 用于按需加载组件，Suspense 用于处理加载中的悬停界面。这可以显著提高应用的加载速度。

import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

const App = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
};

使用 `React.memo` 和 `useMemo`

React.memo 用于优化函数组件的渲染，useMemo 用于优化函数组件中的计算密集型操作。

import React, { useMemo } from 'react';

const MemoComponent = React.memo(({ text }) => {
  console.log('Memo component rendered');
  return <div>{text}</div>;
});

const App = () => {
  const [count, setCount] = React.useState(0);

  const expensiveCalculation = useMemo(() => {
    // 模拟复杂的计算操作
    return count * count;
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <MemoComponent text={`Count: ${count}`} />
      <p>Expensive calculation: {expensiveCalculation}</p>
    </div>
  );
};

React 中的高阶组件与渲染劫持

高阶组件（Higher-Order Component，HOC）是一种高级技术，用于复用组件逻辑。HOC 接收一个组件作为参数，并返回一个新的组件。

高阶组件的实现

function withLogging(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      console.log('Component mounted');
    }

    componentDidMount() {
      console.log('Component did mount');
    }

    componentWillUnmount() {
      console.log('Component will unmount');
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

const MyComponent = (props) => <div>My Component</div>;

const EnhancedComponent = withLogging(MyComponent);

渲染劫持

渲染劫持是指在组件渲染之前修改组件的输出。这可以通过高阶组件实现。

function withTheme(WrappedComponent) {
  return function EnhancedComponent(props) {
    return (
      <div style={{ backgroundColor: 'lightblue' }}>
        <WrappedComponent {...props} />
      </div>
    );
  };
}

const MyComponent = (props) => <div>{props.text}</div>;

const EnhancedComponent = withTheme(MyComponent);

React 中的 Context 和 Props 传递

在 React 中，Context 是一种用于在组件树中传递数据的机制。它允许组件在不依赖于 props 的情况下访问其父组件的数据。

创建 Context

import React from 'react';

const ThemeContext = React.createContext('light');

使用 Context

const App = () => {
  return (
    <ThemeContext.Provider value="dark">
      <ChildComponent />
    </ThemeContext.Provider>
  );
};

const ChildComponent = () => {
  const theme = React.useContext(ThemeContext);
  return <div>Theme: {theme}</div>;
};

使用 Props 传递

在 React 中，通常使用 props 来传递数据。以下是使用 props 传递数据的一个示例。

const App = () => {
  return <ChildComponent text="Hello, world!" />;
};

const ChildComponent = (props) => {
  return <div>{props.text}</div>;
};

面试技巧与注意事项

面试前的准备工作

在参加 React 面试之前，确保你已经充分准备了以下几点：

熟悉 React 核心概念：确保你对 React 的核心概念有扎实的理解，包括组件、props、state、生命周期、虚拟 DOM 等。
练习编写代码：通过编写实际的 React 组件和应用来加深对 React 的理解。可以在本地搭建一个简单的应用，或者在在线代码编辑器（如 CodePen）中编写示例代码。
复习常见面试问题：了解常见的 React 面试问题，包括 React 生命周期方法、性能优化策略、高阶组件等。
准备一些实际项目经验：如果有实际的 React 项目经验，确保你能清楚地描述项目的背景、你负责的部分以及你所应用的技术。
了解最新技术趋势：关注 React 的最新版本和特性，了解最新的库和工具，例如 React Hooks、Context API 等。

面试时的行为规范

面试时的行为规范非常重要，以下是一些建议：

准时到场：确保准时到达面试地点或视频会议。如果因为技术问题导致迟到，提前通知面试官。
礼貌沟通：保持礼貌，即使遇到困难的问题也不要表现出不耐烦或沮丧。
清晰表述：尽量用简单明了的语言回答问题，避免使用行业术语或复杂的术语。
展示解决问题的能力：面试官可能给你一些编程问题，确保你展示出解决问题的能力。解释你的思路和步骤，展示你的逻辑思维能力。
提问：面试结束前，你可以提问一些关于公司文化、团队氛围、项目细节等问题，这可以展示你的兴趣和积极性。

如何应对紧张情绪

紧张是正常的，但可以通过以下方法缓解：

深呼吸：面试前做一些深呼吸，可以帮助你放松。
积极心态：保持积极的心态，相信自己已经做好了充分的准备。
练习模拟面试：在实际面试前，可以找一些朋友或同事进行模拟面试，练习回答常见问题。
提前准备：确保你对面试公司有足够的了解，提前准备好可能的面试问题和答案。
专注于过程：不要过于关注结果，专注于面试的过程和展示自己的能力。

React 实战项目分享

创建一个简单的待办事项应用

待办事项应用是一个经典的 React 应用，可以用来练习组件化开发和状态管理。

创建项目

首先，使用 create-react-app 创建一个新的 React 项目。

npx create-react-app todo-app
cd todo-app

创建 Todo 组件

创建一个 Todo 组件，用于显示单个待办事项。

import React from 'react';

const Todo = ({ text, completed, onToggle }) => {
  return (
    <li
      onClick={onToggle}
      style={{ textDecoration: completed ? 'line-through' : 'none' }}
    >
      {text}
    </li>
  );
};

export default Todo;

创建 TodoList 组件

创建一个 TodoList 组件，用于管理多个待办事项。

import React, { useState } from 'react';
import Todo from './Todo';

const TodoList = () => {
  const [todos, setTodos] = useState([
    { id: 1, text: 'Item 1', completed: false },
    { id: 2, text: 'Item 2', completed: false },
    { id: 3, text: 'Item 3', completed: false },
  ]);

  const addTodo = (text) => {
    const newTodo = {
      id: Date.now(),
      text,
      completed: false,
    };
    setTodos([...todos, newTodo]);
  };

  const toggleTodo = (id) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        onKeyDown={(e) => {
          if (e.key === 'Enter') {
            addTodo(e.target.value);
            e.target.value = '';
          }
        }}
      />
      <ul>
        {todos.map((todo) => (
          <Todo
            key={todo.id}
            {...todo}
            onToggle={() => toggleTodo(todo.id)}
          />
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

创建 App 组件

最后，创建一个 App 组件，用于整合 TodoList 组件。

import React from 'react';
import TodoList from './TodoList';

const App = () => {
  return <TodoList />;
};

export default App;

运行项目

运行项目，查看待办事项应用的实际效果。

npm start

使用 React Router 实现路由导航

React Router 是一个用于管理 React 应用路由的库。它可以让你在应用中实现多个页面和路由切换。

安装和配置 React Router

首先，安装 React Router。

npm install react-router-dom

然后，在应用中配置路由。

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

import Home from './Home';
import About from './About';

const App = () => {
  return (
    <Router>
      <div>
        <h1>React Router Demo</h1>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </div>
    </Router>
  );
};

export default App;

创建页面组件

创建 Home 和 About 组件，分别用于显示主页和关于页。

import React from 'react';

const Home = () => <h2>Home</h2>;

const About = () => <h2>About</h2>;

export default Home;
export default About;

运行项目

运行项目，查看应用中的路由导航效果。

npm start

使用 Redux 管理应用状态

Redux 是一个用于管理应用状态的库。它可以让你在一个集中式的状态存储中管理应用的数据。

安装和配置 Redux

首先，安装 Redux。

npm install redux react-redux

然后，创建一个 Redux 存储（store）。

import { createStore } from 'redux';

const initialState = {
  count: 0,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

const store = createStore(reducer);

创建 Action Creator

创建一个 action creator，用于创建异步 action。

const increment = () => ({ type: 'INCREMENT' });
const decrement = () => ({ type: 'DECREMENT' });

创建 Redux Provider

创建一个 Provider 组件，用于提供 Redux 存储给子组件。

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';

const App = () => {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
};

export default App;

创建 Counter 组件

创建一个 Counter 组件，用于显示计数器。

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions';

const Counter = () => {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  useEffect(() => {
    console.log('Count updated:', count);
  }, [count]);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
};

export default Counter;

运行项目

运行项目，查看应用中使用 Redux 管理状态的效果。

npm start

面试真题实战演练

代码实现常见面试题

题目一：实现一个简单的计数器组件

创建一个计数器组件，可以增加和减少计数器的值。

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

题目二：实现一个简单的路由导航应用

使用 React Router 实现一个具有多个页面的路由导航应用。

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

import Home from './Home';
import About from './About';

const App = () => {
  return (
    <Router>
      <div>
        <h1>React Router Demo</h1>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </div>
    </Router>
  );
};

export default App;

题目三：实现一个简单的待办事项应用

创建一个待办事项应用，可以添加、删除和标记待办事项为已完成。

import React, { useState } from 'react';

const TodoList = () => {
  const [todos, setTodos] = useState([
    { id: 1, text: 'Item 1', completed: false },
    { id: 2, text: 'Item 2', completed: false },
    { id: 3, text: 'Item 3', completed: false },
  ]);

  const addTodo = (text) => {
    const newTodo = {
      id: Date.now(),
      text,
      completed: false,
    };
    setTodos([...todos, newTodo]);
  };

  const toggleTodo = (id) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };

  const deleteTodo = (id) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        onKeyDown={(e) => {
          if (e.key === 'Enter') {
            addTodo(e.target.value);
            e.target.value = '';
          }
        }}
      />
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <span
              style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
              onClick={() => toggleTodo(todo.id)}
            >
              {todo.text}
            </span>
            <button onClick={() => deleteTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

分析和解决面试中遇到的问题

面试题目分析

面试官可能会问到 React 的基础知识和一些高级特性。例如：

React 的生命周期方法：面试官可能会问你 React 组件的生命周期方法及其用途。
虚拟 DOM 的工作原理：面试官可能会要求解释虚拟 DOM 的工作原理。
高阶组件的应用：面试官可能会问你如何使用高阶组件来复用组件逻辑。
性能优化策略：面试官可能会要求你解释如何优化 React 应用的性能。

解决方案

对于这些问题，你可以通过以下方式来解决：

React 的生命周期方法：详细解释每个生命周期方法的作用，并给出代码示例。
虚拟 DOM 的工作原理：解释虚拟 DOM 的概念，并通过代码示例展示其工作流程。
高阶组件的应用：解释高阶组件的概念，并给出使用高阶组件的具体代码示例。
性能优化策略：解释各种性能优化策略，并给出具体的代码示例。

实践示例

以下是一些具体的代码示例，用于解释如何实现面试中遇到的问题。

React 生命周期方法

class LifecycleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  componentDidMount() {
    console.log('Component mounted');
  }

  shouldComponentUpdate(nextProps, nextState) {
    return nextState.count !== this.state.count;
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('Component updated');
  }

  componentWillUnmount() {
    console.log('Component will unmount');
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

虚拟 DOM 的工作原理

import React from 'react';
import ReactDOM from 'react-dom';

const TestComponent = () => <div>Hello, world!</div>;

const App = () => {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    const interval = setInterval(() => {
      setCount(count + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, [count]);

  return <TestComponent />;
};

ReactDOM.render(<App />, document.getElementById('root'));

高阶组件的应用

import React from 'react';

function withLogging(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      console.log('Component mounted');
    }

    componentDidMount() {
      console.log('Component did mount');
    }

    componentWillUnmount() {
      console.log('Component will unmount');
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

const MyComponent = (props) => <div>My Component</div>;

const EnhancedComponent = withLogging(MyComponent);

性能优化策略


import React, { useMemo } from 'react';

const App = () => {
  const [count, setCount] = React.useState(0);

  const expensiveCalculation = useMemo(() => {
    // 模拟复杂的计算操作
    return count * count;
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Expensive calculation: {expensiveCalculation}</p>
    </div>
  );
};
``

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

SMILET

手记
篇

粉丝

80

获赞与收藏

441

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30809 345

网络编程入门教程

20个小节 12721 239

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

React 面试真题详解与解答指南

类组件

函数组件

组件的使用

挂载阶段

更新阶段

卸载阶段

虚拟 DOM 的优势

虚拟 DOM 的实现

虚拟 DOM 的比较

props

state

props 和 state 的区别

props 和 state 的应用

使用 React.memo 和 useMemo

使用 shouldComponentUpdate 和 React.PureComponent

使用 key 属性

使用 React.lazy 和 Suspense

使用 React.memo 和 useMemo

高阶组件的实现

渲染劫持

创建 Context

使用 Context

使用 Props 传递

创建项目

创建 Todo 组件

创建 TodoList 组件

创建 App 组件

运行项目

安装和配置 React Router

创建页面组件

运行项目

安装和配置 Redux

创建 Action Creator

创建 Redux Provider

创建 Counter 组件

运行项目

题目一：实现一个简单的计数器组件

题目二：实现一个简单的路由导航应用

题目三：实现一个简单的待办事项应用

面试题目分析

解决方案

实践示例

React 生命周期方法

虚拟 DOM 的工作原理

高阶组件的应用

性能优化策略

阅读免费教程

使用 `React.memo` 和 `useMemo`

使用 `shouldComponentUpdate` 和 `React.PureComponent`

使用 `key` 属性

使用 `React.lazy` 和 `Suspense`

使用 `React.memo` 和 `useMemo`