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