December 2017
Intermediate to advanced
329 pages
6h 9m
Chinese
Content preview from React学习手册
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
React
进阶
｜
71
上述代码为数组中的每种成分创建了一个
React
元素。每个字符串将会作为列表元素
子节点中的文本予以显示。每种成分的值将会作为列表项显示。
当运行这些代码时，你将会在控制台发现一个错误提示，如图
4-2
所示。
图
4
-
2
：控制台错误提示
当我们通过遍历数组构造了一个子元素列表时，
React
希望其中的每个元素都包含一
个
key
属性。
key
属性主要是用来辅助
React
高效地更新
DOM
的。我们将会在第
5
章深入
讨论
key
，以及必须这么做的原因，不过现在可以通过为每个列表项元素添加一个唯
一
key
属性，来避免系统出现这个警告信息（参见示例
4-11
）。我们可以使用数组的
索引作为每种成分的
key
属性的唯一值。
示例
4-11
：添加一个
key
属性
React.createElement("ul", {className: "ingredients"},
items.map((ingredient, i) =>
React.createElement("li", { key: i }, ingredient)
)
React
组件
每个用户界面都是由若干零部件构成的。这里用到的菜谱示例中包含若干菜谱，每个
菜谱又由若干零部件构成（见图
4-3
）。
图
4
-
3
：菜谱应用
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access
More than 5,000 organizations count on O’Reilly
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.Julian F.
I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.Addison B.
I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.Amir M.
I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.