Adapting WeChat Mini Program Component Model to the React Paradigm

The author, a well‑known front‑end expert, observes that their company’s use of WeChat Mini Programs suffers from a lack of componentization, complex configuration, and inconsistent lifecycle naming, and wonders whether a React‑based solution could address these pain points.

Starting with component definition, the Mini Program provides a Component factory without inheritance, splitting a component into JavaScript, CSS, template, and configuration. The author maps Mini Program constructs to React concepts: Page behaves like a React component with data and setData (analogous to state and setState), while App resembles a stateless component exposing globalData.

Component({
  behaviors: [], // mixin‑like, not recommended
  properties: { // propTypes equivalent
    myProperty: 1111,
    myProperty2: 222
  },
  data: {}, // state equivalent
  created(){},   // componentWillMount / getDerivedStateFromProps
  attached(){},   // componentDidMount
  moved(){},      // componentDidUpdate simulation
  detached(){},   // componentWillUnmount
  methods: {}
});

Because Mini Programs lack shouldComponentUpdate, the author suggests intercepting the first argument of setData to emulate the optimization, returning an empty object when the update should be skipped.

this.setData((function(self){
  // invoke original shouldComponentUpdate logic
  if (shouldComponentUpdate(self.properties, self.data)){
    return newData;
  } else {
    return {};
  }
})(this), function(){
  // call original componentDidUpdate logic
  setStateCb && setStateCb.call(this);
  componentDidUpdate && componentDidUpdate.call(this);
});

The CSS layer in Mini Programs, called WXSS, is a simplified CSS without scoped IDs. The author notes that their company already uses preprocessors like Less or Sass, and future work will continue in that direction.

Templates in Mini Programs are isolated files using a JSP‑style syntax with directives such as wx:if and wx:for. They lack two‑way binding, dynamic event handlers, and proper component slots, making them weaker than Vue’s templates.

<view class="wrapper">
  <view>这里是组件的内部节点</view>
  <slot></slot>
</view>

Translating the same structure to JSX yields a familiar React markup.

<div class="wrapper">
  <div>这里是组件的内部节点</div>
  {this.props.children}
</div>

The author also points out that Mini Programs do not expose a ref mechanism; instead, developers can attach custom data‑* attributes and retrieve them in the attached hook via this.dataset. In Mini Programs, properties and data essentially refer to the same object.

Component({
  data:{a:1},
  attached:function(){
    console.log(this.data === this.properties); // true
  }
});

Finally, the configuration JSON for App, Page, and Component can be extracted into static component properties to improve cohesion. The author notes that similar solutions already exist in the ecosystem (e.g., weact, Taro) and that encapsulating Mini Program quirks is essential for rapid business development, much like the evolution from CSS to preprocessors or from ES5 to TypeScript.