-
mobx 可观察数据通过 mobx-react 提供
@observable title @observable finished
mobx Array 的 remove 方法提供了根据元素直接删除的能力，不需要再使用 id 过滤
// this.todos = this.todos.filter(item => item.id !== id) this.todos.remove(todo)
计算值放在 mobx 中作为 get 方法调用比在组件中计算更好
@computed get remaining() { return this.todos.filter(item => item.finished).length }需要判断的 className 的拼接方式
className={['class1', bool && 'class2'].join(' ')}Item 组件拆分逻辑：
不以 HTML 元素结构来拆分，以业务逻辑拆分，与 Item 透明无感知的操作最好放在父级中；
Item 没有包裹元素可以使用 React.Fragment
// list <li key={item.id} className={[item.finished && 'finished']}> <Item todo={item} /> <a href="javascript:;" onClick={() => list.removeTodo(item)}>delete</a> </li> // item <Fragment> {todo.title} <span className='check' onClick={() => this.handleToggle(todo)}></span> </Fragment>查看全部 -
npm install babel-preset-react -D
查看全部 -
npm i react react-dom prop-types mobx-react -S
查看全部 -
npm i mobx -S
查看全部 -
npm install babel-plugin-transform-decorators-legacy -D
查看全部 -
npm i babel-plugin-transform-class-properties -D
查看全部 -
npm i webpack webpack-cli babel-core babel-preset-env babel-loader -D
查看全部 -
常用的工具函数
查看全部 -
“computed”计算值，将其他可观察数据与你想要的方式组合起来变成一个新的可观察数据，
“autorun”自动运行，自动运行传入autorun的参数，在可观察数据被修改之后，自动去执行依赖可观察数据 的行为（传入的函数）
“when函数”接收两个函数参数，第一个函数必须根据一个可观察数据返回一个布尔值（不能根据普通变量），当该布尔值为true的时候，就去执行第二个函数，并且保证最多只会执行一次
" reaction" 第一个函数引用可观察数据并返回一个值，这个值回作为第二个函数的参数，第一个函数会被先执行一次，这样mobx就知道有哪些数据被引用了，并在这些数据被修改后执行第二个函数，
被用到的场景：在没有数据之前，我们不想也没有必要去调用写缓存的逻辑，可以用reaction来实现在数据第一次被填充后才启用写缓存逻辑
查看全部 -
观察数据变化的方式
查看全部 -
可被观察的数据类型
查看全部 -
observable
查看全部 -
decorator
查看全部 -
mobx学习目标
查看全部 -
应用逻辑只需要修改状态数据，mobx会自动触发渲染UI等副作用；副作用依赖的数据是被自动收集的，比如副作用依赖状态a和b，状态c的变化是不会触发副作用的。
查看全部
举报