关于 React 的面试题及其解析

---

1.什么是 React（概念）？

• 答案：React 是一个用于构建用户界面的 JavaScript 库，起源于 Facebook 的内部项目。它采用声明式、组件化的方式管理应用 UI，将 UI 划分为独立的可重用组件，通过组件之间的数据传递来构建动态的用户界面。

2. React 组件有哪些类型？

• 答案：主要有函数组件和类组件两种类型。函数组件接收 props 作为参数并返回 React 元素；类组件使用 ES6 类语法，扩展自 React.Component，可以使用 this 关键字访问组件的状态和生命周期方法。

3. 什么是 JSX？

• 答案：JSX 是 React 的语法扩展，它允许在 JavaScript 代码中写类似 HTML 的标签。JSX 最终会被 Babel 转译成 React.createElement 调用。

4. 如何创建 React 组件？

• 答案：可以通过函数或类来创建 React 组件。函数组件直接返回 React 元素；类组件需要继承 React.Component 并在 render 方法中返回 React 元素。

示例代码

• Greeting.jsx（函数组件）：

  import React from 'react';
  
  const Greeting = ({
         name }) => {
       
    return <h1>Hello, {
       name}!</h1>;
  };
  
  export default Greeting;
  

• Welcome.jsx（类组件）：

  import React, {
        Component } from 'react';
  
  class Welcome extends Component {
       
    render() {
       
      const {
        name } = this.props;
      return <h1>Welcome, {
       name}!</h1>;
    }
  }
  
  export default Welcome;
  

• App.js（主组件，使用上述两个组件）：

  import React from 'react';
  import Greeting from './Greeting';
  import Welcome from './Welcome';
  
  const App = () => {
       
    return (
      <div>
        <Greeting name="Alice" />
        <Welcome name="Bob" />
      </div>
    );
  };
  
  export default App;
  

运行React项目，会看到页面上显示了两个问候语：“Hello, Alice!”和“Welcome, Bob!”。这两个问候语分别由函数组件Greeting和类组件Welcome渲染而来。

5. React 中的 state 是什么？

• 答案：state 是组件记忆信息的一种方式，它允许组件在数据变化时重新渲染。state 是组件私有的，并且只能通过 setState 方法来更新。

示例代码

Counter.jsx（包含计数器和按钮）

import React, {
    useState } from 'react';

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

  return (
    <div>
      <h1>计数器</h1>
      <p>当前计数: