Question

我很喜欢在布局中通过画盒子来定义组件的过程。这在 Thinking in React（http://facebook. github.io/react/docs/thinking-in-react.html ）中介绍了。你也可以使用这种理念来定义 Baobab 状态树。让我们使用“Thinking in React”这个例子来定义 Baobab 状态树，从服务器获取数据：

stateTree.js



var Baobab = require('baobab');
var stateTree = new Baobab({
  query: '',
  onlyProductsInStock: false,
  products: []
});

module.exports = stateTree;

我们的 action 看起来如下：

actions.js



var stateTree = require('./stateTree');
var ajax = require('ajax');

module.exports = {
  showOnlyProductsInStock: function() {
    stateTree.set('onlyProductsInStock', true);
  },
  showAllProducts: function() {
    stateTree.set('onlyProductsInStock', false);
  },
  searchProducts: function(query) {
    stateTree.set('query', query);
    ajax.get('/products', query).done(function(products){
      stateTree.set('products', products);
    });
  }
};

就是这样！我们已经几乎为我们的组件创建了一个“后台”。一个组件可以用来请求变化的 API，就像可以和后台进行通信的 API 一样。状态树的改变会反映到组件上。一个很酷的事情是你可以简单地将状态存储到 local storage 中，从而用户可以回到他们上次操作的正确状态。

main.js



var stateTree = require('./stateTree');

window.addEventListener("beforeunload", function(e){
  localStorage.state = JSON.stringify(stateTree);
}, false);

Baobab 的一个很好的特性是让你更容易地控制渲染。通过给 Baobab 的实例添加两个配置项， ReactJS 将只会在实际需要的时候才渲染组件。

var Baobab = require('baobab');
var ReactAddons = require('react/addons');

var stateTree = new Baobab({
  notifications: []
}, {
  mixins: [ReactAddons.PureRendermixin],
  shiftReferences: true
});

module.exports = stateTree;

这些配置项做了两件重要的事：

- React 插件的 PureRenderMixin 确保了组件只有在 prop 传给它或者 state 发生实际改变时，才进行渲染。

- 当 Baobab 改变了树中的一个值时，改变的事件就会冒泡到根节点，并且更新所有对象和数组的引用。在某种意义上，Baobab 树符合不变性。PureRenderMixin 通过浅检查足以确认是否需要重新渲染。

那么，为什么这些配置项很重要？让我们看看 ReactJS 是如何渲染的，然后你就会知道这两个配置项解决了什么问题。

ReactJS 的级联渲染

ReactJS 的一个常被忽略的重要细节是组件的 setState 是如何影响嵌套组件的。当你使用 setState 时，嵌套的组件会进行检查，然后确认是否更新 DOM。这意味着，如果在应用程序的根组件上监听到一个 change 事件，那么你所有的组件都会做 diff 操作和渲染，来生成需要的 DOM 操作。如下图：

但是如果一个子组件调用了 setState，它并不会影响父组件。

这意味着，你可以摆脱指向状态树的根组件，然后在所有其他组件中直接获取状态，而无须绑定游标。其缺点是，整个应用程序将会在任何状态改变的时候重新渲染。

ReactJS 的重复渲染

有关 setState 需要了解的更重要一点的是：使用 change 事件，不仅会引起级联渲染，而且会引起重复渲染。让我来解释一下。

当 change 事件发生时，根组件会首先引发渲染：

而在那之后，嵌套组件实际上会再次渲染一遍：

如果有更深层次的嵌套组件，将导致同样的问题，但是会伴随着更多的重复渲染，因为每多一层嵌套，就会多一次额外的渲染。

值得庆幸的是，当使用 Baobab 时，你一点儿也不用担心这个问题。

---

[1] 不同于原生 JavaScript，这里的不变性是指，原对象值发生改变的时候，会将新值复制到一个新的对象，不会对原对象进行修改。——译者注