状态（State）

UI 不单单是对服务器端或业务逻辑状态的复制。实际上还有很多状态是针对具体的渲染目标。举个例子，在一个 text field 中打字。它不一定要复制到其他页面或者你的手机设备。滚动位置这个状态是一个典型的你几乎不会复制到多个渲染目标的。

我们倾向于使用不可变的数据模型。我们把可以改变 state 的函数串联起来作为原点放置在顶层。

  1. function FancyNameBox(user, likes, onClick) {
  2.   return FancyBox([
  3.     'Name: ', NameBox(user.firstName + ' ' + user.lastName),
  4.     'Likes: ', LikeBox(likes),
  5.     LikeButton(onClick)
  6.   ]);
  7. }
  9. // 实现细节
  11. var likes = 0;
  12. function addOneMoreLike() {
  13.   likes++;
  14.   rerender();
  15. }
  17. // 初始化
  19. FancyNameBox(
  20.   { firstName: 'Sebastian', lastName: 'Markbåge' },
  21.   likes,
  22.   addOneMoreLike
  23. );

注意：本例更新状态时会带来副作用（addOneMoreLike 函数中）。我实际的想法是当一个“update”传入时我们返回下一个版本的状态，但那样会比较复杂。此示例待更新