从0学习React(3)

在第一篇文章中,我们对index.tsx文件的每一行代码都做了简单的分析。通过第一篇文章的总结,我也大致知道了index.tsx里的很多语法。而第二篇文章,我对index.tsx文件的框架做了一个大致的分析,通过第二篇文章,我对index.tsx有了进一步的认识。按理来讲,第三篇文章我还是解析index.tsx文件,但是我发现,对于前两篇文章,其实我对语法的细节有很多不明白的点。因此这篇文章,我就把React的一些最基础的知识给梳理一下,帮助我更好的理解index.tsx的代码。

组件基础

首先我们从创建组件开始。创建组件有两种方式:使用函数创建组件或者使用类创建组件。在index.tsx文件中,这两种创建组件的方式都有涉及。

类组件

这就是通过类创建组件。需要注意的是,如果通过类创建组件,那么这个组件必须提供render方法,而且这个方法必须要有return返回值。

函数组件

在render方法中,也用到了通过函数创建组件,看下图:

谈到这里,我发现我对于render渲染方法的结构更加清晰了。

组件中的state

无状态组件和有状态组件

刚刚说了组件有两种,函数组件和类组件。函数组件是无状态组件,只负责展示数据,而类组件属于有状态组件,负责更新用户界面。

state的使用

state,也就是状态。状态是什么?状态其实本质上就是数据,是组件内部的私有数据,只能在组件内部使用。state其实是一个对象,可以包含多个键值对,每个键值对表示组件中的一个数据项。我们说了,组件中的state可以是对象,那就代表着一个组件可以管理多个独立的数据点,而不仅仅是单一的值。

对于类组件,我们一般需要先初始化状态,这样才能够在第一次被渲染的时候,各个组件都有自己的默认state。这就是state被使用的一种方式。

我们一般用(this.state.数据)来获取状态。(this.state.数据)拿的就是组件的最新状态值。比如,如果组件有一个状态叫count,那么this.state.count拿的一定是最新的count值。

我们一般用 this.setState({要求要改的状态},回调函数) 来修改状态,然后更新页面。

关于this.setState方法的详细介绍,我在这篇文章中不详细说,可以看我下一篇文章,因为写的太长会被限流.....

相关推荐
万岳科技程序员小赵2 分钟前
同城外卖 APP 与小程序开发实战:系统模块拆分及多语言适配要点
开发语言·软件需求
happymaker06265 分钟前
Spring学习日记——DAY04(复杂对象创建,AOP静态代理)
java·开发语言·spring
ComputerInBook9 分钟前
C++ 17 相比 C++ 14 新增之特征
开发语言·c++·c++ 17
我命由我1234514 分钟前
Android Framework P2 - 开机启动 Zygote 进程、Zygote 的预加载机制
android·java·开发语言·python·java-ee·intellij-idea·zygote
JAVA面经实录91718 分钟前
Java Codex 企业标准Prompt库
java·开发语言·prompt
Evand J24 分钟前
【MATLAB例程】5个UAV 分布式围捕编队运动仿真 —— 基于PID控制
开发语言·分布式·matlab
m0_5027249524 分钟前
golang 、java、c++、javascript 语言switch case异同
java·javascript·c++·golang
落羽的落羽1 小时前
【项目】C++从零实现JsonRpc框架——项目引入
linux·服务器·开发语言·c++·人工智能·算法·机器学习
墨月白1 小时前
【Python】程序设计基本方法
开发语言·python
TAN-90°-1 小时前
Java 5——final 抽象 接口
java·开发语言