React面试基础题大全（all)

时间：2024-11-05 19:24:54

前端react面试基础知识（II)-****博客

前端react常见面试题目（basic)-****博客

为什么 React 中的 props 被认为是只读的？

React 中的 props 被认为是只读的，这是为了保证 React 的单向数据流的设计模式，使状态更可预测。在 React 中，数据流是自顶向下的，即父组件通过 props 向子组件传递数据。子组件只能读取这些 props，而不能修改它们。这种设计选择有助于提高代码的可维护性和可预测性。如果允许子组件修改 props，那么父组件将状态传递给多个子组件时，这些子组件就可以随意修改 props 的值，从而导致状态的不可预测性，给调试和维护带来困难。因此，React 采用了只读的 props 机制，以确保组件的可预测性和可维护性。

使用 create-react-app 创建 React 项目有什么好处？

使用 create-react-app 创建 React 项目有以下好处：

  1. 快速搭建：create-react-app 可以自动创建一个 React 项目，并配置好项目的基本结构、构建工具、开发服务器等，无需手动配置 webpack、babel 等工具。
  2. 开发环境：create-react-app 集成了开发服务器，可以在本地进行开发，并自动刷新浏览器以查看更改的效果。它还支持热模块替换，提高开发效率。
  3. 优化和打包：create-react-app 使用了一系列的优化措施，如代码压缩、资源缓存、按需加载等，以提高项目的性能和加载速度。它还提供了一条命令来打包项目，将代码转换为可以在生产环境中使用的静态文件。
  4. 配置管理：create-react-app 使用了一套预定义的配置，但也允许在项目中自定义配置选项。可以使用 eject 命令将配置暴露出来，并对其进行修改，以满足项目的特定需求。

React 中，如何防止 HTML 被转义？

在 React 中，为了防止 HTML 被转义，可以使用 dangerouslySetInnerHTML 属性。这个属性允许你将一个对象传递给 innerHTML，React 会将这个对象中的 __html 键对应的值设置为元素的 HTML 内容。但需要注意的是，使用 dangerouslySetInnerHTML 可能会使你的应用面临跨站脚本（XSS）攻击的风险，因此只有在确定内容是安全的情况下才应使用。

如何有条件地渲染 React 组件？

在 React 中，可以通过多种方式实现有条件地渲染组件：

  1. 使用 if-else 语句：根据条件判断渲染哪个组件。
  2. 使用逻辑运算符：在 JSX 中使用逻辑运算符（如 &&）来根据条件渲染元素。
  3. 使用三元运算符：在 JSX 中使用 JavaScript 的三元运算符来根据条件渲染不同的元素。
  4. 使用变量存储元素：将条件渲染的元素存储在变量中，然后在 JSX 中引用该变量。
  5. 返回 null：在不需要渲染组件时，可以返回 null。

在 React 的 componentWillUpdate 中是否可以直接修改 state 的值？为什么？

在 React 的 componentWillUpdate 生命周期方法中，不应该直接修改 state 的值。这是因为 componentWillUpdate 是在组件即将更新之前被调用的，此时组件的状态正在被更新，如果在此时更改状态会导致组件进入无限循环的状态。如果需要更改状态，应该使用 setState() 方法，它应该在 componentWillUpdate() 方法调用结束以后，通过 componentDidUpdate() 生命周期方法进行操作，保证不会在当前更新周期中产生副作用。

React 中如何监听 state 的变化？

在 React 中，可以通过以下几种方式监听 state 的变化：

  1. 使用 componentDidUpdate 生命周期方法：在类组件中，可以使用 componentDidUpdate 生命周期方法来监听 state 的变化。这个方法会在组件更新后被调用，可以比较更新前后的 props 和 state，然后执行相应的逻辑。
  2. 使用 useEffect Hook：在函数组件中，可以使用 useEffect Hook 来监听 state 的变化。useEffect 可以模拟类组件中的生命周期方法，当依赖项（包括 state）发生变化时，useEffect 会被调用。

React 中 Element 和 Component 有什么区别？

在 React 中，Element 和 Component 有以下区别：

  1. 定义：Element 是一个简单的对象，描述了你希望在屏幕上显示的内容，通常以 DOM 节点或其他组件的形式。而 Component 可以以多种方式声明，它可以是带有 render() 方法的类，或者定义为一个函数。
  2. 用途：Element 是不可变的，一旦创建，它就不会被改变。而 Component 是可复用的，可以接受 props 作为输入，并返回一个 JSX 树作为输出。
  3. 创建方式：Element 通常通过 React.createElement() 函数或 JSX 语法创建。而 Component 可以通过类定义或函数定义来创建。

什么是无状态组件？无状态组件的应用场景有哪些？

无状态组件（也称为函数式组件）是那些不维护自身状态的 React 组件。它们只接受 props 作为输入，并返回 JSX 作为输出。无状态组件的应用场景包括：

  1. 展示性组件：当组件只负责展示数据时，可以使用无状态组件。
  2. 纯逻辑组件：当组件只包含纯逻辑而不涉及状态时，可以使用无状态组件。
  3. 性能优化：由于无状态组件不需要维护状态，因此它们的性能通常比类组件更高。在需要频繁渲染的场景下，使用无状态组件可以提高性能。

React 中引入 CSS 的方式有哪些？

在 React 中，可以通过以下几种方式引入 CSS：

  1. 行内样式：在 JSX 中使用 style 属性来定义行内样式。
  2. CSS 类名：在 JSX 中使用 className 属性来引用 CSS 类名。
  3. CSS Modules：使用 CSS Modules 可以实现局部作用域的 CSS，避免样式冲突。
  4. Styled Components：使用 Styled Components 库可以在组件内部定义样式，并实现样式的复用和组合。
  5. 全局 CSS 文件：在项目中引入全局的 CSS 文件，然后在组件中通过 className 引用相应的样式。

什么是 React 的事件机制？

React 的事件机制是基于 SyntheticEvent（合成事件）的。SyntheticEvent 是对浏览器原生事件的跨浏览器封装，它提供了与浏览器原生事件相同的接口，但具有更好的性能和兼容性。在 React 中，事件处理函数通常作为组件的 props 传递，并在 JSX 中使用 on 开头的事件属性（如 onClick、onMouseEnter 等）来绑定。当事件发生时，React 会调用相应的事件处理函数，并传递一个包含事件信息的 SyntheticEvent 对象作为参数。

在 React 中，super() 和 super(props)有什么区别？

在 React 的类组件中，super() 和 super(props) 的区别在于它们对 props 的处理。

  • super()：调用父类的构造函数，但不传递 props 给父类。这在 React 类组件中通常是不正确的做法，因为类组件的构造函数需要接收 props 参数，并将其传递给 super()，以确保 this.props 在构造函数体中是可用的。
  • super(props)：调用父类的构造函数，并将 props 传递给父类。这是 React 类组件中正确的做法，因为它确保了 this.props 在构造函数体中是可用的，并且可以在构造函数中对 props 进行处理或初始化状态。

React 中 setstate 什么时候是同步的，什么时候是异步的？

在 React 中，setState 的行为可能是同步的，也可能是异步的，这取决于调用它的上下文。

  • 在合成事件和生命周期方法中：在 React 的合成事件（如点击事件）和生命周期方法（如 componentDidMount、componentDidUpdate）中调用 setState 时，React 会将这些更新批处理到下一个事件循环中，以确保多个 setState 调用只会导致一次重新渲染。这意味着在这些情况下，setState 是异步的。
  • 在原生 JavaScript 事件和 setTimeout/setInterval 中：在原生 JavaScript 事件（如 DOM 事件的监听器）和 setTimeout/setInterval 回调函数中调用 setState 时，React 不会将这些更新批处理到下一个事件循环中。因此，在这些情况下，setState 是同步的，并且会立即触发重新渲染。

需要注意的是，即使 setState 是异步的，React 也会保证在相同的更新周期内多次调用 setState 时，只会触发一次重新渲染，并且会按照调用 setState 的顺序合并更新。

什么是 React 的实例？函数式组件是否有实例？

在 React 中，实例通常指的是类组件的实例。类组件是通过 ES6 类语法定义的，它们可以拥有实例属性和方法。当 React 渲染一个类组件时，它会创建一个该类的实例，并将 props 传递给该实例的构造函数。这个实例会在组件的生命周期内存在，并可以通过 this 关键字在组件的方法中访问。

相比之下，函数式组件没有实例。它们是通过普通函数或箭头函数定义的，每次渲染时都会调用这个函数来生成新的 JSX。由于函数式组件没有实例，因此它们不能拥有实例属性和方法。但是，函数式组件可以使用 React 的 Hooks（如 useState、useEffect 等）来管理状态和副作用。

在 React 中，组件的构造函数（constructor）不是必须存在的。React 组件可以通过多种方式定义，包括类组件（Class Components）和函数组件（Functional Components）。对于这两种类型的组件，构造函数的存在与否有不同的要求和用途。

类组件（Class Components）

  1. 构造函数的作用：

    • 类组件的构造函数主要用于初始化状态（state）和绑定事件处理方法（methods）。
    • 你可以通过 this.state 来定义组件的初始状态。
    • 你可以通过 this.methodName = this.methodName.bind(this) 来绑定方法，确保在回调函数中 this 指向当前组件实例。

  2. 构造函数的必要性：

    • 如果你的类组件不需要初始化状态或绑定方法，那么你可以省略构造函数。
    • 在现代 React 开发中，由于引入了类属性（class properties）和箭头函数，很多情况下可以不再需要显式地在构造函数中绑定方法。

  3. 示例：

    jsx复制代码

    class MyComponent extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
    count: 0
    };
    this.incrementCount = this.incrementCount.bind(this);
    }
    incrementCount() {
    this.setState({ count: this.state.count + 1 });
    }
    render() {
    return (
    <div>
    <p>Count: {this.state.count}</p>
    <button onClick={this.incrementCount}>Increment</button>
    </div>
    );
    }
    }

    如果不需要绑定方法，可以使用类属性或箭头函数简化：

     
    jsx复制代码
     
  
    

    

class MyComponent extends React.Component { 

    

    

state = { 

    

    

count: 0 

    

    

}; 

    

    



    

    

incrementCount = () => { 

    

    

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

    

    

}; 

    

    



    

    

render() { 

    

    

return ( 

    

    

<div> 

    

    

<p>Count: {this.state.count}</p> 

    

    

<button onClick={this.incrementCount}>Increment</button> 

    

    

</div> 

    

    

); 

    

    

} 

    

    

}

    

    

    4. 



函数组件（Functional Components）
 

    

  1. 
构造函数的存在： 
  
      

    • 函数组件没有构造函数的概念。
      • 

    • 函数组件使用 useState 和 useEffect 等 Hooks 来管理状态和副作用。
      • 

    

    2. 

  2. 
示例： 
    jsx复制代码
     
  
    

    

import React, { useState } from 'react'; 

    

    



    

    

function MyComponent() { 

    

    

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

    

    



    

    

const incrementCount = () => { 

    

    

setCount(count + 1); 

    

    

}; 

    

    



    

    

return ( 

    

    

<div> 

    

    

<p>Count: {count}</p> 

    

    

<button onClick={incrementCount}>Increment</button> 

    

    

</div> 

    

    

); 

    

    

}

    

    

    3. 



总结
 

    

  • 对于类组件，构造函数不是必须的，只有在需要初始化状态或绑定方法时才需要。
    • 

  • 对于函数组件，没有构造函数的概念，使用 Hooks 来管理状态和副作用。
    • 



因此，React 组件的构造函数不是必须存在的，具体是否需要取决于组件的类型和具体需求。
 

真实 DOM 和虚拟 DOM 的区别及优缺点
 

区别：
 

    

  • 
真实 DOM（Real DOM）：浏览器原生提供的，表示当前页面的实际 HTML 结构。当页面中的数据发生变化时，Real DOM 会进行重新渲染和更新。
    • 

  • 
虚拟 DOM（Virtual DOM）：React 提供的一种中间层抽象，它是一个轻量级的 JavaScript 对象，和 Real DOM 结构相似。在数据更新时，React 会先对 Virtual DOM 进行操作和计算，然后再将变化应用到 Real DOM 上。
    • 



优缺点：
 

    

  •  
    Real DOM：
     
  
      

    • 
优点： 
    
        

      1. 可靠性高：在浏览器中直接操作实际的 DOM 元素，确保了可靠的渲染和交互。
        2. 

      2. 功能丰富：提供了各种原生的 API 和事件处理机制，可以直接操作 DOM 元素。
        3. 

      

      • 

    • 
缺点： 
    
        

      1. 性能较低：当数据变化较频繁时，Real DOM 需要频繁地进行重排、重绘等操作，导致性能下降。
        2. 

      2. 内存消耗大：由于每次数据变化都需要更新整个 DOM 树，如果页面庞大，内存消耗也会相应增加。
        3. 

      3. 操作繁琐：直接操作 Real DOM 需要编写大量的代码来完成元素的创建、删除、更新等操作，开发效率较低。
        4. 

      

      • 

    

    • 

  •  
    Virtual DOM：
     
  
      

    • 
优点： 
    
        

      1. 高性能：通过在 JavaScript 对象上进行计算，并批量更新 Real DOM，减少了对实际 DOM 的直接操作，提高了渲染性能。
        2. 

      2. 更少的耗费：由于只有在数据发生变化时才会更新 Real DOM，相比于直接操作 Real DOM，节约了更多的资源消耗。
        3. 

      

      • 

    • 
缺点： 
    
        

      1. 需要额外的计算开销：使用 Virtual DOM 需要进行额外的计算来构建和比较 Virtual DOM 树，可能会造成一定的计算开销。
        2. 

      2. 学习成本高：使用 Virtual DOM 需要学习新的概念和编程模式，对于开发者来说，上手难度可能较高。
        3. 

      

      • 

    

    • 



React、React-dom 和 babel 的作用
 

    

  • 
React：一个用于构建用户界面的 JavaScript 库。它主要用于构建单页应用程序（SPA），并提供了一种声明式的方式来描述 UI。React 通过组件化的方式来组织代码，使得代码更加模块化和可重用。
    • 

  • 
React-dom：React 的一个库，主要用于将 React 组件挂载到真实的 DOM 上。它提供了 render 方法，可以将 React 元素渲染到指定的 DOM 节点上。
    • 

  • 
Babel：一个 JavaScript 编译器，提供了 JavaScript 的编译过程。它能够将 ES6+ 的语法转换为向后兼容的 JavaScript 代码，使得开发者可以使用最新的 JavaScript 特性，而不用担心在旧浏览器上运行出现问题。Babel 还支持 JSX 语法，可以将 JSX 转换为普通的 JavaScript 代码。
    • 



React 的 keys 是否需要设置为全局唯一？
 

不需要。React 中的 keys 只需要在兄弟节点之间唯一即可。keys 是用于帮助 React 识别哪些元素发生了变化、被添加或被删除的标识符。它们通常用于列表渲染中，以确保在元素更新时能够正确地映射到对应的 DOM 节点上。虽然全局唯一的 keys 可以避免一些潜在的问题，但在大多数情况下，只需要保证在同一个父元素下的子元素具有唯一的 keys 即可。
 

如何在 React 中创建一个事件？
 

在 React 中，可以通过定义事件处理函数来对事件做出响应。事件处理函数通常是类方法或函数组件中的函数。可以通过 JSX 属性将事件处理函数绑定到组件的元素上。以下是一个简单的例子：
 

 

jsx复制代码
 





import React from 'react'; 











class ClickButton extends React.Component { 





handleClick = () => { 





alert('Button clicked!'); 





} 











render() { 





return ( 





<button onClick={this.handleClick}> 





Click Me 





</button> 





); 





} 





} 











export default ClickButton;





在这个例子中，我们定义了一个类组件 ClickButton，并通过 onClick 属性将 handleClick 方法绑定到按钮上。每当用户点击按钮时，handleClick 方法将被调用，并弹出一个提示框。
 

为什么说“在 React 中，一切都是组件”？
 

这句话的意思是，在 React 中，UI 是由组件构成的，组件是 React 应用的基本构建块。无论是页面上的按钮、输入框还是整个页面布局，都可以被视为组件。组件使得代码更加模块化和可重用，每个组件都可以独立地进行开发、测试和维护。通过组合和嵌套组件，可以构建出复杂且可维护的用户界面。
 

React 中 key 的作用
 

在 React 中，key 是一个特殊的字符串属性，它用于帮助 React 识别哪些元素发生了变化、被添加或被删除。key 的主要作用是在进行列表渲染时提高性能并保证组件状态的一致性。通过为列表中的每个元素提供一个唯一的 key，React 能够更精确地判断哪些元素是新的、哪些是旧的，以及哪些需要更新。这可以减少不必要的 DOM 操作，提高渲染性能。同时，使用 key 还可以确保在元素更新时能够正确地保持组件的状态和顺序。
相关文章