三、React中的模块化与组件化

原文链接：React笔记
查看所有React笔记

React中的模块化与组件化

1. 组件化：

   • 组件是React应用程序的基本构建块，它代表了UI的一部分。每个组件负责呈现一部分页面内容，并通常具有自己的状态和行为。

   • 组件化是一种将UI拆分为独立、可重用的部分的方法。

   • 通过组件化，您可以将应用程序拆分为更小的模块，使代码更易于维护和扩展。每个组件关注自己的部分，降低了代码的复杂性。

   • 例如，您可以创建一个Header组件、Footer组件、Button组件等，然后将它们组合在一起以构建完整的页面。

2. 模块化：

   • 模块是一种将代码拆分为小块的方式，每个模块通常关注一个特定的功能或任务。

• 例如，您可以将一个React组件定义为一个模块，然后在其他地方导入并重复使用它。

1）函数式组件

// 创建函数式组件
function FunComponent() {
    return (
        <h1>函数中组件，适用于简单组件</h1>
    )
}

/*渲染组件到页面*/
ReactDOM.render(<FunComponent/>, document.getElementById("demo"))

组件函数需要首字母需要大写

仍然使用ReactDOM.render进行渲染，但是第一个参数为组件的标签

此时我们可以在React调试工具里面查看我们定义的组件

探讨函数式组件中this的指向

我们打印this，结果是undifind

function FunComponent() {
    console.log(this)
    return (
        <h1>函数中组件，适用于简单组件</h1>
    )
}

ES5中存在严格模式，在babel解释JSX的过程中会打开严格模式，在函数中的this会被指向为undefind。

而不在严格模式下，会指向Window对象

<script type="text/javascript">
    function demo(){
        console.log(this)  //结果为Window对象
    }
    demo()
</script>

2）类基本知识*

创建类

class Person {
}

创建对象

const p1 = new Person()
console.log(p1)

构造函数

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
}

const p1 = new Person('jvyou', 22)
const p2 = new Person('ymm', 22)
console.log(p1)
console.log(p2)

控制台输出

构造器里面的this指向实例本身，即new出来的对象是谁，this指向的就是谁

一般方法

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }

    // 类里面定义一般方法
    speak() {
        console.log(`我是${this.name}，我今年${this.age}岁了`)
    }
}

const p1 = new Person('jvyou', 22)
p1.speak()

打印结果：我是jvyou，我今年22岁了

我们打印p1对象

consolg.log(p1)

我们发现一般方法存在的位置并不是对象的属性里面，而是对象的原型对象里面

此处我们通过p1这个具体的实例去调用speak方法，方法里面的this就指向了p1

更改方法的this指向

const p1 = new Person('jvyou', 22)
p1.speak.call({a: 100, b:200})
p1.speak()

输出：我是undefined，我今年undefined岁了

上面的代码通过call修改了this的指向为{a: 100, b:200}，就不存在name和age属性了。

通过call方法可以修改方法的this指向

其他方式更改函数this指向：JS类

3）类的继承*

继承

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }

    // 类里面定义一般方法
    speak() {
        console.log(`我是${this.name}，我今年${this.age}岁了`)
    }
}

class Student extends Person {

}

const s1 = new Student("jvyou", 22)
s1.speak()

控制台输出：我是jvyou，我今年22岁了

此时Student没有构造器，继承了Persion的构造器

4）子类自定义属性

class Student extends Person {
    constructor(name, age, grade) {
        super(name, age);
        this.gradee = grade
    }
}

const s1 = new Student("jvyou", 22, "大三")

子类添加了grade属性，必须重写构造器，且通过super调用父类的构造器

super(name, age)必须放在其他的属性赋值语句之前

重写方法

我们打印s1

我们发现在Student的原型对象相面只有构造方法，通过原型链找到speak在Person原型对象上面

下面重写父类的方法

class Student extends Person {
    constructor(name, age, grade) {
        super(name, age);
        this.gradee = grade
    }

    speak() {
        console.log(`我是${this.name}，我今年${this.age}岁了,年级${this.gradee}`)
    }
}

此时speak出现在Person的原型对象 上面了

5）类式组件

class ClassComponent extends React.Component{
    render() {
        return (
            <div>
                <h1>类式组件，适用于复杂组件</h1>
            </div>
        );
    }
}

/*渲染组件到页面*/
ReactDOM.render(<ClassComponent/>, document.getElementById("demo"))

通过继承React.Component类创建类式组件

重写render函数返回虚拟DOM

React会帮我们创建ClassComponent的实例对象，然后替我们调用render函数

render函数中的this

我们在render函数里面打印this

class ClassComponent extends React.Component{
    render() {
        console.log(this)
        return (
            <div>
                <h1>类式组件，适用于复杂组件</h1>
            </div>
        );
    }
}

我们发现render函数里面的this就是React帮我们创建的的ClassComponent对象，里面有组件的三大属性，props、refs、state。