Sure, I'll take a snippet from an upcoming book of mine that I need to finish
ReactJS has a wildly inflexible architecture that aggressively forces their users to conform to an orthodoxy. As an example let's say we have the following
code
function C() {
var A = {
something: () => console.log("hi")
},
B = document.createElement('div');
B.onclick = () => A.something();
}
This small snippet of code violates "best practices" in react and thus is almost, but not quite impossible to do.
See the problem here is that B and A are directly interacting with each other. If we were to map things in react-land, they would show that C has "children" of A and B and here A and B talk to each other "horizontally" which is heretic to the purity of the
orthodoxy.
The hierarchical nature here is an unwavering assertion about the world. Essentially the claim is as follows:
C
/ \
A---B
The A <=> B is what forces us to wear a scarlet letter and live on the edge of the town.
Therefore we no longer solve a problem. Instead, we are imposed upon us an aesthetic puritism do to a natural belief of "props down, events up". A popular way to do this basic programming technique that's been readily available in effectively every programming language since the first digital computer (Plankalkül had it in 1942) is the usual suspects either add "a new testament" to the orthodoxy, in this case with something called "redux" or figure out an acrobatic way to comply.
Let's do the second. So we need to "pass down" things that will "pass up". We have a solution, now we must go backwards, first we will go
into "classes" to make things more orthodox.
class A {
componentDidMount() {
this.props.connector(this);
}
something() {
console.log('hi');
}
render() {
return;
}
};
class B {
render() {
return <div onClick={ this.props.onClick }>
}
};
class C {
constructor() {
super(props);
// here's our connecting function
this.connector = this.connector.bind(this);
this.onclick = this.onclick.bind(this);
this.state = {connector: ''};
}
connector(obj) {
this.setState({connector: obj});
}
onclick() {
this.state.connector.something();
}
render() {
return (
<A connector={ this.connector } />
<B onClick={ this.onclick } />
);
}
};
So to simplify this flow
A -> B
We now do
C -> A -> C -> B -> C -> A
Or as a diagram, we get the following:
.---◢ ◣----.
.▶B---▶C--. \
| ◤--'|\ ▼ /
\____/ '►A-'
See how we do multiple round trips passing things through C in order to maintain the hierarchy? This is how we stay within the orthodoxy
If this looks like Ptolemaic astonomy, that's not a coincidence! In Ptolemaic astronomy the assumption of Earth being
the center of the universe was enforced as the orthodoxy. As a result you got epicycles upon epicycles because the simpler model was
forbidden.
People were so committed to the more convoluted orthodoxy that anyone who questioned it was put on trial for heresy.
Claiming that A -> B was even possible was the crime.
The great success of React is in enforcing a new kind of authoritarianism: it enforces doctrine by explicitly disallowing heretical code.