服务器之家

服务器之家 > 正文

React开发人员面临的三大编码挑战

时间:2021-12-03 22:48     来源/作者:hackernoon.com

【51CTO.com快译】React 库很大并且有很多概念,每个 React项目都需要专家级别的开发人员。React专家不仅要熟悉React相关概念,还应该知道如何在实时项目中使用它们。

React开发人员面临的三大编码挑战

但是招聘到专家级别的React开发人员并不容易。因为只有经验丰富的开发人员才能解决开发中的编码挑战,例如高级的概念。在本文,将为你列出 React 专家面临的三大编码挑战。

创建高阶组件以重用组件逻辑

高阶组件是开发人员用于重用组件逻辑的高级技术。重用代码是 React 专家应该具备的一项重要技能。具有可重用性的主要原因是代码优化。

在此编码挑战中,你可能会被要求创建三个具有相似组件逻辑的不同组件。因此,你必须创建一个具有组件逻辑的高阶组件,并且它将被其他三个组件重用。

对于这个挑战,你有三个组件,每个组件都包含一个按钮,该按钮将状态中的值增加一个特定的数字。假设,三个组件是:

  • “ComponentA”,其中按钮将值增加 2。
  • “ComponentB”,其中按钮将值增加 20。
  • “ComponentC”,其中按钮将值增加 200。

首先,用逻辑创建一个 HOC。

  1. import { useState } from "react"; 
  2.  
  3. const HigherOrderComponent = (Component, incrementValue) => { 
  4. const HOCFun = () => { 
  5. const [value, setValue] = useState(0); 
  6. const incrementHandler = () => { 
  7. setValue(value + incrementValue); 
  8. }; 
  9.  
  10. return <Component value={value} incrementHandler={incrementHandler} />
  11. }; 
  12.  
  13. return HOCFun; 
  14. }; 
  15.  
  16. export default HigherOrderComponent; 

“HigherOrderComponent”有两个参数——一个组件和状态将增加的数字。然后,创建一个具有组件逻辑的函数。该逻辑包含一个状态变量,其值由处理程序使用传入数字递增。

这个函数使用 props - value 和 incrementHandler 返回传入的组件。请记住,这是使用 HOC 制作的新组件。最后,这个函数会被返回,因为它将在现有组件中使用。

现在,让我们在“ComponentA”、“ComponentB”和“ComponentC”中使用 HOC。

组件A:

  1. import HigherOrderComponent from "./HigherOrderComponent"; 
  2.  
  3. const ComponentA = ({ value, incrementHandler }) => { 
  4. return ( 
  5. <div> 
  6. <button onClick={incrementHandler}>Increment by 2</button> 
  7. <h2>{value}</h2> 
  8.  
  9. </div> 
  10. ); 
  11. }; 
  12.  
  13. export default HigherOrderComponent(ComponentA, 2); 

组件B:

  1. import HigherOrderComponent from "./HigherOrderComponent"; 
  2.  
  3. const ComponentB = ({ value, incrementHandler }) => { 
  4. return ( 
  5. <div> 
  6. <button onClick={incrementHandler}>Increment by 29</button> 
  7. <h2>{value}</h2> 
  8. </div> 
  9. ); 
  10. }; 
  11.  
  12. export default HigherOrderComponent(ComponentB, 20); 

组件C:

  1. import HigherOrderComponent from "./HigherOrderComponent"; 
  2.  
  3. const ComponentC = ({ value, incrementHandler }) => { 
  4. return ( 
  5. <div> 
  6. <button onClick={incrementHandler}>Increment by 200</button> 
  7. <h2>{value}</h2> 
  8. </div> 
  9. ); 
  10. }; 
  11.  
  12. export default HigherOrderComponent(ComponentC, 200); 

这些组件都不包含任何逻辑,但一切正常。

发生这种情况是因为使用高阶组件来实现代码可重用性。

现在,请记住,此编码挑战的动机是检查你如何创建高阶组件并重用逻辑。

实现和使用 Redux

随着应用程序的增长,管理全局状态变得困难。Redux 是最流行的第三方库,用于通过 React 进行状态管理。专业的 React 开发人员应该了解 Redux 是什么以及它是如何工作的。所以面试可以要求你在一个基本的 React 应用程序中实现 Redux。

在这个编码挑战中,面试官想检查你是如何实现和使用 Redux 的。因此,你可能会获得一个包含两个组件的基本 React 应用程序——一个包含用于增加和减少全局状态的按钮,另一个包含用于显示值的按钮。

首先,创建减速器。

  1. export const reducer = (state = { value: 0 }, action) => { 
  2. switch (action.type) { 
  3. case "INCREMENT_VALUE": 
  4. return { 
  5. ...state, 
  6. value: action.payload + 1, 
  7. }; 
  8. case "DECREMENT_VALUE": 
  9. return { 
  10. ...state, 
  11. value: action.payload - 1, 
  12. }; 
  13. default: 
  14. return { ...state }; 
  15. }; 

除了类型之外,reducer 还会从动作中接收有效载荷。

然后,创建动作创建者。你也可以创建普通动作,但创建动作创建者表明你使用过复杂的 Redux。

  1. export const incrementValueAction = (value) => { 
  2. return { 
  3. type: "INCREMENT_VALUE", 
  4. payload: value, 
  5. }; 
  6. }; 
  7.  
  8. export const decrementValueAction = (value) => { 
  9. return { 
  10. type: "DECREMENT_VALUE", 
  11. payload: value, 
  12. }; 
  13. }; 

接下来,创建商店。

  1. import { createStore } from "redux"; 
  2. import { reducer } from "./Reducers/reducers"; 
  3.  
  4. const initialState = { 
  5. value: 0, 
  6. }; 
  7.  
  8. const store = createStore(reducer, initialState); 
  9.  
  10. export default store; 

最后,使用 Provider 为商店包装应用程序。

  1. import { Provider } from "react-redux"; 
  2. import store from "./store"; 
  3. import Component1 from "./Components/Component1"; 
  4. import Component2 from "./Components/Component2"; 
  5.  
  6. function App() { 
  7. return ( 
  8. <Provider store={store}> 
  9. <div className="App"> 
  10. <Component1 /> 
  11. <hr /> 
  12. <Component2 /> 
  13. </div> 
  14. </Provider> 
  15. ); 
  16.  
  17. export default App; 

上半场准备好了。Redux 已实现,但作业尚未完成,因为在 React 组件中使用它仍然未决。为此,我们将使用 react-redux 钩子。请记住,不要使用旧的 connect() 函数。

首先,安装“react-redux”,然后使用组件中的 useDispatch 和 useSelector react-redux 钩子。

组件 1:

  1. import { useDispatch, useSelector } from "react-redux"; 
  2. import { 
  3. decrementValueAction, 
  4. incrementValueAction, 
  5. } from "../ActionCreators/actionCreators"; 
  6.  
  7. const Component1 = () => { 
  8. const dispatch = useDispatch(); 
  9. const value = useSelector((state) => state.value); 
  10.  
  11. console.log(value); 
  12.  
  13. const incrementHandler = () => { 
  14. dispatch(incrementValueAction(value)); 
  15. }; 
  16.  
  17. const decrementHandler = () => { 
  18. dispatch(decrementValueAction(value)); 
  19. }; 
  20.  
  21. return ( 
  22. <div> 
  23. <button onClick={incrementHandler}>Increment</button> 
  24. <button onClick={decrementHandler}>Decrement</button> 
  25. </div> 
  26. ); 
  27. }; 
  28.  
  29. export default Component1; 

组件2:

  1. import { useSelector } from "react-redux"; 
  2.  
  3. const Component2 = () => { 
  4. const value = useSelector((state) => state.value); 
  5.  
  6. return ( 
  7. <div> 
  8. <h2>{value}</h2> 
  9. <hr /> 
  10. </div> 
  11. ); 
  12. }; 
  13.  
  14. 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 是为复杂的项目设计的。实际上,面试官期待这个编码挑战的“前提场景”。

对于这个挑战,首先,创建一个场景应用。

  1. import React from "react"; 
  2.  
  3. const DemoContext = React.createContext(); 
  4.  
  5. export default DemoContext; 

然后,使用此场景,将组件树包装在 Provider 中。

  1. import DemoContext from "../DemoContext"; 
  2. import B from "./B"; 
  3.  
  4. const A = () => { 
  5. const obj = { 
  6. a: 1, 
  7. b: 2, 
  8. c: 3, 
  9. }; 
  10. return ( 
  11. <DemoContext.Provider value={{ obj }}> 
  12. <div> 
  13. <B /> 
  14. </div> 
  15. </DemoContext.Provider> 
  16. ); 
  17. }; 
  18.  
  19. export default A; 

现在,我们可以访问组件“C”和“D”中的“obj”。有两种使用场景的方法 - 使用 Consumer 和 useContext hook。更喜欢使用 useContext hook,因为它是现代更好的方法。

C:

  1. import React, { useContext } from "react"; 
  2. import DemoContext from "../DemoContext"; 
  3.  
  4. const C = () => { 
  5. const { obj } = useContext(DemoContext); 
  6. const { a, b, c } = obj; 
  7.  
  8. return ( 
  9. <div> 
  10. <h2>Component C</h2> 
  11. <h3>{a}</h3> 
  12. <h3>{b}</h3> 
  13. <h3>{c}</h3> 
  14. </div> 
  15. ); 
  16. }; 
  17.  
  18. export default C; 

D:

  1. import React, { useContext } from "react"; 
  2. import DemoContext from "../DemoContext"; 
  3.  
  4. const D = () => { 
  5. const { obj } = useContext(DemoContext); 
  6. const { a, b, c } = obj; 
  7.  
  8. return ( 
  9. <div> 
  10. <h2>Component D</h2> 
  11. <h3>{a}</h3> 
  12. <h3>{b}</h3> 
  13. <h3>{c}</h3> 
  14. </div> 
  15. ); 
  16. }; 
  17.  
  18. export default D; 

让我们检查输出。

它不使用道具就可以工作!

对于专业的React开发人员来说,编码挑战可能会很困难。面试官想要检查你对React的了解以及你的工作经验。因此,挑战将有一些高级概念,如HOC、Redux和场景应用。

原文地址:https://developer.51cto.com/art/202111/693075.htm#topx

标签:

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部