state和props:
state:是状态机,包括了可能被组件的事件处理器改变并触发用户界面更新的数据,基于用户输入,服务器请求或者时间变化做出响应的数据可以使用state来存储。作为状态,state不应该包括通过计算得出的数据,react组件和基于props的重复数据
props:父级向子级传递数据的方式,尽可能的用props来作为唯一数据来源,包props保存到state中的有效藏剑是需要知道它以前的值的时候,因为props可能会变化
有状态组件和无状态组件:、
有状态组件:通过React.createClass或者es6的class继承React.CCompnent创建的组件。有完整的生命周期和实例化的过程,这代表他们支持this和ref指向数据
无状态的组件:statelesscomponent。以函数返回值的形式创建的组件。无实例化过程和生命周期、没有this和ref指向,函数可以接受props及context两个参数
redux和dva
Redux
Action、Reducers和Store
action可以理解为应用向store传递数据信息(交互信息)。在实际应用中,传递的信息可以约定一个固定的数据格式,比如:Flux Standard Action。dispatch(action)是一个同步的过程:执行reducer更新state->调用store的监听处理函数。如果需要在dispatch1时执行一些异步操作,可以引入Middleware解决。
reducer实际上就是一个函数:(previousState,action)=>newState。用来执行根据指定action来更新state的逻辑。reducer不存储state,reducer函数逻辑中不应该直接改变state对象,而是返回新的state对象。
store是一个单一对象,redux中只有唯一一个store实例,主要作用是:1、管理应用的state 2、通过store.getState()可以获取state 3、通过store.dispatch(action)来触发state的更新 4、通过store.subscribe(listener)来注册state变化监听器
Dva
数据流向:
数据的改变发生通常是通过用户交互行为或者浏览器行为(路由跳转)触发的,当此类行为改变数据的时候通过dispatch发起一个action,如果是同步行为会直接通过Reducers改变State,如果是异步行为会先触发Effects然后流向Reducers最终改变State
State type State= any
State表示 Model的状态数据,通常表现为一个 javascript 对象(当然它可以是任何值);操作的时候每次都要当作不可变数据(immutabledata)来对待,保证每次都是全新对象,没有引用关系,这样才能保证 State 的独立性,便于测试和追踪变化。
Action typeAsyncAction = any
Action是一个普通 javascript对象,它是改变 State 的唯一途径。无论是从 UI 事件、网络回调,还是 WebSocket 等数据源所获得的数据,最终都会通过 dispatch 函数调用一个 action,从而改变对应的数据。action 必须带有type属性指明具体的行为,其它字段可以自定义,如果要发起一个 action需要使用dispatch函数;需要注意的是dispatch是在组件 connect Models以后,通过 props 传入的。
dispatch函数 typedispatch = (a: Action) => Action
dispatching function是一个用于触发 action的函数,action 是改变 State 的唯一途径,但是它只描述了一个行为,而 dipatch 可以看作是触发这个行为的方式,而 Reducer 则是描述如何改变数据的。
dispatch函数 typedispatch = (a: Action) => Action
dispatching function是一个用于触发 action的函数,action 是改变 State 的唯一途径,但是它只描述了一个行为,而 dipatch 可以看作是触发这个行为的方式,而 Reducer 则是描述如何改变数据的。
Effect
Effect被称为副作用,在我们的应用中,最常见的就是异步操作。它来自于函数编程的概念,之所以叫副作用是因为它使得我们的函数变得不纯,同样的输入不一定获得同样的输出。
Subscription
Subscriptions是一种从源获取数据的方法,它来自于 elm。
Subscription语义是订阅,用于订阅一个数据源,然后根据条件 dispatch需要的 action。数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。
Router
这里的路由通常指的是前端路由,由于我们的应用现在通常是单页应用,所以需要前端代码来控制路由逻辑,通过浏览器提供的HistoryAPI可以监听浏览器url的变化,从而控制路由相关操作。dva实例提供了 router方法来控制路由,使用的是react-router。
RouteComponents
在组件设计方法中,我们提到过Container Components,在 dva 中我们通常将其约束为 Route Components,因为在 dva 中我们通常以页面维度来设计 Container Components。
所以在 dva中,通常需要 connect Model的组件都是 Route Components,组织在/routes/目录下,而/components/目录下则是纯组件(Presentational Components)。