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

​​​

创新互联建站专注为客户提供全方位的互联网综合服务，包含不限于网站制作、做网站、乌拉特中网络推广、成都小程序开发、乌拉特中网络营销、乌拉特中企业策划、乌拉特中品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联建站为所有大学生创业者提供乌拉特中建站搭建服务，24小时服务热线：028-86922220，官方网址：www.cdcxhl.com

但是招聘到专家级别的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 ; };  return HOCFun; };  export default HigherOrderComponent; 

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

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

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

组件A：

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

组件B：

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

组件C：

import HigherOrderComponent from "./HigherOrderComponent";  const ComponentC = ({ value, incrementHandler }) => { return ( 
 Increment by 200 
{value}
 
 ); };  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 (