文档介绍：React Native进阶
Redux架构和状态管理
Promise
Redux
Action
Reducer
Store
Demo和探讨
Promise知识补充
Promise是JavaScript的一个内置对象,用来作为异步流程处理的解决方式。避免了传统多级回调函数(类比OC的block)造成的callback hell
Promise对象包括了三种状态,初始的pending、完成的fulfilled、出错时的rejected
Promise对象有两个原型方法,then(onFulfilled, onRejected)和catch(onRejected),返回一个新的Promise对象,以实现链式调用。
使用示例: 1. ()(),直接通过raw value生成一个fulfiled和rejected状态的Promise对象 2. 在then()和catch()中,都可以return raw value,。而return reject需要手动写 3. Promise对象可以链式调用,因此可以分拆成多个Promise流程来执行
进阶使用: 1. ([p1, p2]),合成一个新Promise对象,当Promise数组全部fulfilled时fulfilled,任一个rejected时rejected 2. ([p1,p2]),合成一个新Promise对象,当Promise数组任一个fulfilled时fulfilled,任一个rejected时rejected 3. ()对应then(values, error),values为数组
探讨:async await使用
除去Promise,ES7的async/await语法也是一种处理异步的解决方式,对于异步方法,我们需要在函数前声明关键字async,同时,在需要等待某个异步函数返回的时候,通过await asyncFunction就可以在不真正阻塞线程的情况下的到异步返回数据。
为了处理错误,async/await方法一般搭配try/catch来处理
async/await可以与Promise对象搭配使用,在Promise的fulfilled时,await的到返回值。而rejected时,用try/catch捕获到rejected value
正题-Redux架构和状态管理
背景:
1. RN的state(可变,子组件不可见)和props(不可变,子组件可见)的设计,在面对大型项目时候,容易因为不经意修改state造成状态混乱,组件渲染错误
2. RN使用了Virtual DOM,不需要Target绑定->Action修改UI属性,只要当状态变化,render新状态下的组件,数据单向传递,而MVC的设计模式存在双向数据流。
3. RN不易进行测试,Redux提供了非常方便的mock测试方式
Redux开发环境
安装Redux:
npm install --save redux
安装React Native和Redux绑定库:
npm install --save react-redux
安装Redux Thunk异步Action中间件:
npm install --save redux-thunk
Redux的三个原则
单一数据源
整个应用的 state 被储存在一个对象树中,对象树存在于唯一的 store 中。store中的 state 绑定到组件
State 是只读的
惟一改变 state 的方法就是触发 action。action 是一个含有 type 属性的普通JS对象,type 可以用常量表示事件。
使用纯函数来执行修改
编写 reducers 来描述对应action如何修改 state 。一般可以用 switch() 来处理,无副作用