React18学习

17、React_JSX的注意事项

    
    
    
    
    


    

    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

18、React_渲染列表

其实就是根据原有的数据，生成一个新的数据

06_渲染列表.html

  
  
  
  
  






1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

map()函数对一个数组进行处理。在代码中，data是一个数组，map()函数会遍历数组中的每个元素，并且对每个元素执行指定的操作，然后返回一个新的数组，新数组中包含了经过操作后的元素。

19、虚拟DOM

  
  
  
  
  
  


点我一下





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

列表中的key

当我们在JSX中显示数组中，数组中没一个元素都需要设置一个唯一key，否则控制台会显示红色警告
1

在渲染一个列表时，通常会给列表项设置一个唯一的key来避免上述问题

​	（这个key在当前列表中唯一即可）
	注意：
		1.开发中一班会采用数据的id作为key
		2.尽量不要使用元素的索引作为key
			索引会跟着元素的顺序改变而改变。唯一的不同就是，控制台的警告没了。
			当元素的顺序不会发生变化时，用索引也没有问题，
			如下：
			const arr = 
{data.map((item,index) => 
{item}
)}
1
2
3
4
5
6
7
8
9
10

20、创建React项目（手动）

webpack是打包工具，可以部署到服务器上，还提供了测试服务器

因为手动配置webpack太麻烦了，React提供了react-scripts包

安装nodejs：https://nodejs.org/en

安装完之后，

进入项目所在目录，并执行命令：npm init -y
安装项目依赖：npm install react react-dom react-scripts -S 
1
2

react基本结构安装完成