Data binding and state management in mini programs

Basic Concepts of Data Binding

WeChat Mini Programs adopt an MVVM-like pattern for data binding, using the {{}} syntax to establish dynamic associations between the view layer and the logic layer. This binding is one-way: changes in data automatically reflect in the view, but view changes do not affect the data. The basic binding form is as follows:

<!-- WXML -->
<view>{{message}}</view>

// JS
Page({
  data: {
    message: 'Hello World'
  }
})

When data.message changes, the view updates automatically. Mini Programs also support simple expression operations:

<view>{{a + b}}</view>
<view>{{flag ? 'True' : 'False'}}</view>
<view>{{"Welcome" + name}}</view>

Complex Data Binding and List Rendering

For array-type data, the wx:for directive can be used for list rendering. The Mini Program creates new view blocks for each array element, accessible via the index and item variables:

<view wx:for="{{todos}}" wx:key="id">
  {{index + 1}}. {{item.text}} 
  <button bindtap="completeTodo" data-id="{{item.id}}">Complete</button>
</view>

Page({
  data: {
    todos: [
      { id: 1, text: 'Learn Mini Program' },
      { id: 2, text: 'Develop Project' }
    ]
  },
  completeTodo(e) {
    const id = e.currentTarget.dataset.id
    this.setData({
      todos: this.data.todos.filter(todo => todo.id !== id)
    })
  }
})

Conditional Rendering and Dynamic Styles

Both wx:if and hidden can control element display, but their mechanisms differ. wx:if is true conditional rendering, destroying/recreating nodes, while hidden merely toggles the display style:

<view wx:if="{{isAdmin}}">Admin View</view>
<view hidden="{{!isVIP}}">VIP Content</view>

Dynamic style binding supports multiple forms:

<view class="{{isActive ? 'active' : ''}}">Basic Style</view>
<view style="color: {{textColor}}">Inline Style</view>
<view class="static {{dynamicClass}}">Mixed Style</view>

Component Communication and Event Passing

Parent-child component communication is achieved through properties and events. Parent components pass data via properties, while child components notify parents via events:

<!-- Parent Component -->
<child-component 
  title="{{parentTitle}}"
  bind:customEvent="handleChildEvent"
/>

// Child Component
Component({
  properties: {
    title: String
  },
  methods: {
    onTap() {
      this.triggerEvent('customEvent', { detail: 'Data' })
    }
  }
})

Global State Management Solutions

For cross-page state sharing, the following solutions are available:

1. Global App Object:

// app.js
App({
  globalData: {
    userInfo: null
  }
})

// Usage in Pages
const app = getApp()
console.log(app.globalData.userInfo)

2. Behavior Reuse:

// behavior.js
module.exports = Behavior({
  data: {
    sharedData: 'Value'
  },
  methods: {
    sharedMethod() {}
  }
})

3. Custom State Management (Redux-like):

// store.js
const store = {
  state: { count: 0 },
  reducers: {
    increment(state) {
      return { count: state.count + 1 }
    }
  }
}

// Usage in Pages
const newState = store.reducers.increment(store.state)
this.setData({ count: newState.count })

Performance Optimization Practices

Frequent data updates can cause lag, requiring optimization:

1. Merge setData calls:

// Not Recommended
this.setData({ a: 1 })
this.setData({ b: 2 })

// Recommended
this.setData({ 
  a: 1,
  b: 2 
})

2. Avoid large data transfers:

// Not Recommended (transfer entire large array)
this.setData({ bigList: newBigList })

// Recommended (update only necessary data)
this.setData({ 
  'bigList[0].status': 'done' 
})

3. Use pure data fields:

Component({
  options: {
    pureDataPattern: /^_/ // Specify pure data fields
  },
  data: {
    _internalData: 'Not for rendering' 
  }
})

Advanced State Management Libraries

For complex projects, consider third-party state management libraries:

1. WePY Redux:

// store.js
import { createStore } from 'redux'
const reducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT': return state + 1
    default: return state
  }
}
export default createStore(reducer)

// In Components
import store from './store'
store.dispatch({ type: 'INCREMENT' })

2. MobX Mini Program Adaptation:

// store.js
import { observable, action } from 'mobx-miniprogram'
export const store = observable({
  count: 0,
  increment: action(function() {
    this.count++
  })
})

// In Components
import { store } from './store'
Component({
  storeBindings: {
    store,
    fields: ['count'],
    actions: ['increment']
  }
})

Data Persistence Strategies

Mini Programs offer multiple local storage solutions:

1. Synchronous Storage:

wx.setStorageSync('key', 'value')
const value = wx.getStorageSync('key')

2. Asynchronous Storage:

wx.setStorage({
  key: 'user',
  data: { name: 'John' },
  success() {
    wx.getStorage({
      key: 'user',
      success(res) {
        console.log(res.data)
      }
    })
  }
})

3. Database Storage (Cloud Development):

const db = wx.cloud.database()
db.collection('todos').add({
  data: { text: 'New Task' },
  success(res) {
    console.log(res._id)
  }
})

Data Security and Validation

Ensure data security with these measures:

1. Data Filtering:

Page({
  onLoad(query) {
    // Filter invalid parameters
    this.setData({
      id: parseInt(query.id) || 0
    })
  }
})

2. WXS Filtering:

// filter.wxs
function formatPrice(price) {
  return '¥' + price.toFixed(2)
}
module.exports = {
  formatPrice: formatPrice
}

<wxs src="./filter.wxs" module="filter" />
<view>{{filter.formatPrice(price)}}</view>

3. Schema Validation:

// Using libraries like ajv
const schema = {
  type: 'object',
  properties: {
    name: { type: 'string' },
    age: { type: 'number' }
  }
}
const validate = ajv.compile(schema)
if (!validate(data)) {
  console.error(validate.errors)
}

Underlying Principles of Reactive Updates

Mini Programs achieve reactivity through:

1. Data Hijacking:

// Simulated implementation
function observe(data) {
  Object.keys(data).forEach(key => {
    let value = data[key]
    Object.defineProperty(data, key, {
      set(newVal) {
        value = newVal
        updateView() // Trigger view update
      },
      get() {
        return value
      }
    })
  })
}

2. Diff Comparison:

// Actual setData process
const diff = compare(oldData, newData)
nativeRender(diff) // Only update changed parts

3. Batch Updates:

// Asynchronous update queue
let updateQueue = []
function setData(newData) {
  updateQueue.push(newData)
  nextTick(applyUpdates)
}

function applyUpdates() {
  const merged = mergeAll(updateQueue)
  nativeSetData(merged)
  updateQueue = []
}