react学习笔记(六)列表渲染

渲染多个组件


和Vue里面有v-for来让我们根据一个数组内的内容进行渲染不同,React中并没有提供这种在标签中的“属性”,要在React中渲染多个组件,我们通常使用JavaScript中的方法来实现
在Vue中,如果我们要将下面这个数组的内容

react学习笔记(三)组件

组件将我们的页面拆分成不同的块,让我们更易于去维护这些内容

React中的组件结构分类


React中的组件根据结构可分为函数组件和class组件

函数组件

顾名思义,函数组件即为函数形式的组件,举例如下

react学习笔记(二)React元素

元素


元素是React中的最小单元,一个简单的元素如下

react学习笔记(五)条件渲染

在React中,我们有时只想渲染部分组件,而在某些状态发生改变时渲染另一部分组件,此时就要使用条件渲染

if-else

我们可以通过if-else来判断状态值,从而渲染不同的组件

react学习笔记(四)组件常用的生命周期方法

React的每个组件都有自己的生命周期,我们可以利用这些生命周期对应的方法,在组件的不同时期触发特定的方法,来达到我们想要的效果

react学习笔记(一)jsx语法

jsx是我们在react中编写组件的一种语法,实际上jsx只是JavaScript的一种语法糖
jsx让我们能更为方便地在JavaScript中书写node节点,通过使用html的格式,让我们更为直观地看到节点的结构