作者丨Michael Pautov
譯者 | 翟珂
審校丨Noe
談到前端開發(fā)，ReactJS是目前最受歡迎的選擇之一。下面列出的是最常問到的ReactJS面試題。
從易到難，讓我們看一下五個高頻面試題。
為什么不使用Angular 而要使用React呢？
使用React構(gòu)建動態(tài)網(wǎng)絡(luò)應(yīng)用更簡單，因為它編碼少功能多，但對于JavaScript應(yīng)用程序，代碼往往會變得復雜。
由于在React應(yīng)用中使用了虛擬DOM，網(wǎng)絡(luò)應(yīng)用的速度會更快。虛擬DOM不會更新實際DOM中的所有組件，而是分析其先前的狀態(tài)，只更新那些已經(jīng)改變的組件。
換句話說，每個React項目的構(gòu)件可以通過使用組件創(chuàng)建新的構(gòu)件來重新使用。為了節(jié)省開發(fā)時間，這些預建的組件都封裝了自己的邏輯和控制，可以在整個程序中共享。
React有單向的數(shù)據(jù)流。在React應(yīng)用程序的設(shè)計過程中，我們通常將子組件分層在其父組件內(nèi)。由于數(shù)據(jù)以單一渠道流動，故障排除也更簡單，更容易確定程序中的問題所在。
Facebook已經(jīng)發(fā)布了一個瀏覽器插件，使我們能夠更容易地調(diào)試React應(yīng)用程序。由于這一改進，調(diào)試React網(wǎng)絡(luò)應(yīng)用變得更快、更簡單了。
Redux thunks的作用是什么？
使用Redux thunk，你可以建立返回函數(shù)而不是動作的動作創(chuàng)建器。通過使用delay函數(shù)，一個動作可以被延遲，直到滿足一個特定的條件。你可以將兩個存儲方法getState和dispatch傳遞給內(nèi)部函數(shù)。
必須先使用applyMiddleware()方法：
import{ createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';
const store = createStore(
rootReducer,
applyMiddleware(thunk)
);
React中的useState()是做什么的？
useState() React Hook允許在功能組件中使用狀態(tài)變量。這種方法對于動態(tài)控制DOM是非常好的。
SetCounter方法是UseState(0)的第二個參數(shù)，它返回一個元組，count是第一個參數(shù)，setCounter方法是第二個參數(shù)。
..
const [count, setCounter] = useState(0);
const [otherStuffs, setOtherStuffs] = useState(..); ..
const setCount = () => {
setCounter(count + 1);
setOtherStuffs(..);
..
};
要更新count，可以使用setCounter()方法。在這個例子中，SetCounter()是在setCount方法中使用的，這里可以采取各種不同的行動。當我們使用鉤子時，我們可能使我們的代碼更有用，如果不是絕對必要的話，可以避免使用基于類的組件。
useEffect鉤子有用嗎？
useEffect React Hook可以用來在功能組件中產(chǎn)生邊際效用。如果你的組件需要在渲染后或狀態(tài)改變后進行某些操作，那么你可以使用useEffect來通知React。
React會記住并在DOM更新性能完成后立即執(zhí)行你提供的函數(shù)。除了更新頁面標題之外，這個函數(shù)也可以用來從Web服務(wù)器上獲取數(shù)據(jù)。
useEffect鉤子會在組件的第一次渲染和隨后的每次更新后自動啟用。完成后，DOM將被修改。
用于React的鉤子?？梢杂脙蓚€參數(shù)來使用useEffect:
useEffect(callback[, dependencies])
回調(diào)1代表包含邊際效用的函數(shù)，它在DOM修改后立即被調(diào)用。第二個參數(shù)的依賴數(shù)組可以是你想要的任何東西。只要渲染之間的依賴關(guān)系改變，useEffect()就會被調(diào)用。
import { useEffect } from 'react';
function WelcomeGreetings({ name }) {
const msg = `Hi, ${name}!`;
useEffect(() => {
document.title = `Welcome to you ${name}`;
}, [name]);
return <div>{msg}</div>;
}邊際效用是指由于前面的代碼而發(fā)生的任何事情，但并不直接修改。因此，useEffect現(xiàn)在包含一個用于更新文檔標題的回調(diào)。
如果你想避免每次使用useEffect(callback, [name])時，WelcomeGreetings組件的演示文稿標題出現(xiàn)變化，你可能需要指定名稱作為useEffect的效果依賴。
增強React性能的一些方法
- 使用useMemo函數(shù)()
- 這個React鉤子可以用來緩存CPU密集型的任務(wù)。
- 對于某些React應(yīng)用程序，持續(xù)使用CPU密集型函數(shù)可能會導致組件重新渲染時的延遲渲染。useMemo()鉤子可用于緩存此類程序。只有必要時，才使用CPU密集型方法useMemo()。
- 保持一個合適的狀態(tài)
- 你希望在可行的情況下讓狀態(tài)盡可能地接近你想要的位置。
- React應(yīng)用程序的父組件可能包括大量冗余的狀態(tài)，這使得理解和管理代碼更加困難。當有眾多狀態(tài)時，整個事情就會重演。
- 最好的辦法是隔離那些對父組件并不關(guān)鍵的狀態(tài)。
- 擺脫遲緩加載。
- 懶惰加載將網(wǎng)絡(luò)應(yīng)用性能問題的風險降到最低，用這種技術(shù)加快React應(yīng)用的啟動速度。
原文鏈接：https://hackernoon.com/top-5-react-interview-questions-in-2022
譯者介紹
翟珂，51CTO社區(qū)編輯，目前在杭州從事軟件研發(fā)工作，做過電商、征信等方面的系統(tǒng)，享受分享知識的過程，充實自己的生活。
