React学习手册

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

构成。如果星标被选中了，那么还会额外 ...