前端理論面試-react篇

1.react生命周期

組件將要掛載時觸發(fā)的函數(shù)：componentWillMount
組件掛載完成時觸發(fā)的函數(shù)：componentDidMount
是否要更新數(shù)據(jù)時觸發(fā)的函數(shù)：shouldComponentUpdate
將要更新數(shù)據(jù)時觸發(fā)的函數(shù)：componentWillUpdate
數(shù)據(jù)更新完成時觸發(fā)的函數(shù)：componentDidUpdate
組件將要銷毀時觸發(fā)的函數(shù)：componentWillUnmount
父組件中改變了props傳值時觸發(fā)的函數(shù)：componentWillReceiveProps

2.類組件和函數(shù)組件之間有什么區(qū)別？

類組件（ Class components ）
無論是使用函數(shù)或是類來聲明一個組件，它決不能修改它自己的 props 。
所有 React 組件都必須是純函數(shù)，并禁止修改其自身 props 。
React是單項數(shù)據(jù)流，父組件改變了屬性，那么子組件視圖會更新。
屬性 props 是外界傳遞過來的，狀態(tài) state 是組件本身的，狀態(tài)可以在組件中任意修改
組件的屬性和狀態(tài)改變都會更新視圖。
--
函數(shù)組件（functional component）
函數(shù)組件接收一個單一的 props 對象并返回了一個React元素
--
函數(shù)組件和類組件當(dāng)然是有區(qū)別的，而且函數(shù)組件的性能比類組件的性能要高，因為類組件使用的時候要實例化，而函數(shù)組件直接執(zhí)行函數(shù)取返回結(jié)果即可。為了提高性能，盡量使用函數(shù)組件。
區(qū)別函數(shù)組件類組件是否有this沒有有是否有生命周期沒有有是否有狀態(tài)state沒有有

3.什么是受控組件？

在HTML當(dāng)中，像 <input> , <textarea> , 和 <select> 這類表單元素會維持自身狀態(tài)，并根據(jù)用戶輸入進(jìn)行更新。但在React中，可變的狀態(tài)通常保存在組件的狀態(tài)屬性中，并且只能用 setState() 方法進(jìn)行更新。

非受控組件
非受控組件，即組件的狀態(tài)不受React控制的組件

4.什么是JSX？

JSX即JavaScript XML。一種在React組件內(nèi)部構(gòu)建標(biāo)簽的類XML語法。JSX為react.js開發(fā)的一套語法糖，也是react.js的使用基礎(chǔ)。React在不使用JSX的情況下一樣可以工作，然而使用JSX可以提高組件的可讀性，因此推薦使用JSX。
優(yōu)點：

1.允許使用熟悉的語法來定義 HTML 元素樹；
2.提供更加語義化且移動的標(biāo)簽；
3.程序結(jié)構(gòu)更容易被直觀化；
4.抽象了 React Element 的創(chuàng)建過程；
5.可以隨時掌控 HTML 標(biāo)簽以及生成這些標(biāo)簽的代碼；
6.是原生的 JavaScript。

5.使用React Hooks有什么優(yōu)勢？

hooks 是react 16.8 引入的特性，他允許你在不寫class的情況下操作state 和react的其他特性。

hooks 只是多了一種寫組件的方法，使編寫一個組件更簡單更方便，同時可以自定義hook把公共的邏輯提取出來，讓邏輯在多個組件之間共享。

Hook 是什么
Hook 是什么？ Hook 是一個特殊的函數(shù)，它可以讓你“鉤入” React 的特性。例如，useState 是允許你在 React 函數(shù)組件中添加 state 的 Hook。稍后我們將學(xué)習(xí)其他 Hook。

什么時候我會用 Hook？ 如果你在編寫函數(shù)組件并意識到需要向其添加一些 state，以前的做法是必須將其它轉(zhuǎn)化為 class?，F(xiàn)在你可以在現(xiàn)有的函數(shù)組件中使用 Hook。

ReactHooks的優(yōu)點
無需復(fù)雜的DOM結(jié)構(gòu)
簡潔易懂