wx-react响应式更改数据刷新界面

微信小程序提供获取data数据的方式和修改数据的方式分别为this.data.x和this.setData({})，无论是获取数据或者修改数据都显得较为繁琐，且如果x为一个对象或者数据，只修改其值页面不会自动刷新，需要调用this.setData({x: new x})更改数据，刷新界面。所以开发了reactive这个比较小的库来进行数据的响应式处理，使访问和修改值的开发效率更高（同时修改多个属性值建议使用this.setData()方法）

使用前提

• 安装reactive为依赖

  • npm install wx-react --save
  • yarn add wx-react

• 需要正确配置小程序中npm的使用

• 项目使用npm配置，需要在project.config.json中增加如下配置并使用微信开发工具构建npm

"packNpmManually": true,
"packNpmRelationList": [
    {
        "packageJsonPath": "package.json",
        "miniprogramNpmDistDir": "./miniprogram"
    }
]

使用方式

• onLoad()生命周期中调用initReactive(this);完成直接this.x代理到this.data.x

• 调用reactive方法将对象或数组转成代理对象，第一个参数固定this，第二个为需要代理的对象。

  Page({
    data: {
      todoList: []
    },
    onLoad(){
      // 步骤一、必须调用
      initReactive(this);
      
      // 步骤二 将目标对象（todoList）转为代理对象
      this.todoList = reactive<TodoItem[]>(this, [{ id: Date.now(), title: 'い 狂奔的蜗牛', finished: false }]);
    }
  })
  

TodoList示例

TS/JS逻辑

import { reactive, initReactive } from 'wx-react';
/*
 * @Author: い 狂奔的蜗牛
 * @Date: 2021-12-26 13:58:16
 * @Description: todoList
 */
interface TodoItem {
  id: number;
  title: string;
  finished: boolean;
}
Page({
  data: {
    todoList: [], // 待办事项列表
    inputStr: '', // 输入框输入值,
    options: {}
  },
  onLoad() {
    // 必须执行initReactive(this);
    initReactive(this);
    
    // 直接方位或设置值，无需this.data.todoList或this.setData({todoList:[]})
    // 将todoList转为响应式
    this.todoList = reactive<TodoItem[]>(this, [{ id: Date.now(), title: 'い 狂奔的蜗牛', finished: false }]);
    this.options = reactive<{ title: string }>(this, { title: 'TodoList' });
  },
  // 输入事件
  handleInput(e: any) {
    // 直接访问data中的属性
    this.inputStr = e.detail.value;
  },
  // 添加待办
  handleAdd() {
    if (!this.inputStr) {
      return;
    }
    // 直接修改值 会自动刷新页面
    this.todoList.push({ id: Date.now(), title: this.data.inputStr, finished: false });
    this.inputStr = '';
  },
  // 删除待办
  handleDelete(e: any) {
    const index = e.currentTarget.dataset.index * 1;
    // 直接修改值 会自动刷新页面
    this.todoList.splice(index, 1);
  },
  // 完成待办
  handleFinished(e: any) {
    const index = e.currentTarget.dataset.index * 1;
    // 直接修改值 会自动刷新页面
    this.todoList[index].finished = !this.todoList[index].finished;
  },
  // 切换title
  handleToggleTitle() {
    // 直接修改值 会自动刷新页面
    this.options.title = 'TodoList - ' + Date.now().toString().slice(-6);
  }
});

效果图

GitHub项目地址