面試 React 框架八股文十問十答第十一期
作者：程序員小白條，個人博客
相信看了本文后，對你的面試是有一定幫助的！關(guān)注專欄后就能收到持續(xù)更新！
?點贊?收藏?不迷路！?文章來源地址http://www.zghlxwxcb.cn/news/detail-801996.html
1）React 與 Vue 的 diff 算法有何不同？
React 和 Vue 在處理虛擬 DOM 的 diff 算法上有一些不同之處：
- React： 使用深度優(yōu)先搜索策略，通過同層比較和唯一 key 來盡早發(fā)現(xiàn)不同之處。React 的 diff 算法是基于組件實例，而且在更新時會銷毀舊組件并創(chuàng)建新組件。
- Vue： 使用雙指針算法，采用一種更接近模板的結(jié)構(gòu)。Vue 的 diff 算法是基于模板的指令，通過比較模板中的指令來更新 DOM。Vue 2.x 使用的是一種“先序深度優(yōu)先”的策略。
雖然兩者在實現(xiàn)細節(jié)上有差異，但目標都是盡量減少實際 DOM 操作，提高性能。
2）React組件命名推薦的方式是哪個？
在 React 中，組件命名的一般約定是采用帕斯卡命名法（PascalCase），即首字母大寫，例如：
class MyComponent extends React.Component {
// ...
}
這種命名方式有助于區(qū)分 React 組件與普通的 HTML 元素，也符合 React 社區(qū)的一致性約定。
3）react 最新版本解決了什么問題，增加了哪些東西
React 16.x的三大新特性 Time Slicing、Suspense、 hooks
- Time Slicing（解決CPU速度問題）使得在執(zhí)行任務(wù)的期間可以隨時暫停，跑去干別的事情，這個特性使得react能在性能極其差的機器跑時，仍然保持有良好的性能
- Suspense （解決網(wǎng)絡(luò)IO問題） 和lazy配合，實現(xiàn)異步加載組件。 能暫停當前組件的渲染， 當完成某件事以后再繼續(xù)渲染，解決從react出生到現(xiàn)在都存在的「異步副作用」的問題，而且解決得非的優(yōu)雅，使用的是 T異步但是同步的寫法，這是最好的解決異步問題的方式
- 提供了一個內(nèi)置函數(shù)componentDidCatch，當有錯誤發(fā)生時，可以友好地展示 fallback 組件; 可以捕捉到它的子元素（包括嵌套子元素）拋出的異常; 可以復(fù)用錯誤組件。
（1）React16.8 加入hooks，讓React函數(shù)式組件更加靈活，hooks之前，React存在很多問題：
- 在組件間復(fù)用狀態(tài)邏輯很難
- 復(fù)雜組件變得難以理解，高階組件和函數(shù)組件的嵌套過深。
- class組件的this指向問題
- 難以記憶的生命周期
hooks很好的解決了上述問題，hooks提供了很多方法
- useState 返回有狀態(tài)值，以及更新這個狀態(tài)值的函數(shù)
- useEffect 接受包含命令式，可能有副作用代碼的函數(shù)。
- useContext 接受上下文對象（從 React.createContext返回的值）并返回當前上下文值，
- useReducer useState 的替代方案。接受類型為 （state，action）=> newState的reducer，并返回與dispatch方法配對的當前狀態(tài)。
- useCalLback 返回一個回憶的memoized版本，該版本僅在其中一個輸入發(fā)生更改時才會更改。純函數(shù)的輸入輸出確定性 o useMemo 純的一個記憶函數(shù) o useRef 返回一個可變的ref對象，其Current 屬性被初始化為傳遞的參數(shù)，返回的 ref 對象在組件的整個生命周期內(nèi)保持不變。
- useImperativeMethods 自定義使用ref時公開給父組件的實例值
- useMutationEffect 更新兄弟組件之前，它在React執(zhí)行其DOM改變的同一階段同步觸發(fā)
- useLayoutEffect DOM改變后同步觸發(fā)。使用它來從DOM讀取布局并同步重新渲染
4）react 實現(xiàn)一個全局的 dialog
要在 React 中實現(xiàn)一個全局的 dialog，可以使用 React 的 Context API 或者狀態(tài)管理庫，例如 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);
};
在應(yīng)用的頂層組件中，使用 DialogProvider 包裹整個應(yīng)用：
// 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;
5）React 數(shù)據(jù)持久化有什么實踐嗎？
在 React 應(yīng)用中，數(shù)據(jù)持久化通常涉及到將應(yīng)用的狀態(tài)保存到本地存儲或者其他持久化存儲中，以便在頁面刷新或用戶關(guān)閉應(yīng)用后能夠恢復(fù)之前的狀態(tài)。以下是一些 React 數(shù)據(jù)持久化的實踐方法：
-
使用 Web Storage API： 使用
localStorage或sessionStorage可以將數(shù)據(jù)保存在瀏覽器的本地存儲中。這對于小量數(shù)據(jù)而言是一個簡單有效的方案。
// 保存數(shù)據(jù)到 localStorage
localStorage.setItem('key', JSON.stringify(data));
// 從 localStorage 恢復(fù)數(shù)據(jù)
const storedData = JSON.parse(localStorage.getItem('key'));
- 使用 Cookies： 如果需要在客戶端和服務(wù)器之間傳遞數(shù)據(jù)，可以使用 Cookies 進行數(shù)據(jù)持久化。
// 設(shè)置 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');
- 使用 IndexedDB： IndexedDB 是一個瀏覽器端的數(shù)據(jù)庫，可以存儲大量結(jié)構(gòu)化數(shù)據(jù)。
- 使用狀態(tài)管理庫： 如果應(yīng)用使用狀態(tài)管理庫（如 Redux），可以結(jié)合中間件將狀態(tài)保存到本地存儲中，以便在刷新頁面后恢復(fù)狀態(tài)。
6）對 React 和 Vue 的理解，它們的異同
React 和 Vue 都是流行的前端框架，用于構(gòu)建用戶界面，但它們有一些顯著的異同點：
相似之處：
- 組件化： React 和 Vue 都采用了組件化的開發(fā)模式，允許開發(fā)者將應(yīng)用拆分成可復(fù)用的組件。
- 虛擬 DOM： 兩者都使用虛擬 DOM 機制來提高性能，通過在內(nèi)存中維護一個虛擬的 DOM 樹來減少實際 DOM 操作。
- 響應(yīng)式： Vue 和 React 都支持響應(yīng)式數(shù)據(jù)綁定，當數(shù)據(jù)變化時，視圖會自動更新。
不同之處：
- 語法： React 使用 JSX（JavaScript XML）語法，它是一種 JavaScript 的擴展，允許在 JavaScript 中編寫類似 XML/HTML 的代碼。而 Vue 使用模板語法，可以在 HTML 模板中直接插入表達式和指令。
- 學習曲線： Vue 被認為是學習曲線較平緩的框架，適合初學者。React 的學習曲線可能相對陡峭，尤其是對于理解 JSX 和一些高級概念的開發(fā)者。
- 狀態(tài)管理： 在狀態(tài)管理上，React 通常使用庫如 Redux 進行全局狀態(tài)管理，而 Vue 內(nèi)置了 Vuex 來處理全局狀態(tài)。
總體而言，React 更注重靈活性和可組合性，而 Vue 更注重開箱即用和簡單性。選擇使用哪個框架通常取決于團隊的經(jīng)驗、項目的需求以及開發(fā)者個人的偏好。
7）可以使用TypeScript寫React應(yīng)用嗎？怎么操作？
是的，可以使用 TypeScript 來編寫 React 應(yīng)用。React 官方提供了對 TypeScript 的原生支持，通過安裝相應(yīng)的包即可開始在項目中使用 TypeScript。
以下是一些基本步驟：
-
創(chuàng)建 React 項目： 使用 Create React App 工具來初始化一個 React 項目。
npx create-react-app my-react-app --template typescript這會創(chuàng)建一個帶有 TypeScript 配置的 React 項目。
-
安裝 TypeScript 支持： 如果你的項目沒有使用 Create React App，你需要手動安裝 TypeScript 和相關(guān)的類型定義。
npm install --save typescript @types/react @types/react-dom @types/node -
將文件重命名為
.tsx： 將 React 組件的文件后綴從.js或.jsx改為.tsx，以告訴 TypeScript 這是一個包含 JSX 的文件。 -
編寫 TypeScript 代碼： 在
.tsx文件中編寫 React 組件，并使用 TypeScript 的類型系統(tǒng)來提高代碼的健壯性。// ExampleComponent.tsx import React from 'react'; interface Props { message: string; } const ExampleComponent: React.FC<Props> = ({ message }) => { return <div>{message}</div>; }; export default ExampleComponent;
現(xiàn)在，你可以在 React 項目中使用 TypeScript 編寫組件，并利用 TypeScript 提供的類型檢查和智能提示功能。
8）React 設(shè)計思路，它的理念是什么？
React 的設(shè)計思路主要包括以下幾個核心理念：
- 虛擬 DOM： React 使用虛擬 DOM 來提高性能。虛擬 DOM 是在內(nèi)存中對真實 DOM 的一種輕量級表示，通過比較虛擬 DOM 的差異來最小化實際 DOM 操作，從而提高渲染效率。
- 單向數(shù)據(jù)流： React 強調(diào)單向數(shù)據(jù)流，即數(shù)據(jù)的流動是單向的，從父組件傳遞到子組件。這有助于更容易追蹤和理解數(shù)據(jù)的變化，同時也使得組件更容易被復(fù)用。
- 組件化： React 提倡組件化開發(fā)，將用戶界面劃分為小而獨立的組件，每個組件負責自己的狀態(tài)和渲染邏輯。這種模塊化的設(shè)計使得代碼更易維護、測試和復(fù)用。
- 聲明式編程： React 采用聲明式編程風格，開發(fā)者只需描述目標的狀態(tài)，而非步驟如何實現(xiàn)。這使得代碼更易讀、理解和維護。
- 狀態(tài)提升： React 鼓勵將共享狀態(tài)提升到最近的共同祖先組件，以保持組件之間的數(shù)據(jù)同步。這有助于避免狀態(tài)的不一致性問題。
總體而言，React 的設(shè)計思路旨在提供一種簡潔、高效、易于理解和維護的方式來構(gòu)建用戶界面，通過引入虛擬 DOM、單向數(shù)據(jù)流等概念來優(yōu)化性能和開發(fā)體驗。
9）React中props.children和React.Children的區(qū)別
-
props.children： 是一個特殊的 prop，表示組件的所有子節(jié)點。當在 JSX 中使用組件時，該組件的所有子元素會被作為props.children傳遞給該組件。在組件內(nèi)部，你可以直接通過props.children訪問和處理這些子節(jié)點。// 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 時更加方便。
10）React的狀態(tài)提升是什么？使用場景有哪些？
狀態(tài)提升（Lifting State Up）： 狀態(tài)提升是指將組件的狀態(tài)移動到該組件的共同祖先組件中。通過將狀態(tài)提升到更高層級的組件，可以確保共享狀態(tài)的一致性，并且使得狀態(tài)變化更易于追蹤和管理。
使用場景：
- 共享狀態(tài)： 當多個組件需要訪問和共享相同的狀態(tài)時，將這個狀態(tài)提升到它們的最近共同祖先組件中。這樣，所有子組件都可以通過 props 訪問并修改這個狀態(tài)。
- 避免狀態(tài)不一致： 當多個組件需要依賴相同的狀態(tài)進行渲染時，通過狀態(tài)提升可以避免狀態(tài)不一致的問題。所有組件都使用相同的狀態(tài)，保持視圖的一致性。
- 簡化組件邏輯： 將狀態(tài)提升可以使得每個組件的邏輯更簡單，因為它們只需要關(guān)注自己的渲染和交互，而共享狀態(tài)的管理由父組件負責。
- 提高可維護性： 狀態(tài)提升使得狀態(tài)集中管理，提高了代碼的可維護性。在一個地方修改狀態(tài)會影響所有依賴于該狀態(tài)的組件。
例子：
// 狀態(tài)提升前
const ParentComponent = () => {
const [count, setCount] = useState(0);
return (
<div>
<ChildComponent count={count} setCount={setCount} />
<AnotherChildComponent count={count} />
</div>
);
};
// 狀態(tài)提升后
const ParentComponent = () => {
const [count, setCount] = useState(0);
return (
<div>
<ChildComponent count={count} setCount={setCount} />
<AnotherChildComponent count={count} setCount={setCount} />
</div>
);
};
在這個例子中，將 count 狀態(tài)提升到 ParentComponent，使得兩個子組件都可以訪問和修改相同的狀態(tài)。這樣就避免了狀態(tài)不一致的問題，同時也使得組件的邏輯更加清晰。
開源項目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system
已 300 + Star！文章來源：http://www.zghlxwxcb.cn/news/detail-801996.html
?點贊?收藏?不迷路！?
到了這里，關(guān)于面試 React 框架八股文十問十答第十一期的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
