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.
Props
、
State
和组件树
｜
125
React
组件中的
State
可以用单个
JavaScript
对象表示。当某个组件的
State
发生变化时，
该组件会渲染一个新的
UI
反映这些变化。那有没有更符合函数式风格的方法呢？答案
当然是肯定的。给出一些数据，
React
组件将会在
UI
上反映这些数据变化。修改这些
数据后，
React
会尽可能高效地更新
UI
来反映这些变化。
接下来让我们看看如何在
React
组件集成
State
管理。
组件
State
简介
State
反映的数据表示我们希望对组件内部做出的更改。为了演示这一过程，我们将会
以
StarRating
组件为例进行说明（见图
6-7
）。
图
6
-
7
：StarRating组件
StarRating
组件所需的关键数据有两种：要显示的星标符号总数，以及需要高亮显示
的评级星标数目。
我们将会需要一个包含
selected
属性并且支持点击的
Star
组件。一个无状态函数式组
件对于每个星标都是适用的：
const Star = ({ selected=false, onClick=f=>f }) =>
<div className={(selected) ? "star selected" : "star"}
onClick={onClick}>
</div>
Star.propTypes = {
selected: PropTypes.bool,
onClick: PropTypes.func
}
每个
Star
元素将由一个包含
'star'
类的
div
构成。如果星标被选中了，那么还会额外 ...
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.