This article is a study note I wrote when I was learning React. I will record and share it here. This is the third article, which mainly introduces modules and components in react.
Table of contents
2. React component-oriented programming
Review of 2.2.1 type knowledge
2.2.2 Learning of class components
1. Modules and components
1.1 Module
Understanding: A js program that provides specific functions to the outside world is generally a js file.
Why split it into modules: As business logic increases, the code becomes more complex.
Function: reuse js, simplify js writing, and improve js operating efficiency.
1.2 Components
Understanding: a collection of codes and resources (html, css, image, etc.) used to achieve local functional effects
Why use components: The functions of an interface are very complex. Split a group of complex functions into components, and then use components to form this complex functional interface.
Function: Reuse coding, simplify project coding, and improve operating efficiency.
1.3 Modularity
When the js of an application is written in modules, then the application is a modular application.
1.4 Componentization
When an application is implemented in a multi-component manner, then the application is a componentized application.
2. React component-oriented programming
2.1 Functional components
1. When ReactDOM.render generates virtual dom, because the jsx language will treat dom names starting with lowercase letters as html tags, and dom names starting with capital letters as components. So we have to capitalize the names of functional components.
2. ReactDOM.render(<MyComponent/>, parameter 2), when using ReactDOM.render to generate virtual dom, the name of our functional component must be wrapped with <>, and it must be a closed tag.
3. After executing ReactDOM.render, React will parse the component tag, find the component MyComponent, and then find that this component is defined by a function, and then call the function to convert the returned virtual dom into a real dom for display on the page.
4.babel turns on strict mode after compilation, so this, which originally pointed to window, points to undefined.
code show as below:
<div id="test"></div><script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
//1.创建函数式组件
function MyComponent() {
console.log(this);//此处的this是undefined，因为babel在编译后开启了严格模式
return <h2>我是用函数定义的组件（适用于【简单组件】的定义）</h2>
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent/>, document.getElementById('test'))
/*
执行了ReactDOM.render之后，
1.React解析组件标签，找到了MyComponent组件
2.发现组件是使用函数定义的，然后调用该函数，将返回的虚拟dom转为真实dom，随后展示在页面中
*/The effect is as follows:
2.2 class components
Review of 2.2.1 type knowledge
1.Create a class
code show as below:
//创建一个Person类
class Person{
//构造器方法
constructor(name,age){
this.name = name
this.age = age
}
//普通方法,speak方法放在了Person的原型对象上，供实例使用
//通过person实例调用speak时，speak中的this指向person实例
speak(){
console.log(`我的名字是${this.name},我的年龄是${this.age}`);
}
}
//创建Person类的实例对象、
const p1 = new Person('tom',28)
const p2 = new Person('jerry',29)
console.log(p1);
console.log(p2);
p1.speak()
p2.speak()2. Class inheritance
//创建一个Student类，继承于Person类
class Student extends Person{
constructor(name,age,grade){
super(name,age)//super关键字，用于继承父类的属性，必须放在第一行
this.grade = grade
}
//speak方法是父类的方法，在子类依然可以使用。从子类Student的原型链依次向上查找，在父类的原型中找到speak方法并调用
//重写从父类继承的方法，那么speak方法在子类的原型中就已存在，在从子类原型链向上查找的时候，在子类原型中找到，就会直接调用停止查找。
speak(){
console.log(`我的名字是${this.name},我的年龄是${this.age},我的年纪是${this.grade}`);
}
}
const s1 = new Student('张三',15,'大一')
console.log(s1);
s1.speak()3. Summary of class knowledge
1. The constructor in the class does not have to be written. It is necessary to do some initialization operations on the instance, such as adding specified attributes.
2. If class A inherits class B and a constructor is written in class A, then super in the constructor of class A must be called.
3. The methods defined in the class are placed on the prototype object of the class for use by instances.
2.2.2 Learning of class components
1. Create class components.
Let's inherit React's built-in class React.Component to create a class MyComponent.
2. Use the render function.
The renader is placed on the prototype object of the class for use by the MyComponent instance we create. When the render function is called, it points to the instance object of MyComponent. We can log this in the code to observe the direction of this.
Print the output results:
3. When render returns the virtual dom, the virtual dom will be converted into a real dom.
4. Render the component to the page. After writing the component tag, react will automatically generate an instance.
In ReactDOM.render(<MyComponent/>, document.getElementById('test')), we wrote a
<MyComponent/>, react detects that this is a component, then finds the corresponding class component based on the name, and automatically generates an instance based on this component.
code show as below:
<div id="test"></div><script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
//1.创建类式组件 如果创建类式组件，必须去继承React.Component，此为react内置类
class MyComponent extends React.Component{
render(){
//renader是放在类的原型对象上，供MyComponent实例使用
//render中的this在被调用时指向MyComponent的实例对象，MyComponent的组件实例对象
console.log('reder中的this',this);
return <h2>我是用类式定义的组件（适用于【复杂组件】的定义）</h2>
}
}
//2.渲染组件到页面，写了组件标签后react会自动生成一个实例
ReactDOM.render(<MyComponent/>, document.getElementById('test'))
/*
执行了ReactDOM.render（）后发生了什么？
1.React解析组件标签，找到MyComponent组件
2.发现组件是类定义的，随后new出该类的实例，并通过该实例调用到原型上的render方法
3.将renader返回的虚拟DOM转换为真实DOM，随后呈现到页面上
*/
</script>