In parahome on 2016-11-11 by para
transformation
The core premise for React is that UIs are simply a projection of data into a different form of data. The same input gives the same output. A simple pure function.
Abstraction
You can¡¯t fit a complex UI in a single function though. It is important that UIs can be abstracted into reuseable pieces that don't leak their implementation details,Such as calling one function from another without any hesitation.
Composition
You also need to be able to build abstractions from the containers that compose other abstractions.
State
There is actually a lot of state that is specific to an exact projection and not others.
We tend to perfer our data model to be immutable.We thread functions through that can update state as a single atom at the top.
Memoization
Calling the same function over and over again is wasteful if we know that the function is pure. We can create a memoized version of a function that keeps track of the last argument and last result.
Lists
To manage the state for each item in a list we can create a Map that holds the state for a particular item.
Continuations
Unfortunately, since there are so many lists of lists all over the place in UIs, it becomes quite a lot of boilerplate to manage that explicitly.
We can move some of this boilerplate out of our critical business logic by deferring execution of a function. For example, by using currying (bind in JavaScript).
State Map
We can move the logic of extracting and passing state to a low-level function that we reuse a lot.
Memoization Map
Once we want to memoize multiple items in a list memoization becomes much harder. You have to figure out some complex caching algorithm that balances memory usage with frequency.
Luckily, UIs tend to be fairly stable in the same position. The same position in the tree gets the same value every time. This tree turns out to be a really useful strategy for memoization.
to be continue…
comments powered by Disqus