1. Functional components
<script type="text/babel">
// 1. Create functional components function Demo() {
// This inside is undefined because the strict mode is turned on after babel is compiled return <h2>I'm using a function to define a component(Applicable to【Simple components】Definition)</h2>
}
// 2. Render the component to the page (<Demo/>,('test'))
</script>
Execute(<Demo/>,('test'))After that, React parses the component tag and findsDemoComponent, find that the component is defined by a function, and then call the function to convert the returned virtual DOM into a real DOM and render it on the page.
Note: ① The first letter of the function must be capitalized; ② The function must have a return value; ③ The component label should be written in the render
2. Type Components
(1) Basic knowledge of category
<script type="text/javascript" >
//Create a Person class class Person {
//Constructor method constructor(name,age){
//This in the constructor is an instance object of the class = name
= age
}
//General Method speak(){
//The spoke method is placed on the prototype object of the class for use by the instance //When calling speak through Person instance, this in speak is the Person instance (`My name is${}，My age is${}`);
}
}
//Create a Student class, inherit from Person class class Student extends Person {
constructor(name,age,grade){
super(name,age)
= grade
= 'Tsinghua University'
}
//Rewrite the method inherited from the parent class speak(){
(`My name is${}，My age is${},I read${}grade`);
()
}
study(){
//The study method is placed on the prototype object of the class for use by the instance //When calling study through Student instance, this in study is the Student instance ('I'm studying hard');
}
}
class Car {
constructor(name,price){
= name
= price
// = 4
}
//The assignment statement can be written directly in the class. The meaning of the following code is: add a property to the instance object of Car, named a, and the value is 1 a = 1
wheel = 4
static demo = 100
}
const c1 = new Car('Benz c63',199)
(c1);
();
</script>
1. The constructor in the class does not have to be written. It must perform some initialization operations on the instance, such as writing only when adding a specified attribute.
2. If Class A inherits Class B and class A writes a constructor, then the super in Class A constructor must be called.
3. The methods defined in the class are placed on the prototype object of the class for use by the instance.
(1) Classical components
<script type="text/babel">
class MyComponent extends {
render(){
//render is placed on the prototype object of MyComponent for use by the instance. //This in render is an instance object of MyComponent <=> MyComponent component instance object. ('this in render:',this);
return <h2>I'm a component defined by a class(Applicable to【Complex components】Definition)</h2>
}
}
//2. Render the component to the page (<MyComponent/>,('test'))
</script>
Execute(<MyComponent/>,('test'))Afterwards, React parses the component tag and finds the MyComponent component. It is discovered that the component is defined using a class, and then new the instance of the class and call the render method on the prototype through the instance. The virtual DOM returned by render is converted to a real DOM and then rendered on the page.
This is the end of this article about React component communication. For more related React component content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!