redux

一. 调试接口 二.webstorm 最大化的增加代码区域 View-Enter Distraction Free Mode 三. 添加新建菜单 https://blog.csdn.net/asing1elife/article/details/82820628 四. 配置路径 https://blog.csdn.net/weixin_33804990/article/details/91368501 五. ToDoInput 和 ToDo 组件 // ToDoInput负责样式 // ToDo负责功能 // 放外面处理是为了后面引入redux,提交action都是做在外面的 六. 制作 Item this.state.todos.map(t=><TodoItem key={t.id} {...t} />) // ...t把所有属性放到item里面 七. 解决 TS2339 报错 // 在外面定义接口 interface ITodoItemProps { description: string } <span>{this.props.description}</span> 八. 将 todos 做成宽度一半 #Todos { padding: 16px; border: 1px solid #ddd; border-radius: 4px; width: calc(50% -

在属性改变的瞬间，做处理；（只需要执行一次）使用 when；这个在检测属性变化时操作很有效；可以和 react 中state de preValue, currentValue 改写而成； componentDidMount() { when(() => this.props.taskStore!.settingVisible, () => this.getRobotInfo()); } 这里表示的是一旦settingVisible 为true，则执行后面的操作；使用 reaction() 不符合条件； Store 注入组件接口的形式必须是可选的 import { inject, observer } from 'mobx-react'; @inject('store’) @observer Class TodayTask extends React.Component <{**taskStore?: TaskStore**}>{} 实践后的总体感觉 mobx 灵活性好，但不好管理，状态不够清晰，如果组件内的状态使用 mobx 有点大材小用，不如 state, 如果比较大的项目使用 mobx， 并不会比 redux 节省代码，并且没有 redux 统一好管理；初次使用觉得有点鸡肋吧。 来源： oschina 链接： https://my.oschina.net/hyzccc

JS设计模式入门和框架中的实践 在编写JS代码的过程中，运用一定的设计模式可以让我们的代码更加优雅、灵活。 下面笔者就结合诸如redux的subscribe、ES6的class、vue里面的$dispatch、jquery里面的on/off来给大家简单介绍下设计模式在这些库、语法和框架中的使用。 设计模式解决的问题 设计模式并不是很玄乎的知识，很多同学在编写JS代码的时候已经在不经意间用了不少设计模式了。 笔者认为把设计模式单独抽象出来探讨，就和算法中抽象出来冒泡、排序一样，是为了描述一种常用的JS pattern。 通过研习这类pattern，让模式来指导我们的代码结构及JS算法。 一些常用的设计模式概述 1、observer [观察者模式] 根据状态的变化主动触发观察者队列、hashMap的回调行为 一个简单的观察者模式代码实践 class StateTracker{ constructor(){ this.observers = []; this.internalState= 10; } // 改变内部状态，触发状态的观察者列表 change(val){ this.internalState= val; this.observers.forEach(observer=>observer(val)); }// 注册观察者 registerObserver(ObserverFn)

React的Redux相当于Vue的Vuex 来源： https://www.cnblogs.com/nayek/p/12369418.html

前言   刚接触React的时候，有人感叹这不就是当年的JSP吗？直接用代码生成html，两者混在一起，还真有不少人喜欢把事件响应和业务逻辑都写在component里面，看起来就头疼。当年的JSP已经被MVC所终结，我们可以借鉴MVC的思想让React-Redux的代码好写又好看。   先回顾一下MVC思想，如下图：   用户的请求先由Controller进行处理，处理后的数据放入Model，View根据Model的数据渲染界面呈现在用户面前。   React-Redux中应用MVC 1. Model 对应Redux store   Redux store由几个数据模块组成，每个模块中的数据在一组页面或者一个业务流程中使用。 redux/rootReducer.js import {reducer as common} from './commonAction' import {reducer as online} from './onlineAction' export default combineReducers({ common, online, }) 2. View 对应React component   Component将数据呈现出来，要尽可能地只做页面显示，其它代码一概抽离，例如： login/index.js import {actions} from '.