React開發人員面臨的三大編碼挑戰
譯文【51CTO.com快譯】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 應用程序，如下所示。
?
??
組件“B”是“A”的子組件，而組件“C”和“D”是“B”的子組件。
假設組件“A”中有一個對象，并且在“C”和“D”中需要它。有兩種方法可以在不使用 props 的情況下在這些嵌套組件中共享此對象。第一種是使用 Redux。但是在面試官想要避免使用 props 的情況下，永遠不要使用 Redux，因為 Redux 是為復雜的項目設計的。實際上，面試官期待這個編碼挑戰的“前提場景”。
對于這個挑戰，首先，創建一個場景應用。
import React from "react"; const DemoContext = React.createContext(); export default DemoContext;
然后，使用此場景，將組件樹包裝在 Provider 中。
import DemoContext from "../DemoContext"; import B from "./B"; const A = () => { const obj = { a: 1, b: 2, c: 3, }; return ( <DemoContext.Provider value={{ obj }}> <div> <B /> </div> </DemoContext.Provider> ); }; export default A;
現在，我們可以訪問組件“C”和“D”中的“obj”。有兩種使用場景的方法 - 使用 Consumer 和 useContext hook。更喜歡使用 useContext hook，因為它是現代更好的方法。
C：
import React, { useContext } from "react"; import DemoContext from "../DemoContext"; const C = () => { const { obj } = useContext(DemoContext); const { a, b, c } = obj; return ( <div> <h2>Component C</h2> <h3>{a}</h3> <h3>{b}</h3> <h3>{c}</h3> </div> ); }; export default C;
D：
import React, { useContext } from "react"; import DemoContext from "../DemoContext"; const D = () => { const { obj } = useContext(DemoContext); const { a, b, c } = obj; return ( <div> <h2>Component D</h2> <h3>{a}</h3> <h3>{b}</h3> <h3>{c}</h3> </div> ); }; export default D;
讓我們檢查輸出。
它不使用道具就可以工作！
對于專業的React開發人員來說，編碼挑戰可能會很困難。面試官想要檢查你對React的了解以及你的工作經驗。因此，挑戰將有一些高級概念，如HOC、Redux和場景應用。
【51CTO譯稿，合作站點轉載請注明原文譯者和出處為51CTO.com】
