99re99,xxx.在线观看,www国产成人免费观看视频

【51CTO.com快譯】React 庫很大并且有很多概念，每個 React項目都需要專家級別的開發人員。React專家不僅要熟悉React相關概念，還應該知道如何在實時項目中使用它們。

React開發人員面臨的三大編碼挑戰

但是招聘到專家級別的React開發人員并不容易。因為只有經驗豐富的開發人員才能解決開發中的編碼挑戰，例如高級的概念。在本文，將為你列出 React 專家面臨的三大編碼挑戰。

創建高階組件以重用組件邏輯

高階組件是開發人員用于重用組件邏輯的高級技術。重用代碼是 React 專家應該具備的一項重要技能。具有可重用性的主要原因是代碼優化。

在此編碼挑戰中，你可能會被要求創建三個具有相似組件邏輯的不同組件。因此，你必須創建一個具有組件邏輯的高階組件，并且它將被其他三個組件重用。

對于這個挑戰，你有三個組件，每個組件都包含一個按鈕，該按鈕將狀態中的值增加一個特定的數字。假設，三個組件是：

“ComponentA”，其中按鈕將值增加 2。
“ComponentB”，其中按鈕將值增加 20。
“ComponentC”，其中按鈕將值增加 200。

首先，用邏輯創建一個 HOC。

import { useState } from "react";
const HigherOrderComponent = (Component, incrementValue) => {
const HOCFun = () => {
const [value, setValue] = useState(0);
const incrementHandler = () => {
setValue(value + incrementValue);
};
return <Component value={value} incrementHandler={incrementHandler} />;
};
return HOCFun;
};
export default HigherOrderComponent;

“HigherOrderComponent”有兩個參數——一個組件和狀態將增加的數字。然后，創建一個具有組件邏輯的函數。該邏輯包含一個狀態變量，其值由處理程序使用傳入數字遞增。

這個函數使用 props - value 和 incrementHandler 返回傳入的組件。請記住，這是使用 HOC 制作的新組件。最后，這個函數會被返回，因為它將在現有組件中使用。

現在，讓我們在“ComponentA”、“ComponentB”和“ComponentC”中使用 HOC。

組件A：

import HigherOrderComponent from "./HigherOrderComponent";
const ComponentA = ({ value, incrementHandler }) => {
return (
<div>
<button onClick={incrementHandler}>Increment by 2</button>
<h2>{value}</h2>
</div>
);
};
export default HigherOrderComponent(ComponentA, 2);

組件B：

import HigherOrderComponent from "./HigherOrderComponent";
const ComponentB = ({ value, incrementHandler }) => {
return (
<div>
<button onClick={incrementHandler}>Increment by 29</button>
<h2>{value}</h2>
</div>
);
};
export default HigherOrderComponent(ComponentB, 20);

組件C：

import HigherOrderComponent from "./HigherOrderComponent";
const ComponentC = ({ value, incrementHandler }) => {
return (
<div>
<button onClick={incrementHandler}>Increment by 200</button>
<h2>{value}</h2>
</div>
);
};
export default HigherOrderComponent(ComponentC, 200);

這些組件都不包含任何邏輯，但一切正常。

發生這種情況是因為使用高階組件來實現代碼可重用性。

現在，請記住，此編碼挑戰的動機是檢查你如何創建高階組件并重用邏輯。

實現和使用 Redux

隨著應用程序的增長，管理全局狀態變得困難。Redux 是最流行的第三方庫，用于通過 React 進行狀態管理。專業的 React 開發人員應該了解 Redux 是什么以及它是如何工作的。所以面試可以要求你在一個基本的 React 應用程序中實現 Redux。

在這個編碼挑戰中，面試官想檢查你是如何實現和使用 Redux 的。因此，你可能會獲得一個包含兩個組件的基本 React 應用程序——一個包含用于增加和減少全局狀態的按鈕，另一個包含用于顯示值的按鈕。

首先，創建減速器。

export const reducer = (state = { value: 0 }, action) => {
switch (action.type) {
case "INCREMENT_VALUE":
return {
...state,
value: action.payload + 1,
};
case "DECREMENT_VALUE":
return {
...state,
value: action.payload - 1,
};
default:
return { ...state };
}
};

除了類型之外，reducer 還會從動作中接收有效載荷。

然后，創建動作創建者。你也可以創建普通動作，但創建動作創建者表明你使用過復雜的 Redux。

export const incrementValueAction = (value) => {
return {
type: "INCREMENT_VALUE",
payload: value,
};
};
export const decrementValueAction = (value) => {
return {
type: "DECREMENT_VALUE",
payload: value,
};
};

接下來，創建商店。

import { createStore } from "redux";
import { reducer } from "./Reducers/reducers";
const initialState = {
value: 0,
};
const store = createStore(reducer, initialState);
export default store;

最后，使用 Provider 為商店包裝應用程序。

import { Provider } from "react-redux";
import store from "./store";
import Component1 from "./Components/Component1";
import Component2 from "./Components/Component2";
function App() {
return (
<Provider store={store}>
<div className="App">
<Component1 />
<hr />
<Component2 />
</div>
</Provider>
);
}
export default App;

上半場準備好了。Redux 已實現，但作業尚未完成，因為在 React 組件中使用它仍然未決。為此，我們將使用 react-redux 鉤子。請記住，不要使用舊的 connect() 函數。

首先，安裝“react-redux”，然后使用組件中的 useDispatch 和 useSelector react-redux 鉤子。

組件 1：

import { useDispatch, useSelector } from "react-redux";
import {
decrementValueAction,
incrementValueAction,
} from "../ActionCreators/actionCreators";
const Component1 = () => {
const dispatch = useDispatch();
const value = useSelector((state) => state.value);
console.log(value);
const incrementHandler = () => {
dispatch(incrementValueAction(value));
};
const decrementHandler = () => {
dispatch(decrementValueAction(value));
};
return (
<div>
<button onClick={incrementHandler}>Increment</button>
<button onClick={decrementHandler}>Decrement</button>
</div>
);
};
export default Component1;

組件2：

import { useSelector } from "react-redux";
const Component2 = () => {
const value = useSelector((state) => state.value);
return (
<div>
<h2>{value}</h2>
<hr />
</div>
);
};
export default Component2;

使用 react-redux hooks，按鈕將起作用。

現在，主要動機是檢查你的 redux 知識。面試可能會要求你在其中使用 redux-thunk，從而使這個挑戰變得更加困難。此外，使用 react-redux 鉤子可以給人更好的印象并避免使用舊技術。

在不使用 props 的情況下在組件之間共享數據

在這個編碼挑戰中，面試可能會給你一個帶有多個嵌套組件的 React 應用程序，如下所示。

React開發人員面臨的三大編碼挑戰

組件“B”是“A”的子組件，而組件“C”和“D”是“B”的子組件。

假設組件“A”中有一個對象，并且在“C”和“D”中需要它。有兩種方法可以在不使用 props 的情況下在這些嵌套組件中共享此對象。第一種是使用 Redux。但是在面試官想要避免使用 props 的情況下，永遠不要使用 Redux，因為 Redux 是為復雜的項目設計的。實際上，面試官期待這個編碼挑戰的“前提場景”。

對于這個挑戰，首先，創建一個場景應用。