What is Data Flow?
When talking about data flow, we first need to mention Functional Reactive Programming (FRP). As the name suggests, FRP is a programming paradigm that utilizes components of functional programming for reactive programming.
Data flow is an important concept within reactive programming, where program logic is modeled as data and its changes flowing between operations.
For the simplest example, consider the assignment statement b = a * 2. If a * 2 is defined as an operation, then whenever the incoming value of a changes, b will automatically respond to this change.
You might immediately think of React’s design philosophy, UI = f(state). For instance, in a function component ({ a }) => (<div>{ a * 2 }</div>), as long as the prop a changes, the content rendered by the component will automatically update.
Certainly, a program often contains multiple operations, and when data flows through multiple operations, each operation is responsible for its own part. This data processing procedure is somewhat like an assembly line in a factory. So, how does this analogy apply to a React application?
We know that the basic unit of development in React is a component, and multiple components form a component tree at…
