相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！
?点赞?收藏?不迷路！?
React 和 Vue 在处理虚拟 DOM 的 diff 算法上有一些不同之处：
虽然两者在实现细节上有差异，但目标都是尽量减少实际 DOM 操作，提高性能。
在 React 中，组件命名的一般约定是采用帕斯卡命名法（PascalCase），即首字母大写，例如：
class MyComponent extends React.Component {
// ...
}
这种命名方式有助于区分 React 组件与普通的 HTML 元素，也符合 React 社区的一致性约定。
React 16.x的三大新特性 Time Slicing、Suspense、 hooks
（1）React16.8 加入hooks，让React函数式组件更加灵活，hooks之前，React存在很多问题：
hooks很好的解决了上述问题，hooks提供了很多方法
要在 React 中实现一个全局的 dialog，可以使用 React 的 Context API 或者状态管理库，例如 Redux。以下是一个简单的例子，使用 React Context API：
// DialogContext.js
import React, { createContext, useState, useContext } from 'react';
const DialogContext = createContext();
export const DialogProvider = ({ children }) => {
const [isOpen, setIsOpen] = useState(false);
const [content, setContent] = useState(null);
const openDialog = (newContent) => {
setContent(newContent);
setIsOpen(true);
};
const closeDialog = () => {
setContent(null);
setIsOpen(false);
};
return (
<DialogContext.Provider value={{ isOpen, openDialog, closeDialog }}>
{children}
{isOpen && content && <div className="dialog">{content}</div>}
</DialogContext.Provider>
);
};
export const useDialog = () => {
return useContext(DialogContext);
};
在应用的顶层组件中，使用 DialogProvider 包裹整个应用：
// App.js
import React from 'react';
import { DialogProvider } from './DialogContext';
import MyComponent from './MyComponent';
const App = () => {
return (
<DialogProvider>
<MyComponent />
</DialogProvider>
);
};
export default App;
在任何需要弹出 dialog 的组件中，可以使用 useDialog hook：
// MyComponent.js
import React from 'react';
import { useDialog } from './DialogContext';
const MyComponent = () => {
const { openDialog } = useDialog();
const handleClick = () => {
openDialog(<p>This is a dialog content.</p>);
};
return (
<div>
<button onClick={handleClick}>Open Dialog</button>
</div>
);
};
export default MyComponent;
在 React 应用中，数据持久化通常涉及到将应用的状态保存到本地存储或者其他持久化存储中，以便在页面刷新或用户关闭应用后能够恢复之前的状态。以下是一些 React 数据持久化的实践方法：
localStorage 或 sessionStorage 可以将数据保存在浏览器的本地存储中。这对于小量数据而言是一个简单有效的方案。// 保存数据到 localStorage
localStorage.setItem('key', JSON.stringify(data));
// 从 localStorage 恢复数据
const storedData = JSON.parse(localStorage.getItem('key'));
// 设置 Cookie
document.cookie = 'key=value; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/';
// 读取 Cookie
const storedValue = document.cookie.replace(/(?:(?:^|.*;\s*)key\s*=\s*([^;]*).*$)|^.*$/, '\$1');
React 和 Vue 都是流行的前端框架，用于构建用户界面，但它们有一些显著的异同点：
相似之处：
不同之处：
总体而言，React 更注重灵活性和可组合性，而 Vue 更注重开箱即用和简单性。选择使用哪个框架通常取决于团队的经验、项目的需求以及开发者个人的偏好。
是的，可以使用 TypeScript 来编写 React 应用。React 官方提供了对 TypeScript 的原生支持，通过安装相应的包即可开始在项目中使用 TypeScript。
以下是一些基本步骤：
创建 React 项目： 使用 Create React App 工具来初始化一个 React 项目。
npx create-react-app my-react-app --template typescript
这会创建一个带有 TypeScript 配置的 React 项目。
安装 TypeScript 支持： 如果你的项目没有使用 Create React App，你需要手动安装 TypeScript 和相关的类型定义。
npm install --save typescript @types/react @types/react-dom @types/node
将文件重命名为 .tsx： 将 React 组件的文件后缀从 .js 或 .jsx 改为 .tsx，以告诉 TypeScript 这是一个包含 JSX 的文件。
编写 TypeScript 代码： 在 .tsx 文件中编写 React 组件，并使用 TypeScript 的类型系统来提高代码的健壮性。
// ExampleComponent.tsx
import React from 'react';
interface Props {
message: string;
}
const ExampleComponent: React.FC<Props> = ({ message }) => {
return <div>{message}</div>;
};
export default ExampleComponent;
现在，你可以在 React 项目中使用 TypeScript 编写组件，并利用 TypeScript 提供的类型检查和智能提示功能。
React 的设计思路主要包括以下几个核心理念：
总体而言，React 的设计思路旨在提供一种简洁、高效、易于理解和维护的方式来构建用户界面，通过引入虚拟 DOM、单向数据流等概念来优化性能和开发体验。
props.children： 是一个特殊的 prop，表示组件的所有子节点。当在 JSX 中使用组件时，该组件的所有子元素会被作为 props.children 传递给该组件。在组件内部，你可以直接通过 props.children 访问和处理这些子节点。
// ExampleComponent.js
const ExampleComponent = (props) => {
return (
<div>
{props.children}
</div>
);
};
// 使用 ExampleComponent
<ExampleComponent>
<p>Hello, world!</p>
</ExampleComponent>
React.Children： 是一个 React 提供的工具类，用于处理 props.children。它提供了一些方法，例如 React.Children.map、React.Children.forEach 等，用于遍历和处理 props.children 中的子元素。
// 使用 React.Children.map 处理 props.children
React.Children.map(props.children, child => {
// 对每个子元素进行处理
});
总的来说，props.children 是一个用于接收和直接访问子元素的 prop，而 React.Children 提供了一些工具方法，使得在处理 props.children 时更加方便。
状态提升（Lifting State Up）： 状态提升是指将组件的状态移动到该组件的共同祖先组件中。通过将状态提升到更高层级的组件，可以确保共享状态的一致性，并且使得状态变化更易于追踪和管理。
使用场景：
例子：
// 状态提升前
const ParentComponent = () => {
const [count, setCount] = useState(0);
return (
<div>
<ChildComponent count={count} setCount={setCount} />
<AnotherChildComponent count={count} />
</div>
);
};
// 状态提升后
const ParentComponent = () => {
const [count, setCount] = useState(0);
return (
<div>
<ChildComponent count={count} setCount={setCount} />
<AnotherChildComponent count={count} setCount={setCount} />
</div>
);
};
在这个例子中，将 count 状态提升到 ParentComponent，使得两个子组件都可以访问和修改相同的状态。这样就避免了状态不一致的问题，同时也使得组件的逻辑更加清晰。
开源项目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system
已 300 + Star！
?点赞?收藏?不迷路！?