current position：Home>What are the three ways to define components in react
What are the three ways to define components in react
2022-04-29 19:26:31【Billion cloud speed】
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 ！
author[Billion cloud speed],Please bring the original link to reprint, thank you.
The sidebar is recommended
- How to use HTML to display segmentation
- How to define and use HTML box model
- How to use the box pack attribute and box align attribute inside the box in HTML
- What are the differences and relationships among HTML, CSS and JS
- How to save home page as HTML
- How to solve the post request return 405 of nginx reverse proxy to HTML page
- How to upload pictures without refresh with HTML5 + PHP
- How to define HTML text tags, pictures, paths, hyperlinks and anchors
- How to upload static HTML files to the host or server
- How to use calculated and watch in Vue
guess what you like
How does Vue Preview PDF, word, xls, PPT and txt files
Can jQuery listen for events
Luxury cars "senseless price increase", the configuration of the new Porsche Macan remains unchanged, with a maximum increase of 19000 yuan
1-ch579m program upgrade OTA (self built Internet of things platform) - ch579m uses its own Ethernet to remotely download and upgrade MCU program through HTTP (MCU program rotation check and update)
The front-end downloads files, and the back-end sends gzip files. Is there a way to get the file size?
Why does Vue route jump refresh the page?
The conversion code of Babel in the project needs to include node_ Modules
[nginx] prefix removal in nginx proxy pass configuration
Vue packaging error module build failed: typeerror: this getOptions is not a function
Use of I18N in Vue
- Who is bunk, the new hero of endless dungeon? Introduction to new hero bunk skills
- Front end entry first bullet | development tools and configuration
- Nice HTML login page
- Vue error prone summary
- Summary of material resources website (icon | wallpaper | Adobe plug-in | jQuery plug-in | badge | online conversion | color splicing | continuous update)
- Step by step, configure nodesjs environment with hbuilder for Vue JS development
- Vue sets the global websocket and accepts message notification processing on the corresponding page
- Solve the problem that vuex data is reset during page refresh
- Java data structures and algorithms lesson 2 - generics
- Leetcode-82 - delete duplicate Element II in the sorting linked list
- [front end] quickly create HTML
- Vue router routing navigation
- Vue router redirection and alias
- Vue router named routes, (nested) named views
- Dynamic components & slots & custom instructions for getting started with Vue Foundation
- K8s deployment-43-take you to learn ingress nginx (Part 2)
- Detailed breakdown of actual combat of CMS background system project (VII)
- Explore the store | new architecture blessing, performance and safety. This style is super personality_ Integra_ Honda_ platform
- Sports kit blessing / replacement of four cylinder engine Chevrolet chuangku RS live shooting analysis_ Aspect_ Display screen_ Complete vehicle
- Talking about nodejs server
- Node. js＆lt; I & gt—— Encounter node and repl usage
- Vue basic API: calculation attribute + filter + listener
- 1-stm32 + mn316 (nb-iot) remote upgrade OTA (self built Internet of things platform) - STM32 uses HTTP to download program files and upgrade programs through mn316 (MCU program rotation check and update)
- Vue Axios response interception
- vue3 ref
- How does Vue transfer the data from the parent component to the child component intact?
- The back-end interface developed by springboot in idea and the Vue front-end developed by vscode. How to integrate Vue code into springboot?
- Typescript type compatibility learning
- Summary of bugs encountered in front-end development
- Chrome developer tool: performance analysis using web panel
- Collation of common semantic elements and global attributes in HTML
- Life cycle in Vue
- 5.1 fear of traffic jam? With a budget of less than 100000, these cars with adaptive cruise make it easy for you to travel
- Docker compose deploy nginx configure SSL
- The content of element type “mapper“ must match “(cache-ref|cache|resultMap*|parameterMap*|sql*|inse
- Vue uses two-way binding to implement the user registration page
- Is Infiniti qx60 worth less than 400000 yuan? It depends on the discount