Understanding React: Core Concepts, State Management, and Reactive UI Building

Welcome to the "UC International Technology" public account, where we share high‑quality technical articles on client‑side, server‑side, algorithms, testing, data, and front‑end topics.

The author, Randy from UC International R&D, previously disliked React because writing render functions felt less convenient than template‑based approaches like Vue, especially for complex conditional rendering.

After practical experience and further reading, the author realized the initial bias stemmed from not thinking in React terms; many treat React as a full framework instead of a UI library, missing its core purpose: a JavaScript library for building user interfaces.

React’s essence is to provide a component system and an efficient DOM diff algorithm. Each component receives state (or props) and returns a view, similar to a pure function. For example, a Clock component can be a function that takes a time parameter and returns an HTML string.

Directly updating the DOM with innerHTML on every tick re‑renders the entire #app tree, which is costly. React’s diffing determines the minimal nodes to update, reducing overhead.

Instead of manually calling setInterval and re‑rendering, React encourages updating state via setState, which automatically triggers a re‑render—this is the reactive pattern.

Pure functions, which have no side effects, are central to functional programming. A simple sum function is pure because it always returns the same output for the same inputs. React components behave like pure functions: given the same props, they produce the same view.

While state => View is essential, full UI construction also requires managing state changes, often with external state managers such as Redux or MobX. The article demonstrates MobX: when an observable changes, observer‑wrapped React components re‑render, cleanly separating side‑effects from the view layer.

Testing follows this separation: side‑effect logic is tested independently, and view components are tested by providing a store instance and asserting the rendered output using tools like Enzyme.

In summary, React is a means to implement reactive UI construction: it offers a component system, state‑driven rendering, and an efficient DOM diff algorithm. Understanding these concepts, rather than treating React as a monolithic framework, simplifies front‑end development.

“UC International Technology” is dedicated to sharing high‑quality technical articles; follow the public account and share the content with friends.