KuoMin's Blog
0%

轉職前端工程師 - React 面試題

Posted on Edited on
最近開始準備面試，將這些面試題作為找到工作前的挑戰吧！以下是一些可能會在 React 面試中被問到的題目

最近開始準備面試，將這些面試題作為找到工作前的挑戰吧！
以下是一些可能會在 React 面試中被問到的題目:

請解釋 React 的基本概念，包括虛擬 DOM、組件和 props。

虛擬 DOM 是一種用於描述 UI 的抽象表示。當組件的狀態更改時，React 會使用虛擬 DOM 算法將最小的 DOM 操作序列傳遞到真正的 DOM 中。這樣做可以減少 DOM 操作的數量，以便更有效地更新 UI。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React from 'react';

function UserCard(props) {
  return (
    <div>
      <h3>{props.name}</h3>
      <p>{props.email}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <UserCard name="Alice" email="alice@example.com" />
      <UserCard name="Bob" email="bob@example.com" />
    </div>
  );
}

export default App;

請解釋 React 的生命週期方法，以及它們在應用程序中的作用。

在 React 中，組件有一系列的生命週期方法，這些方法會在組件的不同階段被自動調用。

生命週期方法可以分為三大類：初始化、更新和摧毀。每個生命週期方法都有其特定的用途，並且可以在應用程序的不同階段使用。

初始化生命週期方法：

  • constructor()：在建立組件實例時調用。
  • getDerivedStateFromProps()：在接收到新的 props 時調用。
  • render()：用於渲染組件。
  • componentDidMount()：在組件被渲染到 DOM 後調用。

更新生命週期方法：

  • shouldComponentUpdate()：在組件將要更新時調用。
  • getSnapshotBeforeUpdate()：在組件將要更新後調用。
  • render()：用於更新組件。
  • componentDidUpdate()：在組件更新後調用。

摧毀生命週期方法：

  • componentWillUnmount()：在組件將要被摧毀時調用。

請描述 React 中的事件處理方式。

主要是利用 On + 動作 (例如 click, change等) 綁定在元件上，進行事件監聽，來觸發指定函式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const Input = ({ value, onChange }) => {
  return (
    <input value={value} onChange={onChange} />
  );
};

const App = () => {
  const [text, setText] = useState('');

  const handleChange = (event) => {
    setText(event.target.value);
  };

  return (
    <Input value={text} onChange={handleChange} />
  );
};

請解釋 React 中的狀態（state）和屬性（props）之間的區別。

狀態（state）是組件內部的數據。它只能在組件內部讀寫，且只能由組件自身更改。通常，狀態是用於存儲組件內部的動態數據，例如用戶輸入或組件的 UI 選項。

屬性（props）是組件的輸入。它們可以由父組件傳遞給子組件，且子組件無法修改它們。通常，屬性用於向子組件傳遞數據或在父組件和子組件之間傳遞消息。

請描述如何在 React 中通過 props 傳遞數據。

在 React 中，你可以通過 props 傳遞數據給子組件。props 是組件的輸入，可以由父組件傳遞給子組件。

例如，在你的示例中，App 組件使用 Counter 組件來渲染兩個計數器。它通過 initialCount 屬性傳遞了初始計數器值給 Counter 組件。Counter 組件可以通過 props 參數訪問 initialCount 屬性的值。

要傳遞 props 給子組件，只需在 JSX 中使用屬性語法將屬性名稱和值傳遞給子組件即可。例如，App 組件中的以下行代碼將 initialCount 屬性傳遞給 Counter 組件：

1
2
3
4
<Counter initialCount={0} />

const [count, setCount] = useState(props.initialCount);

請解釋什麼是路由，並描述如何在 React 中使用路由。

路由是一種技術，它允許您在應用程式中切換不同的內容或頁面，而無需重新載入整個網頁。路由通常會使用 URL 來標識不同的內容或頁面，並且能夠支援前進和後退操作。

可藉由 React-Route 將 url 指定到對應的 component

1
2
3
4
5
6
7
8
9
10
11
import { BrowserRouter as Router, Route } from 'react-router-dom';

const App = () => {
  return (
    <Router>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </Router>
  );
};

請描述如何在 React 中使用 AJAX 請求。

可以使用 useEffect 或 SWR 作使用

script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import useSWR from 'swr';
import axios from 'axios';

function UserList() {
  const { data, error } = useSWR('/api/users', () => axios.get('/api/users').then(response => response.data));

  if (error) {
    return <p>Error: {error.message}</p>;
  }
  if (!data) {
    return <p>Loading...</p>;
  }
  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

請解釋什麼是 redux，以及它如何與 React 配合使用。

redux 是一種全域狀態管理工具，透過reducer 和 dispatch來運作，其中　reducer 帶有兩個參數- initstate 為儲存狀態的變亮，action 則為接收函式狀態更改的請求，利用switch case 來判定；　Dispatch 是一個函數，用於向 reducer 發送狀態更改的請求。在子組件中，你可以通過調用 dispatch 函數並傳遞 action 對象來請求狀態更改。

最外層利用 Provider去傳遞其狀態 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
// 創建 Redux 儲存庫
const store = createStore(counterReducer);

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}



import React from 'react';
import { createStore } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-redux';

// 創建 reducer 函數
function counterReducer(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

// 創建 Redux 儲存庫
const store = createStore(counterReducer);

function Counter() {
  // 使用 useSelector hook 訪問狀態
  const count = useSelector(state => state);

  // 使用 useDispatch hook 訪問 dispatch 函數
  const dispatch = useDispatch();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
    </div>
  );
}

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

export default App;

請解釋如何在 React 中使用樣式（styles）。

例如使用第三方庫（如 style-components 或 CSS in JS）或是使用 CSS 模組（CSS modules）。這些方法可以讓您更方便地管理您的樣式，並且能夠更好地與 React 的組件化風格相結合。

此外，您也可以使用第三方 CSS 預處理器（如 Sass 或 Less）來寫您的樣式，並使用 Webpack 或其他工具來處理和配置您的樣式。

也可以結合Tailwind CSS在JSX 中加入 JS 函式進行判定
例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
const isopen = true;

const app = () => {

    return (
        <>
            <p className={` text-lg + ${isopen? 'text-red': 'text-green'} `}> test</p>
        </>
        
    )

}

請描述如何在 React 中渲染列表和表格。

可透過 高階函式 map 將資料搭配jsx渲染出列表及表格

1
2
3
4
5
6
7
8
9
10
11
const items = ['item 1', 'item 2', 'item 3'];

const List = () => {
  return (
    <ul>
      {items.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
};

以上資料來源為 ChatGPT