面试 React 框架八股文十问十答第十二期

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

⭐点赞⭐收藏⭐不迷路！⭐

1）React中constructor和getInitialState的区别?

在React中，constructor 和 getInitialState 都与组件的初始化状态有关，但它们的使用方式和时机略有不同：

constructor： 是ES6类的构造函数，用于初始化组件的状态（state），并且在组件被实例化时调用。通常用于设置初始状态，绑定方法，以及执行其他一次性的设置。例如：
tsx 复制代码
```
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { myState: 'initialValue' };
  }
}
```

tsx 复制代码

- **getInitialState：** 是ES5创建的React组件的一种方式，在ES6中已经不再推荐使用。它用于初始化组件的状态，但只在组件被创建时调用一次。示例如下：

  ```javascript
  var MyComponent = React.createClass({
    getInitialState: function() {
      return { myState: 'initialValue' };
    }
  });

总体而言，使用ES6的constructor更为推荐，因为它更符合现代JavaScript的标准。

2）React的严格模式如何使用，有什么用处？

React的严格模式可以通过在<React.StrictMode>标签中包裹应用程序的根组件来启用。例如：

import React from 'react';

function App() {
  return (
    <React.StrictMode>
      {/* 应用程序的根组件 */}
    </React.StrictMode>
  );
}

严格模式的主要用途包括：

识别副作用： 严格模式下会检测副作用，并在开发环境下给出警告。这有助于发现可能导致不稳定行为的代码。
检测过时的生命周期方法和不安全的生命周期用法： 严格模式会警告使用过时的生命周期方法，帮助开发者更轻松地迁移到最新的生命周期。

3）在React中遍历的方法有哪些？

在React中，常见的遍历方法包括：

使用map方法： 对数组进行映射，生成新的React元素。

tsx 复制代码

const items = [1, 2, 3, 4];
const itemList = items.map(item => <li key={item}>{item}</li>);

tsx 复制代码

- **使用`forEach`方法：** 遍历数组，执行回调函数，但不返回新的数组。

  ```jsx
  const items = [1, 2, 3, 4];
  items.forEach(item => console.log(item));

使用for...of循环： 遍历可迭代对象，如数组。

tsx 复制代码

const items = [1, 2, 3, 4];
for (const item of items) {
  console.log(item);
}

tsx 复制代码

- **使用`map`方法遍历对象属性：** 对对象的属性进行映射。

  ```jsx
  const obj = { a: 1, b: 2, c: 3 };
  const objList = Object.keys(obj).map(key => <li key={key}>{obj[key]}</li>);

4）在React中页面重新加载时怎样保留数据？

在React中，为了在页面重新加载时保留数据，可以使用一些策略：

使用浏览器缓存： 将数据存储在浏览器的本地存储（localStorage）或会话存储（sessionStorage）中，以便在页面刷新时保留数据。
使用React生命周期方法： 在组件的生命周期方法中，如componentWillUnmount或componentDidUpdate中，将数据保存到本地存储，然后在componentDidMount中重新加载。
使用路由参数： 如果数据与路由相关，可以使用路由参数将数据传递到组件中。在页面重新加载时，从路由参数中获取数据。
使用Redux或Context API： 如果应用中使用了状态管理工具如Redux或React的Context API，可以将需要保留的数据存储在全局状态中。

5）同时引用这三个库react.js、react-dom.js和babel.js它们都有什么作用？

react.js： 这是React库的核心，包含了构建React组件和管理组件状态的基本功能。它定义了React对象，用于创建组件、处理虚拟DOM等核心功能。
react-dom.js： 这个库提供了与DOM相关的功能，主要包括ReactDOM模块，用于将React组件渲染到实际的DOM元素上。它是连接React应用和浏览器DOM之间的桥梁。
babel.js： Babel是一个JavaScript编译器，用于将高级版本的JavaScript代码转换为浏览器可执行的低级版本。在React应用中，Babel通常与React一起使用，以便可以使用JSX语法和其他ES6+特性。babel.js文件可能是Babel编译器的配置文件，用于指定转换规则和插件。

总体而言，这三个库的作用如下：

react.js： 提供React核心功能，包括组件创建、状态管理等。
react-dom.js： 处理与DOM相关的任务，实现React组件的渲染。
babel.js： 负责将高级JavaScript代码转换为浏览器可执行的代码，使得React应用可以使用最新的JavaScript语法和特性。

6）React必须使用JSX吗？

不是必须使用JSX，但JSX是React推荐的语法扩展，它使得编写和阅读组件更加直观和简洁。JSX本质上是一种语法糖，它被转译成React.createElement调用，这是创建React元素的标准方式。

你可以选择使用纯JavaScript（不使用JSX），但这样会使得组件的书写变得冗长和不易读。以下是一个使用纯JavaScript创建React元素的示例：

tsx 复制代码

const element = React.createElement('div', null, 'Hello, World!');

而使用JSX，相同的效果可以以更简洁的方式表达：

tsx 复制代码

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

7）为什么使用jsx的组件中没有看到使用react却需要引入react？

在使用JSX时，实际上编译器会将JSX转换成对React.createElement的调用。如果在JSX中没有显式使用React，编译器可能会产生错误，因为它无法识别React元素的来源。

所以，尽管在组件的代码中可能没有直接使用React对象，但是在JSX转译过程中，实际上是引用了React对象的。因此，通常在JSX组件中都会看到需要引入React：

tsx 复制代码

import React from 'react';

class MyComponent extends React.Component {
  render() {
    return <div>Hello, World!</div>;
  }
}

即使在函数组件中，也需要引入React：

tsx 复制代码

import React from 'react';

function MyFunctionalComponent() {
  return <div>Hello, World!</div>;
}

这是为了确保在JSX被转译时，React元素能够正确地被创建。

8）在React中怎么使用async/await？

在React中，使用async/await通常涉及到在生命周期方法或事件处理函数中处理异步操作。以下是一个简单的示例，展示了如何在React组件的生命周期方法中使用async/await：

tsx 复制代码

import React, { Component } from 'react';

class MyComponent extends Component {
  async componentDidMount() {
    try {
      const data = await fetchData(); // 假设fetchData是一个异步函数
      console.log(data);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  }

  render() {
    return <div>React Component</div>;
  }
}

export default MyComponent;

请注意，componentDidMount方法被声明为async，并在其中使用await关键字等待异步操作完成。这样做可以确保在数据准备好之前，组件不会渲染。

9）React.Children.map和js的map有什么区别？

React.Children.map 和 JavaScript 的 Array.map 在功能上有一些区别：

React.Children.map： 这是React专门为处理React组件的子元素提供的工具函数。它用于遍历并映射组件的子元素。由于React组件的子元素可以是单个React元素，也可以是一组React元素，React.Children.map确保在处理单个子元素和多个子元素时都能正常工作。此外，React.Children.map还会自动处理null或undefined子元素，而不会引发错误。
tsx 复制代码
```
import React from 'react';

const MyComponent = ({ children }) => {
  return (
    <div>
      {React.Children.map(children, child => (
        <div>{child}</div>
      ))}
    </div>
  );
};
```

tsx 复制代码

- **JavaScript的map：** 是数组的方法，用于映射数组的每个元素并返回新的数组。它不会处理React组件的子元素结构，也不会自动处理`null`或`undefined`元素。

  ```javascript
  const array = [1, 2, 3];
  const newArray = array.map(item => item * 2);

总的来说，React.Children.map更适合处理React组件的子元素，而JavaScript的Array.map适用于普通数组的映射操作。

10）对React SSR的理解

React SSR（Server-Side Rendering，服务端渲染）是一种将React应用在服务器端进行初次渲染，然后将渲染好的HTML内容发送到客户端的技术。与传统的客户端渲染（CSR）不同，SSR可以提供更快的首次加载速度、更好的搜索引擎优化（SEO）和更好的用户体验。

关键点和流程：

服务器端渲染： 在服务器端执行React组件的渲染，生成HTML字符串。
发送HTML到客户端： 将渲染好的HTML字符串发送给客户端。
激活客户端： 客户端接收到HTML后，激活其中的JavaScript，成为一个可交互的React应用。此后，页面的交互部分由客户端负责。

React SSR的优势包括：

SEO优化： 搜索引擎可以更容易地索引服务器端渲染的内容，因为页面在初始加载时就包含了完整的HTML内容。
更快的首次加载： 用户访问时，直接获取到渲染好的HTML，无需等待客户端JavaScript加载和执行。
更好的用户体验： SSR可以提供更快的首次加载速度，改善用户体验。

实现React SSR通常需要使用框架如Next.js或自定义服务器端渲染的解决方案。

开源项目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system

已 300 + Star！

⭐点赞⭐收藏⭐不迷路！⭐