react+hook 入门-01

86 阅读4分钟

image.png

首先第一点是引入react对象本身,一会儿我们要使用他的Component对象

第二点就是给我们的类组建命名为Comp1 然后用 extends继承我们 React身上的公用的方法,

第三点就是我们使用render,用render帮助我们返回我们希望要看的内容

最后一点就是如果其他的组件如果想使用到我们的组件,那就必须要将我们的组件返回出去才可以

image.png

第一点:这个时候我们在App.js中将我们刚才定义好的Comp1组件引用过来,引用过来以后就可以直接进行使用

第二点:使用的方式就和我们的平常的标签的使用方式是一致的,无非就是 这样组件就可以使用

这个使用我们都看到页面已经将我们要的内容已经展示出来了!

image.png

关于类组件有的时候我们只需要一个,内容的展示,其实如果我们用类组件去写的话就会变得很麻烦

第一点:我们每次都需要继承React公用的方法和属性,

第二点的话,就是我们每次都需要render方法,每次在从里面进行返回

其实我们有的时候真想直接写一个render方法就不写其他的,但是类组件显然做不到

但是这个时候我们的函数组件就可以直接做到这一点,可以直接写一个函数直接进行返回

展示出来的效果和我们写类组件的效果是一样的既然这样都可以实现,那我们何乐而不为呢

总结

class 类组件:功能比较全、东西比较多 例如constructor、生命周期,状态、属性、方法都随便搞

但是有的时候我们做一些纯展示,或者我们做一些小功能的时候,就会变得并不是那么方便了

函数组件:功能比较弱、原因就是因为东西比较少,或者说简直就是没有,但是他就有一点好处那就是方便

比如我们坐地铁的时候别人都在玩手机,你在电脑包里面掏出来你的电脑,这个时候,也很挤,那你肯定也不方便

我记得我刚开始当老师的时候,我住在双桥,我刚上地铁的时候,好几次都没上去,等上去了以后,也是人挤人,

等我开始上课的时候,发现电脑屏幕都已经出来了,

而且你看像是 B站还有jd,90%的用户都是我们的手机用户,所以任何时候你也顶不过方便这个事儿

image.png

类组件

我们看一下我们的类组件,直接定义constructor很render 使用super继承一下我们应该

在react公用组件中继承过来的属性,使用this.state 定义好我们的状态,在render里面

添加一个点击按钮,当我们点击的时候,通过setState就可以帮助我们改变我们的状态,

让我们数字可以在页面上进行累加

函数组件:

函数组件就没有状态,什么是状态,就是可以一直改变的东西,这个就是我们的状态

但是在我们的函数组件中你会发现压根就没有this这个东西,所以更不要提 this.state这个东西

所以页面上就会直接报错,因为此时的我们为严格模式,this在函数的指向中,this就是undefined

总结

类组件 
    1、有状态
    2、有this  你的状态你的方法都在这里面找,但是函数组件里面没有
    3、ref 获取组件
    4、可以定义方法

函数组件(fc)中   
    
    1、没有状态
    2、没有this
    3、没有ref 不能用 this.ref 获取我们的组件,因为this也没有 
    4、不可以定义方法,因为我们现在是函数
    

hook

这个时候我们如果还想再函数组件中写功能的话,这个时候就可以使用我们的hook,

hook就是我们函数组件的工具包,帮助啊我们在函数组件中写功能

image.png

函数组件是有参数的,可以在函数组件中放一个props,使用props将组件中传递过来的数据使用。