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