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模块,
解析注释里有。
这是我简单的尝试。