- 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,
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)
);
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 : 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