react学习过程记录1(react, redux, imvc)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/kellywong/article/details/81224977
1.React中的组件是无法直接更动state(状态)的包含值,要透过setState方法来进行更动,父组件(拥有者)与子组件(被拥有者)的关系上,子组件是只能由父组件以props(属性)来传递属性值,子组件自己本身无法更改自己的props。
  • 斜线部分提供这样一种思路(当在一个组件中出现this.props.parm的时候,可以去到调用这个组件的他的父组件(是否是直接父组件??)中的定位到子组件的位置,看下子组件的属性,并通过属性值看到从父组件传到子组件的内容)
2.react中大部份的例子只有在最上层的组件有state,而且都是由它来负责进行当数据改变时的重新渲染工作,子组件通常只有负责呈现数据。
3.redux的流程(自己总结)

这里写图片描述
actions: 编写的动作,是个对象,actionType(动作类型)与数据(通常称为payload),相当于函数名,比如js中的任意一个函数名。

reducer: 这里是action的具体实现,包含逻辑代码,相当于js中的任意一个函数名对应的底层实现。

store:是一个状态树,保存了所有对象的状态。任何UI组件都可以直接从store访问特定对象的状态。store的创建是以应用中的所有reducer的一个集合rootReducer作为参数(我的理解是在数据仓库store注册了所有(当然这的所有指的是当前应用的,可随时添加)action的具体实现)使用的时候利用store.dispatch(action)把动作传入store,会自动匹配到reducer中的该action的具体实现操作store,实现状态的更新。。。

4.react-imvc框架注意点

react-imvc 建议除了把 state 从 component 里抽离出来,组成 global state 以外,也应该把 event handler 从 component 里抽离出来,写在 controller 里面,组成 global handlers 传入 View 组件内。

event handler 必须是 arrow function 箭头函数的语法,这样可以做到内部的 this 值永远指向 controller 实例,不需要 bind this,在 view 组件里直接使用即可。

5. 根据一个react-imvc的counter的例子来理解imvc的运行过程
  1. 首先是项目中的Index, 当访问path下的目录的时候,运行相应的controller。
  2. 当我在controller中函数外部写console.log()的时候报错,是不是控制器函数只能包含常量和箭头函数,不能有其他的js语句???
  3. 在handleInc函数内部书写console.log(this)首屏没有输出,当点击和该函数绑定的UI组件,输出this值。
    这里写图片描述
  4. 所有controller类中的事件监听器的处理函数必须是handle开头,然后View函数的参数必须是state和handlers,不能换成其他名字。
  5. 当在handleInc中console.log(view),输出下面内容:
    这里写图片描述
  6. 当在handleInc中console.log(actions),输出下面内容:
    这里写图片描述
  7. 当在handleInc中console.log(INC),输出下面内容:这里写图片描述

总结:访问链接,进到对应controller中,根据View首次渲染,当点击任意一个事件,anctions(model中的改变数据)全部挂载,store也被填充,调用事件对应的handler函数,改变状态,重新渲染View.

redux的基本工作流程为store进行管理state和reducers,reducers接收一个action和原始的state,生成一个新的state,dispatch进行触发一个action,打一个比方:store就好比是一个银行,state就是银行中存的钱,reducers就是银行的用户管理系统,dispatch就是取款机,action就是取款机发出的请求,component就是用户。所以当我们要完成一个取钱的过程,首先就是用户(component)通过取款机(dispatch)发起一个(action)取款的请求,当银行的用户管理系统(reducers)接收到请求以后,调取用户的原来的账户信息(old state),进行相应(action)操作,如果没有什么问题则更改账户信息生成新的账户资料(new state),并把钱取给用户(返回给component)。

猜你喜欢

转载自blog.csdn.net/kellywong/article/details/81224977