Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces in detail "whether react is component-based development". The content is detailed, the steps are clear, and the details are handled properly. I hope this "react is component-based development" article can help you solve your doubts.

React is component-based development; component-based development is the core idea of React, which can develop independent reusable widgets to construct applications, any application will be abstracted into a component tree, component-based development is to split a page into small functional modules, each function to complete its own part of the independent function.

The operating environment of this tutorial: Windows10 system, react17.0.1 version, Dell G3 computer.

Is react component-based development?

React is component-based development

1. Component thought

When people deal with complex problems:

Break up a complex problem into a number of small problems that can be dealt with

If you put it into the whole, you will find that the big problems will be easily solved.

In fact, the above idea is the idea of divide and rule:

Divide and conquer is an important idea of software engineering and the cornerstone of complex system development and maintenance.

The current modularization and componentization of the front end are all based on the idea of divide and rule.

two。 What is component-based development?

Componentization is a similar idea:

If we put all the logic in a page together, it will become very complex to deal with, which is not conducive to subsequent management and expansion.

But if we divide a page into small functional modules, and each function completes its own independent function, then the management and maintenance of the whole page becomes very easy.

We need to think about the whole application through the idea of componentization:

We divide a complete page into many components

Each component is used to implement a functional block of the page

Componentization of 3.React

Componentization is the core idea of React, and the App we encapsulated earlier is a component.

Componentization provides an abstraction that allows us to develop independent reusable widgets to construct our applications.

Any application will be abstracted into a component tree.

The application of component-based thought:

Split the page into small, reusable components as much as possible

This makes our code easier to organize and manage, and more scalable.

4.React component classification

The components of React are more flexible and diverse than Vue, and can be divided into many types of components in different ways:

According to the way components are defined, they can be divided into functional components (Functional Component) and class components (Class Component).

According to whether there are states within the component that need to be maintained, it can be divided into stateless components (Stateless Component) and stateful components (Stateful Component).

According to the different responsibilities of components, they can be divided into display components (Presentational Component) and container components (Container Component).

There is a lot of overlap between these concepts, but their primary focus is on the separation of data logic and UI presentation:

Functional components, stateless components and presentation components are mainly concerned with the presentation of UI.

Class components, stateful components and container components are mainly concerned with data logic

React create component 1. Class component

The definition of class components is required by the following:

The name of the component begins with an uppercase character (whether a class component or a function component)

Class components need to inherit from: React.Component

Class components must implement render functions

Use class to define a component:

Constructor is optional, and we usually initialize some data in constructor

What is maintained in this.state is the data within our components.

The render () method is the only method that must be implemented in class components

The return value of the 2.render function

When the render function is called, it checks for changes in this.props and this.state and returns one of the following types

React element

Usually created through JSX

For example, it will be rendered as a DOM node by React and\ as a custom component by React.

Both are React elements

Array or fragments: enables the render method to return multiple elements

Portals: you can render child nodes to different DOM subtrees

String or numeric type: they are rendered as text nodes in DOM

Boolean or null: nothing is rendered

3. Function component

A function component is a function defined using function, but this function returns the same content as the render function in the class component.

The characteristics of function components (hooks will be discussed later, but it is different)

No lifecycle, it will be updated and mounted, but there is no lifecycle function

No this (component instance)

No internal state (state)

After reading this, the article "whether react is component-based development" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.