1。 useState 和 useRef 之間有什麼區別？
答：-
useState 用於在函數元件中宣告狀態變數。當狀態改變時，元件會重新渲染。
useRef 傳回一個可變的 ref 對象，其 .current 屬性使用傳遞的參數 (initialValue) 進行初始化。
傳回的物件將在組件的整個生命週期內持續存在。
useRef 的一個常見用例是強制存取子元件的屬性。需要注意的是，對 ref 的 .current 屬性的變更不會導致元件重新渲染。
2。 React 中的入口網站是什麼？
假設在某些場景下我們需要在根 DOM 節點之外渲染一個元件，這裡我們可以使用 Portal。
我們可以將它用於 Modal / 一些 Pop-up 組件。
3。為什麼我們需要 super in class 組件？
答：-
在呼叫 super() 之前，子類別建構子無法使用 this 引用。
如果你不呼叫 super()，JavaScript 會拋出錯誤，因為它沒有初始化。這是因為在呼叫 super() 之前，子類別上下文中的 this 尚未初始化。
class Parent {
constructor() {
this.name = 'Parent';
}
}
class Child extends Parent {
constructor() {
super(); // Must call super() here
this.name = 'Child';
}
}
4。 useCallback vs useMemo vs React.memo
答：-
import React, { useState, useCallback } from 'react';
function Example() {
const [count, setCount] = useState(0);
const increment = useCallback(() => {
setCount(count + 1);
}, [count]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={increment}>
Click me
</button>
</div>
);
}
import React, { useState, useMemo } from 'react';
function Example() {
const [count, setCount] = useState(0);
const expensiveValue = useMemo(() => {
// Perform expensive calculation here
return computeExpensiveValue(count);
}, [count]);
return (
<div>
<p>Expensive value: {expensiveValue}</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
import React from 'react';
const MyComponent = React.memo(function MyComponent(props) {
// render logic here
});
export default MyComponent;
注意：-
useCallback 用於記憶函數，useMemo 用於記憶值，React.memo 用於記憶組件。
5。如果我們過度使用上面的 useMemo、Memo 和 useCallback 功能會發生什麼？
記憶體使用：
效能問題：
雖然這些鉤子和 React.memo 旨在優化性能，但過度使用它們實際上會產生相反的效果。
例如，useMemo 和 useCallback 都有成本，如果它們阻止的計算不比使用鉤子的成本更昂貴，則最終可能會降低效能。
6。 React 元件與 React 元素有什麼不同？
答：-
反應組件：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
反應元素：
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
7。 Redux的核心原理？
答：-
8。比較演算法、協調和 React Fiber？
答：- 同一文章的單獨文章
深入探討 React 的最佳化演算法與流程
9。 React 中的綜合事件是什麼？
Ans：- 我們確保事件在不同瀏覽器之間應該保持一致。
例如：- PreventDefault()、stopPropagation()
10。提升狀態？
Ans:- 當多個元件需要共享相同的變化資料時，建議將共享狀態提升到它們最近的共同祖先。
以上是反應面試準備的詳細內容。更多資訊請關注PHP中文網其他相關文章！
