react梳理之函数式组件

函数式组件的基本意义就是,组件实际上是一个函数,不是类

一.react的类组件

1. 前端概念中的类
   前端中实际上是没有类也没有继承的,但是我们后来也有了前端独有的一种类的模式,实际上我们都知道是语法糖

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    toString() {
        return '(' + this.x + ', ' + this.y + ')';
    }
} 
//function Point {
//	.......
//}

这就是前端的类,前端的类为什么说是语法糖,因为与传统意义上的类是不一样的,面向对象的编程实际上是真有一个类,而我们这样去命名去开发只是单纯意义上的使我们的对象原型的写法更加的具象也更加贴近真正的类书写手法,实际上真正的语句使下边注释的这样的

2. 前端类的继承
   既然前端使没有类的,那实际上更不存在类的继承了,然而某种意义上我们通过原型对象确实可以有继承一样的效果,这也是我们es6有类这样写法的基础,那就是原型链,原型链我们前边在原型设计模式中讲过,不再多做赘述

class classA extends classB{
    constructor(){
        this.state = {val:''};
    }
}

//classA.prototype = new classB();
//classA.prototype.constructor = classB;

ReactDOM.render(<Input/>,window.app)

我们从例子中看,extends就是一个继承的方法,这个方法其实是不存在的,不过是我们es6中跟class一样,也就有了这个语法糖,其实本质上我们只是让prototype来等于需要继承的类的实例,然后把构造函数指针指向需要继承的类,就达到了继承一样的效果,也就是可以使用原本类上拥有的一切属性和方法

3. react的类组件
   为什么叫类组件,因为本质上是类的写法,也是类的使用方式,react暴漏出来一个react.Component这样的类,也可以说是函数,然后通过我们要创建的组件去继承这个类,就会拥有Component这个里边有的功能,从而达到比如钩子函数的使用能力

import React,{Component} from 'react';
import ReactDOM from 'react-dom';

class DivP extends Component{
    constructor(){
        super();
        this.state = {val:''};
    }
    render(){
        return (
            <div>
                <p>{this.state.val}</p>
            </div> 
        )
    }
}

ReactDOM.render(<DivP />,window.app)

这也就是类组件的使用方式,通过constructor里去给DivP的实例创建属性,用render函数渲染视图,有的人会问为啥组件既然是个类,为啥不用new就直接可以使用,这也是react的内置能力,<DivP />就是我们类似于new的方法,创建了实例传递给ReactDOM.render,就直接可以渲染视图了

二.函数组件

1. 什么是函数组件
   如果对类了解比较透彻的话,我们其实可以把类看作函数,那么我们的函数组件与类组件有何不同,不同之处就是我们直接创建了一个函数,没有去继承,也就是没有通过prototype和constructor去从Component获取能力,那么函数式组件就代表了能力缺失了很多的组件,在hooks流行之前我们其实用函数式组件的局限性很大,因为函数式组件是没有钩子也没有状态的,那么只能由通过属性去进行不同的展示罢了
2. 函数式组件虽然没有钩子函数,但是函数式组件并不一定是非受控组件,因为函数式组件是可以接收props的

function funClass(props) {
  const handleClick = () => console.log('被点击');
  return <button onClick={handleClick}>{props.name}</button>
}

函数式组件本质上是没有状态的(16.8以后的hooks另外再讲),状态也就是我们的state,既然没有状态那么我们也肯定是不能更改任何的值的,我们的props也只是接收过来父组件的传值,用以渲染

总结:我准备把hooks放单独的一张讲,我们这里只了解一下什么叫函数式组件,我们也可以很明显的看到弊端,就是只能渲染,甚至说return返回的实际上才是我们的组件,函数只是作为一个返回react组件的工具,这些情况都在16.8之后的hooks被解决,我们回头讲react的hooks,这个就是函数式组件的救星,也让函数式组件成为主流