保持联系
印度班加罗尔
[电子邮件 protected]
电话:+91 8919786847
工作查询
[电子邮件 protected]
电话:+91 8919786847

反应抽象:这里定义的一切

关于React抽象的介绍

反应 Abstraction用于在电子商务功能中下订单。我们在这里组合了许多抽象级别。此外,如果您看到了,我们将克服检查的难度。检查物品的可用性,提供发票并运送订单。同样要注意的是,付款和计算过程已经就位。

 

const placeOrder =({order})=> {
  validateAvailability(order);
  const total = order.items.reduce(
    (项目,totalAcc)=>
      totalAcc + item.unitPrice * item.units,
    0,
  );
  const invoiceInfo = getInvoiceInfo(order);
  const request = new PaymentService.Request({
    总,
    invoiceInfo,
  });
  const response = PaymentService.pay(request);
  sendInvoice(response.invoice);
  shipOrder(订单);
}; [courtesy-medium.com]
SLA规则告诉我们将代码折射为各种功能。每个对象都处理相同的抽象级别:
 

const getTotal =订单=>

  order.items.reduce(
    (项目,totalAcc)=>
      totalAcc + item.unitPrice * item.units,
    0,
  );
const pay =(总计,invoiceInfo)=> {
  const request = new PaymentService.Request({
    总,
    invoiceInfo,
  });
  const response = PaymentService.pay(request);
  sendInvoice(response.invoice);
};
const payOrder =订单=> {
  const total = getTotal(order);
  const invoiceInfo = getInvoiceInfo(order);
  pay(total,invoiceInfo);
};
const placeOrder =({order})=> {
  validateAvailability(order);
  payOrder(order);
  shipOrder(订单);
}; [courtesy-mediium.com]

现在,placeOrder中的每一行都处于相似的反应抽象级别。该功能运行平稳。此外,在向下移动一系列函数调用时,您还将了解支付订单的细节。

反应组件中的SLA

可以在以下方面应用和使用SLA规则 反应 组件。特别是到JSX代码中的传递方法。

在下一个代码片段中,我们对ColorPicker组件进行分类:
ColorPicker类扩展了React.Component {
  状态= {
    模型:“rgb”,
  };
  handleModelChange = e =>
    this.setState({model:e.target.value});
  render(){
    const {color,onChange} = this.props;
    const {model} = this.state;
    返回(
      <div>
        <select
          值= {模型}
          onChange = {this.handleModelChange}
        >
          <option value=”rgb”>RGB</option>
          <option value=”cmyk”>CMYK</option>
          <option value=”hsb”>HSB</option>
        </select>
        <ColorSliders
          型号= {型号}
          值= {颜色}
          onChange = {onChange}
        />
      </div>
    );
  }
} [Courtesy-medium.com]

渲染方法混合了两种不同的抽象级别。颜色模型选择器是原始的基本HTML组件,而隐藏了颜色滑块的实际实现。您可以在心理上“阅读”渲染方法:

因此,此模块呈现了一个Picks字段。它有三种选择。选项包括RGB,CMYK和HSB。现在,所选选项将保留为颜色模型。现在,这还将为提供的模型和颜色渲染一些颜色滑块。

SLA规则告诉您将抽象保持在同等水平。您必须将选择选择器拉出其个人组成部分:

const ColorModelSelector =({model,onChange})=> (
  <选择值= {型号} onChange = {onChange}>
    <option value=”rgb”>RGB</option>
    <option value=”cmyk”>CMYK</option>
    <option value=”hsb”>HSB</option>
  </select>
); [Courtesy-medium.com]

因此,您可以在ColorPicker执行中使用此原始组件:

ColorPicker类扩展了React.Component {
  状态= {
    模型:“rgb”,
  };
  handleModelChange = e =>
    this.setState({model:e.target.value});
  render(){
    const {color,onChange} = this.props;
    const {model} = this.state;
    返回(
      <div>
        <ColorModelSelector
          型号= {型号}
          onChange = {this.handleModelChange}
        />
        <ColorSliders
          型号= {型号}
          值= {颜色}
          onChange = {onChange}
        />
      </div>
    );
  }
} [Courtesy-medium.com]

如果您再次“阅读”渲染技术,则会发现更改。如果您仔细观察,可以发现变化。

该因子呈现颜色模型选择器。还有一些给定型号和颜色的颜色滑块。

下次您编写React组件时,请设法考虑所涉及的各种抽象级别。此外,请应用SLA原则。结果将更易于阅读,维护和理解。

领域

现在,对于这些字段,我们已经清除了,我们需要用户可以输入的多种限制类型。如果只有几个不同的选择,则可以很好地将逻辑包括在抽象中。

常量字段=({名称,标签,输入成分:输入,输入道具})=> {

const value = undefined / *显示值* /

const onChange =未定义/ *更改值* /

返回(

<React.Fragment>

{标签}

<Input

名称={name}

值= {值}

onChange = {onChange}

{…inputProps}

/>

</React.Fragment>

)

}

 

//这里的文本输入是一个示例

//所有输入类型的道具都相同

const TextInput =({{name,value,…props}) => (…)

 

 

const App =()=> (

<Form>

<Field

标签=’Test input’

名称=’TestElement’

inputComponent = {TextInput}

/>

</Form>

)

[Courtesy-medium.com]

形成

根据较早的过程说明,我们认为本例中的数据将负责管理验证和表单数据的状态。给出初步的道德观念并触发首脑会议也是可行的。该表格不应该关注早期价值的来源。现在,提交时会发生什么,这意味着这两个都应该被发现。

const 形成 =({{initialValues,onSubmit,children})=> {

 

归还孩子({… })

} [courtesy-medium.com]

 

结论

可组合组件和通用抽象加快了开发速度。现在,每个新功能都可以培养可重用的组件。一旦我们开始增加Datepicker,这对我们来说就显而易见了。我们’ve除了日历之外,已经具有所有其他组件。

解释抽象组件的责任会使选择组件内部隐藏和公开的逻辑松开。当我们最终讨论架构而不是实现时,它使团队内部的对话更加富有成效。例如,我们在一开始就解释说,我们在Field组件之外描述了输入因子。这样做的主要原因是,我们可能最终会获得大量的各种类型的字段。另外,我们不’想要将过程绑定到字段中。如果您从头开始阅读,您将再次理解。

用位规则构造抽象层有助于说明抽象层之间的职责和连接。我们将原子设计用作规则的基础。它解释了五个抽象层,并为它们提供了高级任务。这有助于开始设置具有相似抽象级别的组件。

 

 

 

作者头像
QuikieApps
//www.qinheli.com.cn/blog

发表评论

您的电子邮件地址不会被公开。 必需的地方已做标记 *

我们使用cookie为您提供最佳体验。