baobab 简单使用

flux 编写react思想是好的，但是代码太多了。

需要写调试 动作。

在书上看到了baobab模块。可以简化写法。

它实现的是module ，一个数据树，

可以定义不同的游标，绑定update事件，当游标数据修改时触发事件。

游标get 可以获取数据。

var tree=new Baobab({
todos:{
name:'star',
colors:['yellow','blue']
}
});
var colors=tree.select('todos','colors');
colors.on('update',function(){
console.log(colors.get())
});




tree.on('update',function(){
console.log('--------------')
console.log(tree.get())
})
colors.push('white');


tree.set('age','25')
tree.unset('age');

以上是简单的使用。

tree.select从根获取层级上的数据游标。

但是它想要应用到react上还是比较麻烦的。

var React=require('react');
var ReactDom=require('react-dom')
var mixin = require('baobab-react/mixins');
var tree = new Baobab({
  name: 'xxxx',
  surname: 'yyyy'
});
/*
子组件引用了branch，此对象上编写了初始化 生命周期函数。
还需要通过cursors游标来定义此组件需要引用的属性。
在branch内通过生命周期函数来获取cursors上配置来  从而把props上的值在本组件上state上可以使用
*/
var MyComponent = React.createClass({
  mixins: [mixin.branch],
  cursors: {
    name: ['name'],
    surname: ['surname']
  },
  render: function() {
return (
 <span>
   Hello {this.state.name} {this.state.surname}
 </span>
);
  }
});


/*
在顶级组件上通过mixins扩展mixin.root
在组件渲染时传递tree 属性名也只能是tree，参数需要是baobab创建的对象
root实现了把tree绑定到组件上
子级组件可以绑定tree对象上值。
*/
var Application = React.createClass({
  mixins: [mixin.root],
  render: function() {
    return (
      <div>
    <MyComponent />
      </div>
    );
  }
});
//修改tree上的值，顶级组件会更新并传递到使用了的子组件上。
setTimeout(function(){
tree.set('name','new name wang')
},2000)


ReactDom.render(<Application  tree={tree} />,document.querySelector('#app'))

以上是代码

需要baobab-react模块，

解析注释里有。

这是我简单的尝试。