相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！
?点赞?收藏?不迷路！?
在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的标准。
React的严格模式可以通过在<React.StrictMode>标签中包裹应用程序的根组件来启用。例如：
import React from 'react';
function App() {
return (
<React.StrictMode>
{/* 应用程序的根组件 */}
</React.StrictMode>
);
}
严格模式的主要用途包括：
在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>);
在React中，为了在页面重新加载时保留数据，可以使用一些策略：
componentWillUnmount或componentDidUpdate中，将数据保存到本地存储，然后在componentDidMount中重新加载。React对象，用于创建组件、处理虚拟DOM等核心功能。ReactDOM模块，用于将React组件渲染到实际的DOM元素上。它是连接React应用和浏览器DOM之间的桥梁。总体而言，这三个库的作用如下：
不是必须使用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>;
在使用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元素能够正确地被创建。
在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关键字等待异步操作完成。这样做可以确保在数据准备好之前，组件不会渲染。
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适用于普通数组的映射操作。
React SSR（Server-Side Rendering，服务端渲染）是一种将React应用在服务器端进行初次渲染，然后将渲染好的HTML内容发送到客户端的技术。与传统的客户端渲染（CSR）不同，SSR可以提供更快的首次加载速度、更好的搜索引擎优化（SEO）和更好的用户体验。
关键点和流程：
React SSR的优势包括：
实现React SSR通常需要使用框架如Next.js或自定义服务器端渲染的解决方案。
开源项目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system
已 300 + Star！
?点赞?收藏?不迷路！?