What are the differences between the three methods of defining components in react?

Difference: 1. Functionally defined stateless components cannot access life cycle methods, while es5 and es6 methods define stateful components and can access life cycle methods; 2. The function this in the es5 method It can be automatically bound, but the function this in the es6 method cannot be automatically bound and needs to be bound manually.

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

What are the differences between the three methods of defining react components in react

After the launch of React, there have been three ways of defining react components for different reasons, all of which lead to the same goal; the three specific ways are:

• Functionally defined stateless components

• es5 native way React.createClass defined components

• The components defined in es6 form extends React.Component

1. Stateless functional components

It is for creating pure display components. This This kind of component is only responsible for displaying based on the incoming props, and does not involve state operations

The component will not be instantiated, the overall rendering performance is improved, and the this object cannot be accessed, and the life cycle methods cannot be accessed

2. ES5 native method React.createClass // RFC

React.createClass will self-bind function methods, causing unnecessary performance overhead and increasing the possibility of code obsolescence. sex.

3. E6 inheritance form React.Component // RCC

is currently a highly recommended way to create stateful components and will eventually replace the React.createClass form; compared to React.createClass can better achieve code reuse.

The difference between stateless components and the latter two

Compared with stateless components, React.createClass and React.Component both 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

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

The member function of the component created by React.Component will not automatically bind this, and the developer needs to bind it manually, otherwise this cannot obtain the current component instance object.

The component property type propTypes and its default props property defaultProps have different configurations

When React.createClass creates a component, the property type of the component props and the component default The properties will be configured as properties of the component instance, where defaultProps is to use the getDefaultProps method to obtain the default component properties

React.Component When configuring these two corresponding information when creating a component, they are used as component classes The properties are not the properties of the component instance, which are the so-called static properties of the class.

The configuration of the initial state of the component is different

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

The state of the component created by React.Component is declared in the constructor like initializing component properties.

Final summary

Whenever possible, try to use stateless component creation.

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

Recommended learning: "react video tutorial"

The above is the detailed content of What are the differences between the three methods of defining components in react?. For more information, please follow other related articles on the PHP Chinese website!