Question

我有一个在reactjs中编写的类，但想使用函数式编程而不是OOP转换为函数。谁有人告诉我怎么样？跟着我的课。

import * as h from './hydraulic';

export default class verticalfloculator_diag {
  constructor (width, length, depth, npantalla, espaciamiento, espesor, pasos) {
    this.detention_time = 0;
    this.ancho = width
    this.largo = length
    this.profundidad = depth
    this.npantalla = npantalla
    this.espaciamiento_pantallas = espaciamiento
    this.espesor_pantallas = espesor
    this.alto_pasos = pasos
    this.area_entrepantallas = this.espaciamiento_pantallas * this.ancho
    this.volumen = this.ancho * this.profundidad * this.largo
    this.radiohidraulico = h.radio_hydraulico(this.area_entrepantallas, 2 * (this.ancho + this.espaciamiento_pantallas))
    this.anchohueco = 0.3
    this.altohueco = 0.2
  }


  Q = (q) => h.q_m3s(q);
  tiempo = (q) => this.volumen / this.Q(q);  // en m3
  velocidad_canales = (q) => h.velocity(this.Q(q), (this.area_entrepantallas));
  velocidad_pasos = (q) => h.velocity(this.Q(q), (this.alto_pasos * this.ancho));
  velocidad_huecos = (q) => h.velocity(this.Q(q), (this.altohueco * this.anchohueco));
  perdidascanales = (q) => h.perdidas_canales(0.013, this.velocidad_canales(this.Q(q)), this.radiohidraulico);
  perdidasenvueltas = (q) => ((this.npantalla + 1) * Math.pow (this.velocidad_canales(q),2) + (this.npantalla) * Math.pow(this.velocidad_pasos(q),2))/2/9.81
  perdidasenhuecos = (q) => Math.pow(this.velocidad_huecos(q),2)/2/9.81
  perdidastotales = (q) => this.perdidascanales(q) + this.perdidasenvueltas(q) + this.perdidasenhuecos(q)

}

Answer 1

另一种方法是制作纯数据＆＃34;絮凝剂对象：

const myFlocculator = {
    volumen: 10,
    ancho: 50
    //etc
};

并将其传递给每个函数，该函数将您的数据模型与业务逻辑分离成一个漂亮的FP样式：

export const tiempo = (floculator, q) => floculator.volumen / Q(q);

你这样称呼：

const t = tiempo( myFlocculator, q );

现在，您可以创建任意数量的函数，这些函数了解如何使用絮凝器数据，而无需在类中绑定它们。如果你愿意，你甚至可以拥有类似构造函数的功能：

function createFloculator( width, length, depth, npantalla, espaciamiento, espesor, pasos) {
   return {
      ancho: width,
      large: length, 
      //etc
   };
}

Answer 2

最简单的方法是直接按名称导出各个函数，并为它们提供更多参数来替换类中存储的函数。 E.g。

export const Q = q => h.q_m3s(q); // or possibly even just Q = h.q_m3s
export const tiempo = (q, volumen) => volumen / Q(q);

Answer 3

您可以实现redux和react-redux包并使用无状态功能组件。

redux允许您将所有状态和方法作为props注入，因此您需要完整类组件的唯一方法是生命周期方法。

将javascript es6类转换为函数式编程风格

3 个答案: