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

This article mainly introduces "what are the three methods of defining components in react". In daily operation, I believe many people have doubts about what the three methods of defining components in react are. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "what are the three methods of defining components in react?" Next, please follow the editor to study!

Differences: 1, functional definition stateless components can not access lifecycle methods, while the methods of es5 and es6 define stateful components and can access lifecycle methods; 2, the function this in the es5 method can be automatically bound, while the function this in the es6 method can not be automatically bound, it needs to be bound manually.

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

What is the difference between the three ways of defining components in react

After the introduction of React, there are three ways to define react components for different reasons, and there are three specific ways:

Stateless components defined by functions

Components defined by es5 Native React.createClass

Components defined by extends React.Component in es6 form

1. Stateless functional components

It is designed to create a pure presentation component, which is only responsible for displaying according to the incoming props and does not involve the operation of state state.

Components are not instantiated, overall rendering performance is improved, this objects cannot be accessed, lifecycle methods cannot be accessed

2. ES5 native React.createClass / / RFC

React.createClass will self-bind function methods, causing unnecessary performance overhead and increasing the likelihood that the code will become obsolete.

3. E6 inheritance form React.Component / / RCC

The highly recommended way to create stateful components will eventually replace the React.createClass form; code reuse can be better achieved than React.createClass.

The difference between stateless components and the latter two

In contrast to stateless components, both React.createClass and React.Component create stateful components that are instantiated and have access to the component's lifecycle methods.

The difference between React.createClass**** and React.Component

Function this self-binding

The this of each member function of the component created by React.createClass is automatically bound by React, and the this in the function will be set correctly.

The member functions of the components created by React.Component will not be automatically bound to this and need to be bound manually by the developer, otherwise this cannot obtain the current component instance object.

The component property type propTypes and its default props property defaultProps configuration are different

When React.createClass creates a component, the property type of the component props and the default properties of the component are configured as the properties of the component instance. DefaultProps uses the method of getDefaultProps to obtain the default component properties.

When React.Component configures these two corresponding messages when creating a component, they are configured as properties of the component class, not as properties of the component instance, that is, the so-called static properties of the class.

The configuration of the component initial state state is different.

The state state of a component created by React.createClass is to configure the state related to the component through the getInitialState method

The state state of a component created by React.Component is declared in constructor as if it were initializing the component properties.

Finally, a summary.

Whenever possible, try to use stateless components to create forms.

Components that can be created with React.Component try not to create components in the form of React.createClass to enhance reusability and performance.

At this point, the study on "what are the three ways to define components in react" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.