mobx-viewbox v0.1.8

mobx-viewbox

基于mobx的react框架，jsfiddle demo

• 自动绑定props值到component对象属性及方法(以_开头的属性和方法不会被覆盖)，不需要从this.props取值再赋值到this.state
• 属性赋值之后自动触发渲染，不再需要反复调用this.setState方法
• 不需要关注react生命周期，默认init方法为初始化方法，首次渲染执行
• 默认绑定component对象到dom元素，可利用dom选择器触发component方法，例如：this.querySelector('#todos').refresh()

Install

npm install mobx-viewbox --save

Usage

原始写法：

class Todo extends Component {
	
	constructor(props) {
		super(props)
		this.state.todo = props.todo || {
			title: '',
			finished: false
		}
	}
	
	checkboxChange() {
		let todo = {...this.state.todo}
		todo.finished = !todo.finished
		this.setState({todo})
	}

	render() {
		return <li>
	        <input
	            type="checkbox"
	            checked={this.todo.finished}
	            onChange={() => this.checkboxChange()}
	        />{this.todo.title}
	    </li>
	}
}

viewBox写法

class Todo extends ViewBox {
	todo = {
		title: '',
		finished: false
	}

	render() {
		return <li>
	        <input
	            type="checkbox"
	            checked={this.todo.finished}
	            onChange={() => this.todo.finished = !this.todo.finished}
	        />{this.todo.title}
	    </li>
	}
}

Demo

npm start
http://localhost:9090/demo/index.html