Ideen zu react

Ideen.md

• React callback-hell => das wird zu nested funktonsaufrufen durch react (siehe wenn man reacttree mit babel umrechneb lässt) *das könnte man mit compose machen
• Provider sollten read-onky sein, ctx also nicht bearbeitbar,
• Fotms (fotmik-field) => setter nicgt in komponenten reingeben, sondern in der eltern-komponenete das onchange reingeben, ansonsten verändert das.kund sein Elternteil was zu sehr und sinnlos die app verschränkt und verwirrend macht
• Insgesamt sollte optimalerweise ausschließlich mit generellen Events(onchangs, onload) gearbeitet werden und due eltern-komponenten sollten das für sich entsprechend implementieren => *ein setter sokltr niemals an eun.kind weitergegeben werden sindern immer nur mut inconchange subscriben sodass das kind keine ahnujg haben mhss was ltztendlicg implementiert wird

zb dropdown:

inout => load Vorschläge von db => dropdown miz values znd.onchangr,

composed React - Ideen

import * as React from "react";
import { compose } from "recompose";

const ctx1 = React.createContext();
const ctx2 = React.createContext();

// JSX : 18 Zeilen
const Test = props => (
  <div style={props.style}>
    <ctx1.Consumer>
      {ctx1Vals => (
        <ctx2.Consumer>
          {ctx2Vals => (
            <div>
              <p>
                {ctx1Vals} / {ctx2Vals}
              </p>
            </div>
          )}
        </ctx2.Consumer>
      )}
    </ctx1.Consumer>
    <div />
  </div>
);

// current JS : 15 Zeilen
const Test = props =>
  React.createElement(
    "div",
    { style: props.style },
    React.createElement(ctx1.Consumer, null, ctx1Vals =>
      React.createElement(ctx2.Consumer, null, ctx2Vals =>
        React.createElement(
          "div",
          null,
          React.createElement("p", null, ctx1Vals, " / ", ctx2Vals)
        )
      )
    ),
    React.createElement("div", null)
  );

Proposal 1

Im Prinzip ist jede Zeile eine eigene Komponente, props können an kinder durch 3. Parameter übergeben werden (bzw 2. bei shorthand React.div)

// Proposal 1 : 13 Zeilen
const T2 = compose(
  ({ style, ...rest }) => React.div({ style }, rest),
  props => [
    compose(
      () => React.createElement(ctx1.Consumer),
      () => ctx1Vals => React.createElement(ctx2.Consumer, null, ctx1Vals),
      ctx1Vals => ctx2Vals => React.div(null, { ctx1Vals, ctx2Vals }),
      vals => React.p(null, vals),
      vals => vals.ctx1Vals
    ),
    () => React.div()
  ]
);

• Grundsätzlich gut, aber die weitervererbung über den 3. bzw. 2. Parameter könnte zu verwirrend sein
• Typisierung mittels zb TypeScript wird nicht gut sein

Proposal 2

// Proposal 2 : 23 Zeilen
const T3 = props =>
  compose(
    React.p,
    `${props.ctx1Vals} / ${props.ctx2Vals}`
  );

const T2 = props =>
  compose(
    createElement(ctx2.Consumer),
    ctx2Vals => React.createElement(T3, { ...props, ctx2Vals })
  );

const T2 = props =>
  compose(
    React.div({ style }),
    [
      compose(
        React.createElement(ctx1.Consumer),
        ctx1Vals => React.createElement(T2, { ctx1Vals })
      ),
      React.div(null)
    ]
  );

Zu starr, da berechnungen nicht weitergegeben werden können => es entsteht zu viel boilerplate