React 框架面试要点总结

React 框架面试要点总结：从基础到高级，助你轻松应对面试！

在前端开发领域，React 是最受欢迎的 JavaScript 库之一。无论是初级开发者还是资深工程师，掌握 React 的核心知识点都是面试中的关键。本文将为你梳理 React 面试中的常见问题和高频考点，帮助你系统化地准备面试。

一、React 基础知识点

1. React 是什么？

• React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发并开源。
• 核心特点：组件化、声明式、虚拟 DOM。

2. JSX 是什么？

• JSX 是 JavaScript 的语法扩展，允许在 JavaScript 中编写类似 HTML 的代码。
• 示例：

  const element = <h1>Hello, World!</h1>;
  

• JSX 最终会被 Babel 编译为 React.createElement() 调用。

3. 组件（Component）

• 函数组件：

  function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
  }
  

• 类组件：

  class Welcome extends React.Component {
    render() {
      return <h1>Hello, {this.props.name}</h1>;
    }
  }
  

4. Props 和 State

• Props：父组件向子组件传递数据，只读。
• State：组件内部的状态，可修改，通过 setState 更新。

5. 事件处理

• React 事件使用驼峰命名法（如 onClick）。
• 示例：

  <button onClick={() => console.log('Clicked!')}>Click Me</button>
  

6. 组件通信

• 父组件向子组件通信：通过 props 传递数据。
• 子组件向父组件通信：通过回调函数传递数据。
• 示例：

  function Parent() {
    const handleChildClick = (data) => {
      console.log('Data from child:', data);
    };
    return <Child onClick={handleChildClick} />;
  }
  
  function Child({ onClick }) {
    return <button onClick={() => onClick('Hello')}>Click Me</button>;
  }
  

7. 条件渲染

• 使用 if 语句、三元运算符或逻辑与（&&）实现条件渲染。
• 示例：

  function Greeting({ isLoggedIn }) {
    return isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>;
  }
  

8. 列表渲染

• 使用 map 方法渲染列表，并为每个元素添加唯一的 key。
• 示例：

  function NumberList({ numbers }) {
    return (
      <ul>
        {numbers.map((number) => (
          <li key={number.toString()}>{number}</li>
        ))}
      </ul>
    );
  }
  

9. Fragment

• 使用 <React.Fragment> 或简写 <> 包裹多个元素，避免额外的 DOM 节点。
• 示例：

  function MyComponent() {
    return (
      <>
        <h1>Title</h1>
        <p>Content</p>
      </>
    );
  }
  

10. PropTypes

• 使用 prop-types 库对组件的 props 进行类型检查。
• 示例：

  import PropTypes from 'prop-types';
  
  function MyComponent({ name, age }) {
    return (
      <div>
        <p>Name: {name}</p>
        <p>Age: {age}</p>
      </div>
    );
  }
  
  MyComponent.propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number,
  };
  

11 . 默认 Props

• 使用 defaultProps 为组件的 props 设置默认值。
• 示例：

  function MyComponent({ name, age }) {
    return (
      <div>
        <p>Name: {name}</p>
        <p>Age: {age}</p>
      </div>
    );
  }
  
  MyComponent.defaultProps = {
    name: 'Guest',
    age: 18,
  };
  

12. Refs

• 使用 React.createRef() 或 useRef 访问 DOM 节点或组件实例。
• 示例：

  function MyComponent() {
    const inputRef = React.useRef(null);
  
    const focusInput = () => {
      inputRef.current.focus();
    };
  
    return (
      <div>
        <input ref={inputRef} type="text" />
        <button onClick={focusInput}>Focus Input</button>
      </div>
    );
  }
  

13. 受控组件与非受控组件

• 受控组件：表单数据由 React 组件管理。

  function ControlledInput() {
    const [value, setValue] = React.useState('');
    return <input value={value} onChange={(e) => setValue(e.target.value)} />;
  }
  

• 非受控组件：表单数据由 DOM 管理。

  function UncontrolledInput() {
    const inputRef = React.useRef(null);
    const handleSubmit = () => {
      console.log('Input value:', inputRef.current.value);
    };
    return (
      <div>
        <input ref={inputRef} type="text" />
        <button onClick={handleSubmit}>Submit</button>
      </div>
    );
  }
  

14. 高阶组件（HOC）

• 高阶组件是一个函数，接收一个组件并返回一个新的组件。
• 示例：

  function withLogging(WrappedComponent) {
    return function (props) {
      console.log('Rendering:', WrappedComponent.name);
      return <WrappedComponent {...props} />;
    };
  }
  
  const MyComponent = () => <div>Hello, World!</div>;
  const EnhancedComponent = withLogging(MyComponent);
  

15. Portals

• 使用 ReactDOM.createPortal 将子组件渲染到 DOM 树的其他位置。
• 示例：

  function Modal({ children }) {
    return ReactDOM.createPortal(
      <div className="modal">{children}</div>,
      document.getElementById('modal-root')
    );
  }
  
  function App() {
    return (
      <div>
        <h1>My App</h1>
        <Modal>This is a modal!</Modal>
      </div>
    );
  }
  

16. 错误边界（Error Boundaries）

• 使用错误边界捕获子组件的 JavaScript 错误，避免整个应用崩溃。
• 示例：

  class ErrorBoundary extends React.Component {
    state = { hasError: false };
  
    static getDerivedStateFromError(error) {
      return { hasError: true };
    }
  
    componentDidCatch(error, info) {
      console.log('Error:', error);
      console.log('Info:', info);
    }
  
    render() {
      if (this.state.hasError) {
        return <h1>Something went wrong.</h1>;
      }
      return this.props.children;
    }
  }
  

17. Context API

• 使用 React.createContext 创建上下文，避免 props 层层传递。
• 示例：

  const ThemeContext = React.createContext('light');
  
  function App() {
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
  
  function Toolbar() {
    return (
      <div>
        <ThemedButton />
      </div>
    );
  }
  
  function ThemedButton() {
    const theme = React.useContext(ThemeContext);
    return <button style={{ background: theme }}>Themed Button</button>;
  }
  

二、React 核心概念

1. 虚拟 DOM

• React 通过虚拟 DOM 提高性能，减少直接操作真实 DOM 的次数。
• 虚拟 DOM 是一个轻量级的 JavaScript 对象，是真实 DOM 的抽象。

2. 生命周期方法

• 挂载阶段：
  • componentDidMount：组件挂载后调用。
• 更新阶段：
  • componentDidUpdate：组件更新后调用。
• 卸载阶段：
  • componentWillUnmount：组件卸载前调用。

3. Hooks

• useState：用于在函数组件中添加状态。

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

• useEffect：用于处理副作用（如数据获取、订阅）。

  useEffect(() => {
    console.log('Component mounted or updated');
    return () => console.log('Component will unmount');
  }, []);
  

• useContext：用于在组件树中共享数据。
• 自定义 Hooks：封装可复用的逻辑。

4. React Router

• 用于实现单页应用（SPA）的路由功能。
• 示例：

  <Route path="/about" component={About} />
  

5. React 的 Reconciliation（协调算法）

• React 通过协调算法比较虚拟 DOM 的差异，并高效更新真实 DOM。
• Diff 算法：React 使用启发式算法（Heuristic Algorithm）比较新旧虚拟 DOM 树，尽量减少 DOM 操作。
• Key 的作用：key 帮助 React 识别列表中的元素，优化更新性能。

6. Fiber 架构

• React 16 引入的新架构，支持异步渲染和任务优先级调度。
• 核心思想：将渲染任务拆分为多个小任务（Fiber 节点），避免阻塞主线程。
• 优势：提高应用的响应速度和流畅性，支持并发模式（Concurrent Mode）。

7. React 的并发模式（Concurrent Mode）

• 并发模式是 React 18 引入的新特性，支持异步渲染和任务中断。
• 核心功能：
  • Suspense：延迟加载组件，显示加载状态。
  • useTransition：标记低优先级更新，避免阻塞高优先级任务。
• 示例：

  const [isPending, startTransition] = useTransition();
  
  function handleClick() {
    startTransition(() => {
      setState(newState); // 低优先级更新
    });
  }
  

8. Suspense 和懒加载

• Suspense：用于延迟加载组件或数据，显示加载状态。
• React.lazy：动态加载组件。
• 示例：

  const LazyComponent = React.lazy(() => import('./LazyComponent'));
  
  function App() {
    return (
      <React.Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </React.Suspense>
    );
  }
  

9. React 的批处理更新

• React 会将多个 setState 调用合并为一次更新，提高性能。
• 自动批处理：React 18 默认启用自动批处理，即使在异步代码中也会合并更新。
• 示例：

  function handleClick() {
    setCount(1);
    setName('Alice'); // 这两个更新会被批处理
  }
  

10. React 的严格模式（Strict Mode）

• 严格模式用于检测潜在问题，如不安全的生命周期方法、过时的 API 等。
• 示例：

  function App() {
    return (
      <React.StrictMode>
        <MyComponent />
      </React.StrictMode>
    );
  }
  

11. React 的 Profiler API

• 使用 React.Profiler 测量组件的渲染性能。
• 示例：

  function App() {
    return (
      <React.Profiler id="MyApp" onRender={(id, phase, actualTime) => {
        console.log(`Render time for ${id}: ${actualTime}ms`);
      }}>
        <MyComponent />
      </React.Profiler>
    );
  }
  

12. React 的 Refs 转发（Forwarding Refs）

• 使用 React.forwardRef 将 ref 传递给子组件。
• 示例：

  const MyButton = React.forwardRef((props, ref) => (
    <button ref={ref}>{props.children}</button>
  ));
  
  function App() {
    const buttonRef = React.useRef(null);
    return <MyButton ref={buttonRef}>Click Me</MyButton>;
  }
  

13. React 的 Context 性能优化

• 使用 useMemo 或 useCallback 避免不必要的上下文更新。
• 示例：

  const MyContext = React.createContext();
  
  function App() {
    const value = React.useMemo(() => ({ theme: 'dark' }), []);
    return (
      <MyContext.Provider value={value}>
        <MyComponent />
      </MyContext.Provider>
    );
  }
  

14. React 的代码分割（Code Splitting）

• 使用动态导入（import()）和 React.lazy 实现代码分割，减少初始加载时间。
• 示例：

  const OtherComponent = React.lazy(() => import('./OtherComponent'));
  
  function App() {
    return (
      <React.Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </React.Suspense>
    );
  }
  

15. React 的副作用管理

• 使用 useEffect 管理副作用（如数据获取、订阅）。
• 清理副作用：在 useEffect 中返回一个清理函数。
• 示例：

  useEffect(() => {
    const subscription = subscribeToData();
    return () => {
      subscription.unsubscribe(); // 清理副作用
    };
  }, []);
  

16. React 的渲染优化

• 使用 React.memo 缓存函数组件，避免不必要的渲染。
• 使用 useMemo 缓存计算结果。
• 使用 useCallback 缓存回调函数。
• 示例：

  const MemoizedComponent = React.memo(MyComponent);
  
  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
  
  const memoizedCallback = useCallback(() => {
    doSomething(a, b);
  }, [a, b]);
  

三、React 高级知识点

1. 性能优化

• React.memo：缓存函数组件，避免不必要的渲染。
• useMemo：缓存计算结果。
• useCallback：缓存回调函数。

2. Context API

• 用于跨组件层级传递数据，避免 props 层层传递。
• 示例：

  const ThemeContext = React.createContext('light');
  <ThemeContext.Provider value="dark">
    <Toolbar />
  </ThemeContext.Provider>
  

3. Redux

• 状态管理库，适用于大型应用。
• 核心概念：Store、Action、Reducer。
• 示例：

  const store = createStore(reducer);
  store.dispatch({ type: 'INCREMENT' });
  

4. Fiber 架构

• React 16 引入的新架构，支持异步渲染，提高性能。
• 核心思想：将渲染任务拆分为多个小任务，避免阻塞主线程。

四、常见面试题

1. React 和 Vue 的区别？

• React 使用 JSX，Vue 使用模板语法。
• React 是单向数据流，Vue 是双向数据绑定。
• React 更灵活，Vue 更易上手。

2. React 中 key 的作用？

• key 用于标识列表中的元素，帮助 React 识别哪些元素发生了变化。

3. 如何避免组件重新渲染？

• 使用 React.memo、useMemo、useCallback 等优化手段。

4. React 中的受控组件和非受控组件？

• 受控组件：表单数据由 React 组件管理。
• 非受控组件：表单数据由 DOM 管理。

5. React 中的错误边界（Error Boundaries）？

• 用于捕获子组件的 JavaScript 错误，避免整个应用崩溃。
• 示例：

  class ErrorBoundary extends React.Component {
    componentDidCatch(error, info) {
      console.log('Error:', error);
    }
    render() {
      return this.props.children;
    }
  }
  

五、面试准备建议

1. 理解核心概念：掌握 React 的基础知识和核心概念是面试的关键。
2. 动手实践：通过项目实践加深对 React 的理解。
3. 刷题练习：在 LeetCode、CodeSandbox 等平台上练习 React 相关题目。
4. 模拟面试：找朋友或同事进行模拟面试，熟悉面试流程。

结语

React 是一个功能强大且灵活的前端库，掌握其核心知识点和高级特性是面试成功的关键。希望本文的总结能帮助你系统化地准备 React 面试，祝你面试顺利，拿到心仪的 Offer！

如果你觉得这篇文章对你有帮助，欢迎点赞、收藏和分享！如果有任何问题，欢迎在评论区留言讨论。

关注我，获取更多前端技术干货！