React開發(fā)人員面臨的三大編碼挑戰(zhàn)
譯文【51CTO.com快譯】React 庫很大并且有很多概念，每個(gè) React項(xiàng)目都需要專家級(jí)別的開發(fā)人員。React專家不僅要熟悉React相關(guān)概念，還應(yīng)該知道如何在實(shí)時(shí)項(xiàng)目中使用它們。
?
??
但是招聘到專家級(jí)別的React開發(fā)人員并不容易。因?yàn)橹挥薪?jīng)驗(yàn)豐富的開發(fā)人員才能解決開發(fā)中的編碼挑戰(zhàn)，例如高級(jí)的概念。在本文，將為你列出 React 專家面臨的三大編碼挑戰(zhàn)。
創(chuàng)建高階組件以重用組件邏輯
高階組件是開發(fā)人員用于重用組件邏輯的高級(jí)技術(shù)。重用代碼是 React 專家應(yīng)該具備的一項(xiàng)重要技能。具有可重用性的主要原因是代碼優(yōu)化。
在此編碼挑戰(zhàn)中，你可能會(huì)被要求創(chuàng)建三個(gè)具有相似組件邏輯的不同組件。因此，你必須創(chuàng)建一個(gè)具有組件邏輯的高階組件，并且它將被其他三個(gè)組件重用。
對(duì)于這個(gè)挑戰(zhàn)，你有三個(gè)組件，每個(gè)組件都包含一個(gè)按鈕，該按鈕將狀態(tài)中的值增加一個(gè)特定的數(shù)字。假設(shè)，三個(gè)組件是：
- “ComponentA”，其中按鈕將值增加 2。
- “ComponentB”，其中按鈕將值增加 20。
- “ComponentC”，其中按鈕將值增加 200。
首先，用邏輯創(chuàng)建一個(gè) 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”有兩個(gè)參數(shù)——一個(gè)組件和狀態(tài)將增加的數(shù)字。然后，創(chuàng)建一個(gè)具有組件邏輯的函數(shù)。該邏輯包含一個(gè)狀態(tài)變量，其值由處理程序使用傳入數(shù)字遞增。
這個(gè)函數(shù)使用 props - value 和 incrementHandler 返回傳入的組件。請(qǐng)記住，這是使用 HOC 制作的新組件。最后，這個(gè)函數(shù)會(huì)被返回，因?yàn)樗鼘⒃诂F(xiàn)有組件中使用。
現(xiàn)在，讓我們?cè)凇癈omponentA”、“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);
這些組件都不包含任何邏輯，但一切正常。
發(fā)生這種情況是因?yàn)槭褂酶唠A組件來實(shí)現(xiàn)代碼可重用性。
現(xiàn)在，請(qǐng)記住，此編碼挑戰(zhàn)的動(dòng)機(jī)是檢查你如何創(chuàng)建高階組件并重用邏輯。
實(shí)現(xiàn)和使用 Redux
隨著應(yīng)用程序的增長，管理全局狀態(tài)變得困難。Redux 是最流行的第三方庫，用于通過 React 進(jìn)行狀態(tài)管理。專業(yè)的 React 開發(fā)人員應(yīng)該了解 Redux 是什么以及它是如何工作的。所以面試可以要求你在一個(gè)基本的 React 應(yīng)用程序中實(shí)現(xiàn) Redux。
在這個(gè)編碼挑戰(zhàn)中，面試官想檢查你是如何實(shí)現(xiàn)和使用 Redux 的。因此，你可能會(huì)獲得一個(gè)包含兩個(gè)組件的基本 React 應(yīng)用程序——一個(gè)包含用于增加和減少全局狀態(tài)的按鈕，另一個(gè)包含用于顯示值的按鈕。
首先，創(chuàng)建減速器。
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 還會(huì)從動(dòng)作中接收有效載荷。
然后，創(chuàng)建動(dòng)作創(chuàng)建者。你也可以創(chuàng)建普通動(dòng)作，但創(chuàng)建動(dòng)作創(chuàng)建者表明你使用過復(fù)雜的 Redux。
export const incrementValueAction = (value) => { return { type: "INCREMENT_VALUE", payload: value, }; }; export const decrementValueAction = (value) => { return { type: "DECREMENT_VALUE", payload: value, }; };
接下來，創(chuàng)建商店。
import { createStore } from "redux"; import { reducer } from "./Reducers/reducers"; const initialState = { value: 0, }; const store = createStore(reducer, initialState); export default store;
最后，使用 Provider 為商店包裝應(yīng)用程序。
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;
上半場(chǎng)準(zhǔn)備好了。Redux 已實(shí)現(xiàn)，但作業(yè)尚未完成，因?yàn)樵?React 組件中使用它仍然未決。為此，我們將使用 react-redux 鉤子。請(qǐng)記住，不要使用舊的 connect() 函數(shù)。
首先，安裝“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，按鈕將起作用。
現(xiàn)在，主要?jiǎng)訖C(jī)是檢查你的 redux 知識(shí)。面試可能會(huì)要求你在其中使用 redux-thunk，從而使這個(gè)挑戰(zhàn)變得更加困難。此外，使用 react-redux 鉤子可以給人更好的印象并避免使用舊技術(shù)。
在不使用 props 的情況下在組件之間共享數(shù)據(jù)
在這個(gè)編碼挑戰(zhàn)中，面試可能會(huì)給你一個(gè)帶有多個(gè)嵌套組件的 React 應(yīng)用程序，如下所示。
?
??
組件“B”是“A”的子組件，而組件“C”和“D”是“B”的子組件。
假設(shè)組件“A”中有一個(gè)對(duì)象，并且在“C”和“D”中需要它。有兩種方法可以在不使用 props 的情況下在這些嵌套組件中共享此對(duì)象。第一種是使用 Redux。但是在面試官想要避免使用 props 的情況下，永遠(yuǎn)不要使用 Redux，因?yàn)?Redux 是為復(fù)雜的項(xiàng)目設(shè)計(jì)的。實(shí)際上，面試官期待這個(gè)編碼挑戰(zhàn)的“前提場(chǎng)景”。
對(duì)于這個(gè)挑戰(zhàn)，首先，創(chuàng)建一個(gè)場(chǎng)景應(yīng)用。
import React from "react"; const DemoContext = React.createContext(); export default DemoContext;
然后，使用此場(chǎng)景，將組件樹包裝在 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;
現(xiàn)在，我們可以訪問組件“C”和“D”中的“obj”。有兩種使用場(chǎng)景的方法 - 使用 Consumer 和 useContext hook。更喜歡使用 useContext hook，因?yàn)樗乾F(xiàn)代更好的方法。
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;
讓我們檢查輸出。
它不使用道具就可以工作！
對(duì)于專業(yè)的React開發(fā)人員來說，編碼挑戰(zhàn)可能會(huì)很困難。面試官想要檢查你對(duì)React的了解以及你的工作經(jīng)驗(yàn)。因此，挑戰(zhàn)將有一些高級(jí)概念，如HOC、Redux和場(chǎng)景應(yīng)用。
【51CTO譯稿，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文譯者和出處為51CTO.com】
