reactjs - convert javascript es6 class to functional programming style - Stack Overflow

admin管理员组

文章数量:1400167

I have a class that wrote in reactjs, but would like to convert to function using functional programming and not OOP. Anybody tell me how? Follow my class.

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)

}

I have a class that wrote in reactjs, but would like to convert to function using functional programming and not OOP. Anybody tell me how? Follow my class.

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)

}

• javascript
• reactjs
• class
• functional-programming
• es6-class

Share Improve this question Follow edited Sep 22, 2017 at 1:06 Alejandro A. E. Díaz asked Sep 21, 2017 at 23:45 Alejandro A. E. DíazAlejandro A. E. Díaz 3511 silver badge88 bronze badges 5

• What exactly makes you think that your current code is not functional? – Bergi Commented Sep 22, 2017 at 0:00
• 1 He doesn't mean he wants it to be "functional", he wants to use the "functional programming style" instead of the "object-oriented style". – Duncan Thacker Commented Sep 22, 2017 at 0:01
• Why do you want to avoid objects? (Which is quite impossible in JS anyway). They're the best solution for plex structures like yours. Your current solution has immutable data, that's all what is needed. – Bergi Commented Sep 22, 2017 at 0:01
• @DuncanThacker That's one way to understand the question, but I'm not so sure there if method/function invocation syntax is all he wants to change. – Bergi Commented Sep 22, 2017 at 0:04
• 1 @AlejandroA.E.Díaz I agree with Bergi that you already have a "functional" program – "avoid the use of objects" isn't a thing; if you've heard someone say that functional programs don't (or can't) use objects, they're wrong, and grossly misunderstand functional programming – Mulan Commented Sep 22, 2017 at 20:29

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

An alternate approach is to make a "pure data" flocculator object:

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

and pass it into each function, which separates your data model from your business logic in a nice FP style:

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

which you call like this:

const t = tiempo( myFlocculator, q );

So now you can create any number of functions which understand how to work with flocculator data, without binding them up in a class. If you want you can even have a constructor-like function:

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

The easiest way is to just export the individual functions directly by name, and give them more parameters to replace the stored ones from the class. 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);

You could implement redux and react-redux packages and use stateless functional ponents.

redux allows you to inject all your state and methods as props, so the only way you would need a full class ponent would be for a lifecycle method.

本文标签： reactjsconvert javascript es6 class to functional programming styleStack Overflow