100道React高频题整理(附答案背诵版)

最新推荐文章于 2024-12-28 11:40:34 发布

编程大全

最新推荐文章于 2024-12-28 11:40:34 发布

阅读量534

点赞数 5

分类专栏：面试题文章标签： react 面试 react.js 前端框架前端

本文链接：https://blog.youkuaiyun.com/IT6666_it/article/details/139173874

版权

1、简述React有什么特点？

React是一个用于构建用户界面的JavaScript库，由Facebook开发并维护。React有以下几个主要特点：

声明式设计： React采用声明式设计，让代码更易于理解，且方便调试。你只需描述出你希望程序的最终状态，React会自动确保用户界面与你描述的状态保持一致。
组件化： React基于组件构建界面，每个组件都可以包含自己的状态和逻辑，可以复用，这使得代码的组织和维护变得更简单。例如，一个购物网站的前端可以由“导航栏组件”、“商品列表组件”、“购物车组件”等多个组件构成。
虚拟DOM： React引入了虚拟DOM的概念，当组件的状态改变时，React会创建一个新的虚拟DOM，然后与旧的虚拟DOM进行对比，最后只更新真实DOM中差异的部分。这种方式大大提高了性能。
单向数据流： React的数据流动是单向的，从父组件流向子组件。这种方式使得组件的状态预测变得更加容易，同时也简化了应用的复杂度。
跨平台： React可以用于开发Web应用，同时，通过React Native，也可以开发iOS和Android应用，代码复用率高。

例如，如果我们要创建一个任务列表应用，每一个任务都可以是一个单独的组件，每个任务的完成状态、标题等就是它的状态。当我们添加一个新的任务时，React会创建一个新的虚拟DOM，然后与旧的虚拟DOM进行对比，最后只更新真实DOM中差异的部分，例如添加一个新的任务项。

2、简述虚拟DOM的概念和机制？

虚拟DOM（Virtual DOM）是React的一项核心特性，它是对真实DOM的抽象表达，是一个轻量级的JavaScript对象。

在React中，当组件的状态改变时，React并不会直接去更新真实的DOM。相反，它会创建一个新的虚拟DOM，这个虚拟DOM代表了在状态改变后应用的新状态。然后，React会将这个新的虚拟DOM与旧的虚拟DOM进行比较，这个过程叫做"diffing"。通过比较，React可以找出两个虚拟DOM之间的区别，也就是哪些部分需要更新。最后，React会将这些差异应用到真实的DOM上，这个过程叫做"reconciliation"或"协调"。这种方式称为DOM diffing算法。

虚拟DOM的主要优势在于其性能。操作真实DOM在浏览器中是非常消耗性能的。而使用虚拟DOM，React可以最小化真实DOM的更新，从而提高性能和应用的响应速度。

例如，假设我们有一个评论列表，当新的评论添加时，React会创建一个新的虚拟DOM，然后与旧的虚拟DOM进行比较，找出需要更新的部分（即新的评论），然后只将这个新的评论添加到真实DOM中，而不是整个评论列表都重新渲染。这样就大大提高了性能。

3、React 类组件和函数组件之间的区别是什么？

React提供了两种主要的方式来创建组件：类组件（Class Components）和函数组件（Function Components）。以下是它们之间的主要区别：

定义方式： 类组件是使用ES6的类来定义的，需要继承React.Component。而函数组件则是简单的JavaScript函数。
状态管理： 在React的早期版本中，类组件是唯一可以使用内部状态（state）的组件类型。函数组件是无状态的，只能接收props。但是从React 16.8版本开始，引入了Hooks这个新特性，使得函数组件也可以使用状态以及其他React特性了。
生命周期方法： 类组件提供了生命周期方法，如 componentDidMount，componentDidUpdate，componentWillUnmount等。而在引入Hooks之前，函数组件无法使用这些生命周期方法。但是现在，通过使用 useEffect Hook，函数组件也可以模拟生命周期方法的行为。
使用方式： 类组件需要使用this关键字来访问props和状态，而函数组件则可以直接访问这些值。

例如，一个简单的类组件可以这样定义：

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

  render() {
    return (
      <div>
        {this.props.message}
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Count: {this.state.count}
        </button>
      </div>
    );
  }
}

同样的功能，使用函数组件和Hooks可以这样实现：

function MyComponent(props) {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      {props.message}
      <button onClick={() => setCount(count + 1)}>
        Count: {count}
      </button>
    </div>
  );
}

在这个例子中，类组件和函数组件都实现了同样的功能，即点击按钮时计数器增加。但是函数组件的代码更简洁，更易于理解。

4、简述React 中 refs 的作用？

Refs（引用）在React中是一种特殊的属性，可以用来访问和交互React元素或组件的DOM节点。虽然我们通常推荐使用React的声明式方式来管理应用程序的状态和DOM，但在某些情况下，我们可能需要直接操作DOM，这就是Refs的用武之地。

以下是Refs的一些常见用途：

管理焦点： 对于一些需要用户输入的元素（如input或textarea），Refs可以用来获取焦点。
触发强制动画： 有时候，我们可能需要直接操作DOM元素来触发动画。
集成第三方DOM库： 当需要和非React库（如jQuery插件）集成时，Refs可以用来直接操作DOM。

例如，如果我们创建一个自动获取焦点的输入框，我们可以使用Refs来实现：

class AutoFocusTextInput extends React.Component {
  constructor(props) {
    super(props);
    // 创建一个 ref 来存储 textInput 的 DOM 元素
    this.textInput = React.createRef();
  }

  componentDidMount() {
    // 使用原生的 DOM API 让 text input 元素获取焦点
    this.textInput.current.focus();
  }

  render() {
    // 把 `this.textInput` 指向 `<input>` DOM 节点
    return (
      <input
        type="text"
        ref={this.textInput}
      />
    );
  }
}

在这个例子中，React.createRef()被用来创建一个新的ref，然后在<input>元素上通过ref属性将其附加。这样，我们就可以在组件的其他地方（如生命周期方法）通过this.textInput.current来访问这个DOM元素。

请注意，过度使用Refs可能会导致代码难以理解和维护，因此在大多数情况下，我们应优先考虑使用React的声明式模式。

5、简述React store的概念？

在React中，"store"通常指的是在使用Redux或MobX等状态管理库时用来管理应用全局状态的地方。

下面以Redux为例来解释一下store的概念：

在Redux中，store是一个JavaScript对象，它可以存储应用的整个状态树。Redux的store有以下几个主要的特性和功能：

维护应用的状态： store中包含了应用的整个状态，包括应用的数据以及UI的状态。
提供获取状态的方法： 可以通过store的getState方法来获取应用的当前状态。
提供更新状态的方法： 可以通过store的dispatch方法来分发（dispatch）action，更新应用的状态。这是改变store中状态的唯一方式。
注册和注销监听器： 可以通过store的subscribe方法来添加状态变化的监听器，当状态发生变化时，这些监听器会被调用。监听器可以通过返回的函数来注销。

例如，假设我们正在开发一个待办事项应用，我们可能会在store中存储一个待办事项列表的状态。当用户添加一个新的待办事项时，我们会分发一个action，这个action描述了这个变化（即添加一个新的待办事项）。然后，我们的reducer会接收到这个action，并根据这个action来更新store中的状态。当状态更新后，我们的UI会自动更新来反映这个新的状态。

// 创建一个 Redux store 来以存放应用的状态。
// API 是 { subscribe, dispatch, getState }。
let store = createStore(todoApp);

// 可以手动订阅更新，也可以事件绑定到视图层。
store.subscribe(() => console.log(store.getState()));

// 改变内部 state 惟一方法是 dispatch 一个 action。
// action 可以被序列化，用日记记录和储存下来，后期还可以以回放的方式执行
store.dispatch(addTodo('Learn about actions'));

Redux的store提供了一种集中管理和更新应用状态的方式，使得状态的管理变得可预测且易于理解。