反應面試準備

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

答：-

• useCallback 是一個鉤子，它將傳回回調函數的記憶版本，該函數僅在依賴項之一發生變更時才會變更。
• 將回調傳遞給依賴引用相等性的最佳化子元件來防止不必要的渲染時，它非常有用。

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>
  );
}

• useMemo 是一個將傳回記憶值的鉤子，僅在依賴項之一發生變更時才重新計算。它對於昂貴的計算很有用。

 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>
  );
}

• React.memo 是一個高階元件，它會記住函數元件的結果，並僅在 props 變更時才渲染它。
• 對於在給定相同 props 的情況下渲染相同結果的元件來說，防止不必要的渲染很有用。

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 會增加應用程式的記憶體使用量，因為它將元件的先前版本儲存在記憶體中。

效能問題：

• 雖然這些鉤子和 React.memo 旨在優化性能，但過度使用它們實際上會產生相反的效果。

• 例如，useMemo 和 useCallback 都有成本，如果它們阻止的計算不比使用鉤子的成本更昂貴，則最終可能會降低效能。

6。 React 元件與 React 元素有什麼不同？

答：-

反應組件：

• React 元件是一個函數或類，它可以選擇接受輸入並傳回 React 元素。元件可以重複使用，也可以維護私有狀態

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

反應元素：

• React Element 是一個普通對象，它描述了您希望透過 DOM 節點或其他元件在螢幕上顯示的內容。元素的 props 中可以包含其他元素。
• 建立一個 React 元素很便宜。元素一旦創建，就永遠不會改變。

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

7。 Redux的核心原理？

答：-

• 單一事實來源
• 狀態是唯讀的（永遠不要直接更新）
• 純函數（Reducer）中進行了更改
• 僅適用於可序列化物件。

8。比較演算法、協調和 React Fiber？

答：- 同一文章的單獨文章
深入探討 React 的最佳化演算法與流程

9。 React 中的綜合事件是什麼？

Ans：- 我們確保事件在不同瀏覽器之間應該保持一致。

例如：- PreventDefault()、stopPropagation()

10。提升狀態？

Ans:- 當多個元件需要共享相同的變化資料時，建議將共享狀態提升到它們最近的共同祖先。

以上是反應面試準備的詳細內容。更多資訊請關注PHP中文網其他相關文章！