zishu's blog

1. What is a React Component?#

A component is conceptually similar to a JavaScript function. It accepts arbitrary inputs (props) and returns a React element that describes what should be displayed on the screen.

Components allow you to split the UI into independent and reusable code snippets, and think about each snippet in isolation.

1. Creating a Component#

// Function component
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// Class component
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

2. Rendering a Component#

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

ReactDOM.render(
  <Welcome />,
  document.getElementById('root')
);

3. Components#

React has three basic principles:

1. React interfaces are completely driven by data.
2. Everything in React is a component.
3. Props are the basic way of communication between React components.

A component takes an input parameter and ultimately returns a React Element. A React Element is the content displayed on the page, similar to a DOM node.

One of the core principles of React is that everything can be a component.

• The user interface is a component.
• Components can be nested to create complex functionality.
• Components can be used to implement side effects.

A complex interface can be divided into many simple components, and each simple component can be further divided into smaller components.

It is somewhat similar to the concept of classes and objects.

2. Component Classification#

1. Stateless Component: A stateless component is the most basic form of a component. It is purely static and does not have any state. Its basic structure consists of properties (props) and a rendering function (render). Since it does not involve state updates, it has the highest reusability. Examples include buttons, input fields, icons, etc. developed in various UI libraries.

2. Stateful Component: A stateful component contains internal state (state) that changes with events or external messages. This constitutes a stateful component. Stateful components usually have lifecycles to trigger state updates at different times. They are commonly used in writing business logic, and the states and lifecycles used vary depending on the scenario.

3. Container Component: To make the responsibilities of a component more focused and further reduce coupling, the concept of container components is introduced. They are mainly responsible for data retrieval and processing logic. This will be mentioned in the design patterns below.

4. Higher-Order Component (HoC): "Higher-Order Component" is also a component design pattern. As a higher-order component, it can add new features and behaviors to the original component. For example, when dealing with logic unrelated to display, such as logging, data retrieval, and data validation, an abstract higher-order component can be created to add these features to the basic component and reduce redundant code.

5. Render Callback Component: The render callback component pattern delegates the rendering logic in a component to its child components. It is also a way to reuse component logic and is also called the render props pattern.

3. Design Principles#

React components are modules in software design, and their design principles should also follow general component design principles. In simple terms, components should have low coupling to make them simple, so that the overall system is easy to understand and maintain.

The design principles are as follows:

• Small interfaces, fewer props.
• Divide components and make full use of composition.
• Extract state to higher-level components and make lower-level components pure functions.

Just like building with building blocks, complex applications and components are composed of simple interfaces and components. There is no absolute method for component division. Choose the appropriate way to divide based on the current scenario and make full use of composition. Writing code is also a process of continuous improvement, striving to achieve:

• Functionality is working correctly.
• Code is clean.
• High performance.