React 面向组件开发

面向组件编程

函数式组件

普通的

注意 ：组件的名称首字母必须大写

带参数的

类式组件

复习类

<script>
    // 定义一个 Person 类
    class Person{
        // 定义构造器方法
        constructor(name,age){
            this.name=name;
            this.age = age;
        }
        // 定义一般方法，供实例使用
        speak(){
            console.log(`我叫${this.name},今年${this.age}岁`);
        }
    }

    // 创建一个实例对象
    const p1 = new Person('Tom',15);
    const p2 = new Person('jack',21);
    console.log(p1);
    console.log(p2);
    p1.speak();
    p2.speak();


    // 创建Student 类，继承 Person 类
    class Student extends Person{
        constructor(name,age,grade){
            super(name,age);// 声明了构造器，必须调用 super() 方法
            this.grade = grade;
        }
        
        // 重写父类的方法
        speak(){
            console.log(`我叫${this.name},今年${this.age}岁,在读${this.grade}年级`);
        }
    }

    const s1 = new Student('张三',21,'大一');
    console.log(s1);
    s1.speak();
script>

类式组件应用

组件的分类

如果组件中有 状态 state 就是复杂组件，没有则是简单组件。

组件的实例的三大属性

• state
• props
• refs

函数组件没有实例，类式组件有实例

stat

注意 ：

1、组件自定义的方法中 this 为 undefined，如何解决？

• 强制绑定this: 在构造器中通过函数对象的bind()

• 箭头函数

2、状态数据，不能直接修改或更新。需要通过 setState 方式去更新state 中的值。

构造器中东西简写（推荐这样写）

以后类中的自定义方法都使用 ： 赋值语句+箭头函数

props

简单应用

注意 ：props 是只读的，在组件内部不允许修改 props 里的值

需求 ：

• 姓名必须指定，且为字符串
• 性别为字符串类型，如果性别没有指定，默认是男
• 年龄为数字类型，默认是18

简写方式（将属性的限制和默认值放入类中）（推荐这样写）

函数式组件使用 props

refs

案例为 ：提示在文本中输入的值（两种方式 ：点击按钮提示、失去焦点提示）

分类 ：

• 字符串形式 refs
• 回调函数形式 refs （用的最多的）
• 官方 API ：createRef （react 最推荐的）

字符串形式

不久将来将要废弃

回调函数形式

官方 API ：createRef

总结

• status 用来初始化值
• props 用来传递参数（类式组件和函数式组件都可以使用）
• ref 用来表示一个组件的标签，拿到对应的 dom 元素，相当于以前的 id

事件

当绑定事件的节点和要操作的节点是同一个节点的时候，事件可以用来解决 refs 过度使用的问题。。。

收集表单数据

案例

需求: 定义一个包含表单的组件

输入用户名密码后， 点击登录提示输入信息

组件分类

• 非受控组件 ：表单中的输入类的组件，都是现用现取。
• 受控组件 ：输入数据时，将数据维护到状态中去，需要用的时候在从状态中取出来（双向绑定）。优点是省去了繁琐的 refs

非受控组件

受控组件

高阶函数、函数柯里化

我们正常写方法的时候是 onChange={this.saveFormData}，这样的话不写高阶函数，在组件加载的时候就会执行该方法

而使用了高阶函数之后就可以这样了onChange={this.saveFormData('username')}

高阶函数

如果一个函数符合下面两个规范中的任何一个，该函数就是高阶函数 ：

• 若A函数，接收的参数是一个函数。
• 若A函数，调用的返回值是一个函数。

函数的柯里化

通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式

不用柯里化