面试 React 框架八股文十问十答第十二期
作者：程序员小白条，个人博客
相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！
⭐点赞⭐收藏⭐不迷路！⭐文章来源地址https://www.toymoban.com/news/detail-803811.html
1）React中constructor和getInitialState的区别?
在React中，constructor 和 getInitialState 都与组件的初始化状态有关，但它们的使用方式和时机略有不同：
-
constructor： 是ES6类的构造函数，用于初始化组件的状态（
state），并且在组件被实例化时调用。通常用于设置初始状态，绑定方法，以及执行其他一次性的设置。例如：class MyComponent extends React.Component { constructor(props) { super(props); this.state = { myState: 'initialValue' }; } }
- **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元素。const items = [1, 2, 3, 4]; const itemList = items.map(item => <li key={item}>{item}</li>);
- **使用`forEach`方法：** 遍历数组，执行回调函数，但不返回新的数组。
```jsx
const items = [1, 2, 3, 4];
items.forEach(item => console.log(item));
-
使用
for...of循环： 遍历可迭代对象，如数组。const items = [1, 2, 3, 4]; for (const item of items) { console.log(item); }
- **使用`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元素的示例：
const element = React.createElement('div', null, 'Hello, World!');
而使用JSX，相同的效果可以以更简洁的方式表达：
const element = <div>Hello, World!</div>;
7）为什么使用jsx的组件中没有看到使用react却需要引入react？
在使用JSX时，实际上编译器会将JSX转换成对React.createElement的调用。如果在JSX中没有显式使用React，编译器可能会产生错误，因为它无法识别React元素的来源。
所以，尽管在组件的代码中可能没有直接使用React对象，但是在JSX转译过程中，实际上是引用了React对象的。因此，通常在JSX组件中都会看到需要引入React：
import React from 'react';
class MyComponent extends React.Component {
render() {
return <div>Hello, World!</div>;
}
}
即使在函数组件中，也需要引入React：
import React from 'react';
function MyFunctionalComponent() {
return <div>Hello, World!</div>;
}
这是为了确保在JSX被转译时，React元素能够正确地被创建。
8）在React中怎么使用async/await？
在React中，使用async/await通常涉及到在生命周期方法或事件处理函数中处理异步操作。以下是一个简单的示例，展示了如何在React组件的生命周期方法中使用async/await：
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子元素，而不会引发错误。import React from 'react'; const MyComponent = ({ children }) => { return ( <div> {React.Children.map(children, child => ( <div>{child}</div> ))} </div> ); };
- **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！文章来源：https://www.toymoban.com/news/detail-803811.html
⭐点赞⭐收藏⭐不迷路！⭐
到了这里，关于面试 React 框架八股文十问十答第十二期的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
