Mastering React Lifecycle and Component Communication: Real-World Practices

React is extremely popular, and most demos you see online are static and toy‑like, not reflecting real production use. In the Interest Community PC version we use React in production, and this article shares the most important practical points.

React lifecycle Cross‑component communication Real‑world scenarios

React Lifecycle

React is only a view layer framework; it provides a complete set of lifecycle hooks that let you control component behavior at every stage, similar to building equipment in a game.

Collect materials → Process materials → Forge → Basic equipment → Defeat boss for advanced material → Compare, improve, forge again → Upgrade equipment → Discard if too high level

The official documentation divides the lifecycle into three phases.

Mounting

getInitialState

Collect raw materials Initialize state; called once.

componentWillMount

Process raw materials Called before mounting.

render

Forge in the smithy Assemble virtual DOM and render to the page.

componentDidMount

Complete basic equipment Mounting finished; DOM can be accessed.

Updating

Defeat the boss and use advanced materials to upgrade.

componentWillReceiveProps

Obtain advanced material Called when new props are received.

shouldComponentUpdate

Compare material quality Decide whether to re‑render.

componentWillUpdate

Process material Called before update.

render

Forge in the smithy Assemble virtual DOM and render.

componentDidUpdate

Complete advanced equipment Update finished.

Unmounting

Discard equipment and free memory.

componentWillUnmount

React automatically removes event bindings on unmount; manually bound native events must be cleaned up here.

After componentDidMount and componentDidUpdate you can access the DOM, which is useful for initializing third‑party libraries such as video or audio players.

Understanding the lifecycle lets you develop confidently.

Cross‑Component Communication

Components need to interact beyond their own lifecycle.

Communication scenarios: parent‑child, unrelated components.

1. Parent calls child

Use React’s ref to invoke child instance methods.

2. Child calls parent

Pass a function via props from parent to child; the child can invoke it.

3. Unrelated components

Use a pub/sub pattern; Flux provides a single‑direction data flow with Store, Dispatcher, and Actions. Reflux, a Flux‑based library, simplifies this in our project.

Flux promotes a unidirectional data flow: Store holds state, Dispatcher connects actions to stores, and components subscribe to store changes.

We adopted Reflux for its convenience.

Case Studies

After mastering lifecycle and communication, plus JSX syntax, you can build many custom solutions.

1. Infinite Scroll

Process flow (illustrated in images) maps to lifecycle methods; code (pseudo‑code) demonstrates the implementation.

2. Comment Reply Update

Two components: comment list and comment form. After a successful reply, the list updates via the communication pattern shown.

Other Notes

Why we chose Reflux over Redux:

When we started, Redux didn’t exist; Reflux was the popular Flux implementation.

Learning Reflux took about an hour, while Redux required a full day of documentation.

Two common Reflux usage patterns:

All async data loading in stores, then dispatch to components (more MVC‑like).

Load data inside components; Reflux only handles cross‑component communication, keeping components self‑contained and easier to reuse.

These are my practical insights from using React in the Interest Community project. Thanks for reading!