Understanding React: Component Architecture, Props, State, Lifecycle, Server‑Side Rendering, and React‑Native

This article, presented by Zuo Ming, a senior front‑end engineer at Tencent, introduces the fundamental concepts of React and demonstrates how they relate to real‑world component design.

Using the analogy of a traditional bamboo water wheel (竹笕), the author explains that water flowing through the bamboo tubes represents data flowing through React components: data moves unidirectionally from parent to child via props , which are read‑only and accessed through this.props .

The article then covers PropTypes as a built‑in validation tool for props, showing how to declare required types, use isRequired , and create custom validators to catch incorrect usage early.

Next, the concept of state is introduced as an internal data store that drives component rendering. A simple toggle button example illustrates how this.setState() updates the UI and how event handlers (e.g., onClick ) are bound to components, mirroring native JavaScript events but with React’s camel‑cased naming.

The article provides a detailed walkthrough of the React component lifecycle, divided into three phases:

Initialization – getDefaultProps , getInitialState , componentWillMount , and the mandatory render method.

Mounting – componentDidMount for DOM‑related side effects such as third‑party plugin initialization.

Updating – componentWillReceiveProps , shouldComponentUpdate , componentWillUpdate , render , and componentDidUpdate for handling prop or state changes efficiently.

Unmounting – componentWillUnmount for cleaning up timers, event listeners, or injected DOM nodes.

Server‑side rendering (SSR) is then described: using React.renderToString() within an Express route to generate HTML on the server, send it together with initial data, and hydrate the client‑side React tree. The author notes the need to escape JSON strings that may contain HTML tags.

The discussion moves to React‑Native , highlighting its ability to run the same React codebase on iOS and Android, providing rapid iteration similar to web development while delivering native app performance. Benefits such as over‑the‑air JavaScript updates and reduced need for separate native teams are emphasized.

Finally, the article touches on unit testing React components (e.g., a checkbox) with tools like Karma, showing that the virtual DOM makes isolated testing straightforward.

Overall, the piece equips front‑end developers with a comprehensive understanding of React’s core concepts, best practices, and ecosystem extensions.