React + MobX 状态管理入门及实例
前言现在最热门的前端框架,毫无疑问是React。 React是一个状态机,由开始的初始状态,通过与用户的互动,导致状态变化,从而重新渲染UI。 对于小型应用,引入状态管理库是"奢侈的"。 但对于复杂的中大型应用,引入状态管理库是"必要的"。 现在热门的状态管理解决方案Redux,MobX相继进入开发者的视野。 Redux、MobX哪一个更适合你的项目? 在react项目中使用redux or mobx? 正如爱因斯坦所说的 “让一切事物尽可能的简单,但不要简单”。 尽管让我们来填一填 MobX 的坑。 介绍1.入门
对于应用开发中的常见问题,React 和 MobX都提供了最优和独特的解决方案。React 提供了优化UI渲染的机制, 这种机制就是通过使用虚拟DOM来减少昂贵的DOM变化的数量。MobX 提供了优化应用状态与 React 组件同步的机制,这种机制就是使用响应式虚拟依赖状态图表,它只有在真正需要的时候才更新并且永远保持是最新的。 2.安装
3.核心概念1.state(状态) 2.observable(value) && @observable const map = observable.map({ key: "value"}); map.set("key","new value"); const list = observable([1,2,4]); list[2] = 3; const person = observable({ firstName: "Clive Staples",lastName: "Lewis" }); person.firstName = "C.S."; const temperature = observable(20); temperature.set(25); 3.observer(观察者) import {observer} from "mobx-react"; var timerData = observable({ secondsPassed: 0 }); setInterval(() => { timerData.secondsPassed++; },1000); @observer class Timer extends React.Component { render() { return (<span>Seconds passed: { this.props.timerData.secondsPassed } </span> ) } }; React.render(<Timer timerData={timerData} />,document.body); 4.action(动作) @action.bound setName () { this.myName = 'HUnter' } actions ------> state ------> view 5.computed class Foo { @observable length = 2; @computed get squared() { return this.length * this.length; } set squared(value) { // 这是一个自动的动作,不需要注解 this.length = Math.sqrt(value); } } 6.autorun var numbers = observable([1,3]); var sum = computed(() => numbers.reduce((a,b) => a + b,0)); var disposer = autorun(() => console.log(sum.get())); // 输出 '6' numbers.push(4); // 输出 '10' disposer(); numbers.push(5); // 不会再输出任何值。`sum` 不会再重新计算。 经验法则:如果你有一个函数应该自动运行,但不会产生一个新的值,请使用autorun。 其余情况都应该使用 computed。 7.reactions 4.应用实例1.TodoList 技术栈:react + react-router(v4)+mobx+webpack 效果图: 很简单的一个小demo,这里不分析了,源码里有部分注释帮助理解。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |