1. 什麼是React？它的特點是什麼？
React是一個用於構建使用者介面的JavaScript庫。其特點包括：
- 使用虛擬DOM實現高效更新
- 元件化開發，提高程式碼重用性和可維護性
- 單向資料流，簡化狀態管理
- JSX語法，將元件結構和邏輯放在一起
- 生態系統豐富，支援各種工具和庫
2. 什麼是JSX？
JSX是一種JavaScript的語法擴充套件，用於在React中編寫UI元件。它看起來類似於HTML，但實際上是JavaScript。JSX使得在JavaScript程式碼中直接編寫UI元件更加直觀和簡潔。
3. 什麼是元件？類元件和函式元件有什麼區別？
元件是React應用的構建塊，用於封裝UI元素及其功能。類元件是透過ES6中的class語法定義的元件，擁有狀態和生命週期方法。函式元件是無狀態的元件，透過函式宣告定義，通常用於簡單的UI呈現。
4. 什麼是狀態（state）和屬性（props）在React中的作用？
- 狀態（state）： 是元件內部的資料，可以隨著時間的變化而變化。透過呼叫
setState方法來更新狀態，觸發UI的重新渲染。 - 屬性（props）：從父元件傳遞給子元件的資料，props是隻讀的，子元件不能直接修改props。元件接收props後可以根據props渲染不同的內容。
5. React元件之間如何通訊？
1.父傳子 ：props； 2.子傳父：props+回撥的方式； 3.兄弟元件：父元件作為中間層拉實現資料互通；
4.跨層級：Context； 5.釋出訂閱模式：event； 6.全域性狀態管理：Redux
6. 何時用類元件（ Class Component）？何時用功能元件(Functional Component）？
如果元件具有狀態（ state）或生命週期方法，請使用類元件；否則，使用功能元件。
其他：setState在react18之後都會表現為非同步；建立一個非同步函式（async...await 的方式）可支援 useEffect ；
memo 元件的 props 沒有變化時，會直接複用元件的渲染結果，從而避免不必要的渲染。，為了避免不必要的計算，我們可以使用 useMemo 來快取計算結果
7. React Router元件有哪些？
1.BrowserRouter、HashRouter ： 路由模式history，hash
2.route： Route用於路徑的匹配，然後進行元件的渲染
3.Link、NavLink：通常路徑的跳轉是使用Link元件 NavLink是在Link基礎之上增加了一些樣式屬性，例如元件被選中時，發生樣式變化 ( activeStyle , activeClassName )
4.redirect:路由重定向
5.switch：swich元件的作用適用於當匹配到第一個元件的時候，後面的元件就不應該繼續匹配。
8. react有狀態元件和無狀態元件的區別與使用場景？
1.有狀態元件（Stateful Component）：
使用類元件定義，內部包含了狀態（state），可以管理自身的狀態。
使用this.state和this.setState管理狀態。
適合需要管理或者響應狀態變化的場景。
2.無狀態元件（Stateless Component）：
使用函式元件定義，不包含狀態，僅根據傳入的props渲染輸出。
適合那些不需要管理狀態、只根據外部資料渲染的場景。
9. 對Redux中介軟體的理解？原理？常用中介軟體有哪些？
Redux中，中介軟體就是放在就是在dispatch過程，在分發action進行攔截處理， 其本質上一個函式，對store.dispatch方法進行了改造，在發出 Action 和執行 Reducer 這兩步之間，新增了其他功能。
實現原理：
applyMiddlewares的原始碼 中我們可以看到 ，所有中介軟體被放進了一個陣列chain，然後巢狀執行，最後執行store.dispatch。可以看到，中介軟體內部（middlewareAPI）可以拿到getState和dispatch這兩個方法
常用中介軟體：
redux-thunk：用於非同步操作
redux-logger：用於日誌記錄
10. react生命週期？
a.元件掛載時
當元件例項被建立並插入DOM時，其生命週期呼叫順序如下：
constructor()
static getDerivedStateFromProps()
render()
componentDidMount()
b.元件更新時
當元件的props或state發生變化時會觸發更新。元件更新的生命週期呼叫順序如下：
static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
c.元件解除安裝時
當元件從DOM中移除時會呼叫如下方法
componentWillUnmount()
11. React render方法的原理，在什麼時候會觸發？
原理：
在類元件中render函式指的就是render方法；而在函式元件中，指的就是整個函式元件
render函式中的jsx語句會被編譯成我們熟悉的js程式碼，在render過程中，react將新呼叫的render函式返回的樹與舊版本的樹進行比較，這一步是決定如何更新 DOM 的必要步驟，然後進行 diff 比較，更新dom樹
觸發機：
類元件呼叫 setState 修改狀態
函式元件透過useState hook修改狀態
一旦執行了setState就會執行render方法，useState 會判斷當前值有無發生改變確定是否執行render方法，一旦父元件發生渲染，子元件也會渲染。
12. React Hooks 在使用上有哪些限制？
- 不要在迴圈、條件或巢狀函式中呼叫 Hook；
- 在 React 的函式元件中呼叫 Hook。
13. 什麼是React Hook？有哪些常用的Hook？
React Hook是React 16.8引入的功能，用於在無需編寫類的情況下使用狀態和其他React特性。常用的Hook包括：useState、useEffect、useContext、useReducer、useMemo、useCallback等。
useState：用於管理功能元件中的狀態。useEffect：用於在功能元件中執行副作用，例如獲取資料或訂閱事件。useContext：用於訪問功能元件內的 React 上下文的值。useRef：用於建立對跨渲染持續存在的元素或值的可變引用。useCallback：用於記憶函式以防止不必要的重新渲染。useMemo：用於記憶值，透過快取昂貴的計算來提高效能。useReducer：用於透過reducer函式管理狀態，類似於Redux的工作原理。useLayoutEffect：與useEffect類似，但效果在所有DOM突變後同步執行。
14. usecallback，usememo區別？
useCallback 用於快取函式，以避免不必要的函式建立和渲染。當依賴項發生變化時，會返回一個新的函式引用，否則直接返回之前快取的函式引用。
useMemo 用於快取計算結果，以避免重複計算和渲染。當依賴項發生變化時，會重新計算並返回新的計算結果。
15. 什麼是虛擬DOM？它的作用是什麼？
虛擬DOM是React使用的一種技術，它是React元素的記憶體表示，與真實DOM對應。React透過比較虛擬DOM的變化來最小化DOM操作，從而提高效能。