React第三方组件2

1、React第三方组件2(状态管理之Refast的使用简单使用)---2018.01.29

2、React第三方组件2(状态管理之Refast的使用异步修改state)---2018.01.30

3、React第三方组件2(状态管理之Refast的使用扩展ctx)---2018.02.31

4、React第三方组件2(状态管理之Refast的使用中间件middleware使用)---2018.02.01

5、React第三方组件2(状态管理之Refast的使用LogicRender使用)---2018.02.02

开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2

Refast 支持自定义一个中间件，帮助用户在组件 setState 之前，进行数据比对、条件执行、记录日志、数据回溯等特定的操作。

这里以记录日志的功能来说明中间件的写法和用法。记录日志的功能会帮我们在每次 state 更新时，都将新的 state 记录下来，使得 state 的更新历史清晰透明。

我们今天来用下Refast的中间件 middleware！

我们要实现回退跟前进功能！

废话不多说，直接上代码！

1、建立demo6

把demo5复制一份程demo6

然后在 demo -> Index.jsx 文件里 把路由加上！

2、引入 middleware

constlogState= ctx => next => (...args) => {

console.log('######### PRINT STATE LOG #########');

console.log('ctx:',ctx.getState().list,newDate().getTime());

console.log('args:',args[].list,newDate().getTime());

// 如果不执行 next， 则中止组件 state 更新

next(...args);

};

// logState 可以是一个函数

// 也可以是一个函数组, 从前到后依次执行

Refast.use('middleware',[logState]);

3、看下浏览器

我们可以看到，只要是更新状态，旧状态和新状态都会被打印出来

4、实现 前进 与后退功能

修改 logic.js 文件

完整代码

importapiRequestAsyncfrom'../../../public/js/apiRequestAsync';

export default{

defaults(props) {

return{

list: [],

step:1,

back:false

}

},

back(,data,step) {

setState({back:true,list: data,step: step})

},

handleAdd(,title) {

if(title) {

letlist = getState().list;

list.push({id: list.length+1,title: title,status:1});

setState({list: list,step: getState().step+1,back:false});

}else{

alert('不能为空')

}

},

handleItemEdit(,someState) {

let= someState,list = getState().list;

list.find(data => data.id=== id).status= status;

setState({list: list,step: getState().step+1,back:false})

},

asyncgetTodoList() {

lettodoList = {};

try{

todoList =awaitapiRequestAsync.post('todoList');

fn.Toast.show('操作成功');

setState({list: todoList.list,step:2});

}catch(error) {

fn.Toast.show(error);

}

}

}

新加了 step，back 状态

step：记录步骤数量，初始化为第1步

back ：是否是前进与后退操作

如果是前进与后退操作，则back为真，step接收传过来的步骤值！

不管是添加还是编辑，都会增加一步

获取完数据，其实是第2步，初始化是第1步

5、修改 TodoList.jsx文件

完整代码如下：

importReactfrom'react';

importRefast,from'refast';

importfrom'../../common/layer';

// 引入 logic.js

importlogicfrom'./logic';

importListfrom'./List';

import'../../../public/css/todoList.pcss';

constlogState= ctx => next => (...args) => {

console.log('######### PRINT STATE LOG #########');

console.log('ctx:',ctx.getState().list,newDate().getTime());

console.log('args:',args[].list,newDate().getTime());

if(!args[].back) {

letrefast_todoList_log = JSON.parse(localStorage.getItem('refast-todoList-log'));

refast_todoList_log.push(args[].list);

localStorage['refast-todoList-log'] = JSON.stringify(refast_todoList_log);

}

// 如果不执行 next， 则中止组件 state 更新

next(...args);

};

// logState 可以是一个函数

// 也可以是一个函数组, 从前到后依次执行

Refast.use('middleware',[logState]);

classTodoListextendsComponent {

constructor(props) {

super(props,logic);

}

componentDidMount() {

localStorage.setItem('refast-todoList-log',JSON.stringify([[]]));

this.dispatch('getTodoList');

}

render() {

let=this.state,=this;

letrefast_todoList_log = JSON.parse(localStorage.getItem('refast-todoList-log'));

return(

this.dispatch('handleAdd',this.refs['todoInput'].value)}>添加

全部

未删除

已删除

一共步,当前第 步

{

if(step >=2) {

this.dispatch('back',refast_todoList_log[step -2],step -1)

}else{

alert('不能再后退了')

}

}}>后退

{

if(step < refast_todoList_log.length) {

this.dispatch('back',refast_todoList_log[step],step +1)

}else{

alert('不能再前进了')

}

}}>前进

);

}

}

export defaultTodoList;

我们把日志记录在 本地localStorage，你也可以不这么做，也可以再存一个状态

组件渲染完，初始化 refast-todoList-log 为 数组里有个空数组

渲染的时候去取这个值

这一刻为前进和后退按钮，具体逻辑就不细讲了，大家自己想下！

6、我们看下浏览器效果

OK 实现完成

本文完

禁止擅自转载,如需转载请在公众号中留言联系我们!

感谢童鞋们支持!

如果你有什么问题,可以在下方留言给我们!