react学习之组件与生命周期函数

本文介绍了React中的组件概念,区分了无状态组件(函数组件)和有状态组件(类组件),并通过实例阐述了为何划分状态以及如何通过优化性能,如避免不必要的组件更新。同时提到大厂面试中算法题的重要性,推荐学习资源。
摘要由CSDN通过智能技术生成

组件就像是js中的函数一样,它接收任意的输入,并且返回一个react元素,这些元素被返回在我们的屏幕上给展示出来。

2.组件的分类

组件分为无状态组件(函数组件)和有状态组件(类组件),他们两者的区别是显然的那就是有无状态

3.无状态组件

其语法就和函数的书写方式类似,因此在这里我将其称为函数组件。

上面就是一个函数组件的表达形式,很显然的就可以看出,在这个函数组件中我们传递了一个参数props,如果我们要去调用这个组件就可以通过这个参数去调用

4.有状态组件

其书写方式与类的书写方式类似,因此在这里我将其称为类组件

上面的类组件,你可以看出其采用了书写类的方式去进行描述,这种语法表示是es6中的表达方式。在学过面向对象变成的语言时,这种以类的形式书写的语法随处可见。其与函数组件不同的是,你需要将你想要展示的内容放在render方法之中。

那么为什么要这样去将组件分为有状态组件与无状态组件呢?下面的这个例子就很自然而然的表达出原因

在上面的这个例子中,我们可以看出我们的目的是将时间实时的展示在页面上,也可以很自然而然的知道,这种方式是在实时的更新整个组件,这样做的话就大大的降低了性能,降低了运行速度,这种方式显然是不可取的。那么就有了接下来的这种形式

在这个例子中,涉及到了很多新的知识点,接下来我会去进行讲解,在这里你需要明白一点的是。在上面的这个例子中,我们并不是实时的去更新整个组件,而只是去实时的去更新里面的时间,然后将其返回给组件,最后再呈现到页面上,这样做的好处就是相比与函数组件所采用的形式,我们大大的提高了其性能。

那么在上面的这个例子中,我们又产生了两个问题,第一个就是生命周期函数,另外一个就是constructor函数与state.

算法刷题

大厂面试还是很注重算法题的,尤其是字节跳动,算法是问的比较多的,关于算法,推荐《LeetCode》和《算法的乐趣》,这两本我也有电子版,字节跳动、阿里、美团等大厂面试题(含答案+解析)、学习笔记、Xmind思维导图均可以分享给大家学习。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

写在最后

最后,对所以做Java的朋友提几点建议,也是我的个人心得:

  1. 疯狂编程

  2. 学习效果可视化

  3. 写博客

  4. 阅读优秀代码

  5. 心态调整

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值