react What are the three ways to define components

This article mainly introduces “react What are the three ways to define components ”, In daily operation , I believe a lot of people are react There are doubts about what the three methods of defining components are , Xiao Bian consulted all kinds of materials , Sort out simple and easy-to-use operation methods , I hope to answer ”react What are the three ways to define components ” Your doubts help ！ Next , Please follow Xiaobian to learn ！

difference ：1、 Functionally defined stateless components cannot access lifecycle methods , and es5 and es6 Methods define stateful components and have access to lifecycle methods ;2、es5 Functions in methods this You can automatically bind , and es6 Functions in methods this Cannot automatically bind , Need to bind manually .

The operating environment of this tutorial ：Windows10 System 、react17.0.1 edition 、Dell G3 The computer .

react What is the difference between the three methods of defining components

React After the launch , There are three definitions for different reasons react The way of components , All roads lead to Rome ; Three specific ways ：

• Stateless components defined as functions

• es5 The original way React.createClass Defined components

• es6 Formal extends React.Component Defined components

1、 Stateless functional components

It is to create a pure presentation component , This component is only responsible for passing in props To show , Not involved state Operation of status

Component will not be instantiated , Improved overall rendering performance , Cannot access this object , Methods that cannot access the lifecycle

2、ES5 The original way React.createClass // RFC

React.createClass Will self bind function methods , Results in unnecessary performance overhead , Increase the possibility of code obsolescence .

3、E6 Form of inheritance React.Component // RCC

Currently, it is highly recommended to create stateful components , It will eventually replace React.createClass form ; be relative 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 It's all about creating stateful components , These components are to be instantiated , And you can access the component's lifecycle methods .

React.createClass**** And React.Component difference

function this Self binding

React.createClass Components created , For each of its member functions this There are React Auto bind , Function this Will be set correctly .

React.Component Components created , Its member functions are not automatically bound this, Need developers to bind manually , otherwise this Cannot get current component instance object .

Component property type propTypes And default props attribute defaultProps Different configurations

React.createClass When you create a component , About components props The attribute type of the component and the default attribute of the component will be configured as the attribute of the component instance , among defaultProps It's using getDefaultProps To get the default component properties

React.Component When configuring these two corresponding information when creating a component , They are properties as component classes , Is not a property of a component instance , That is, the so-called static properties of the class .

Component initial state state Different configurations of

React.createClass Components created , Its state state It's through getInitialState Method to configure component related state ;

React.Component Components created , Its state state Is in constructor Declared in the same way as initializing component properties .

The final summary

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

It works React.Component Try not to create components React.createClass Form to create components , To enhance reusability and improve performance .

Here we are , About “react What are the three ways to define components ” That's the end of my study , I hope we can solve your doubts . The combination of theory and practice can better help you learn , Let's try ！ If you want to continue to learn more related knowledge , Please continue to pay attention to Yisu cloud website , Xiaobian will continue to strive to bring you more practical articles ！