Refactoring JD Shopping Mini‑Program Category Page with Taro: Mixed Development Mode and Performance Gains

Taro is a React‑syntax based multi‑platform development framework that enables developers to write a single codebase for mini‑programs, H5, and other targets. JD Shopping adopted a mixed development mode, keeping existing native pages while progressively rewriting selected pages—such as the product category page—with Taro.

Project initialization is performed at the repository root with the command taro init jdwxa-taro, which creates a jdwxa-taro directory containing the Taro source files.

Configuration is adjusted in config/index.js to point the output to the original project's dist folder, disable generation of app.js, app.json, and app.wxss, and set the runtime framework directory to common/:

const config = {
  outputRoot: '../dist',
  weapp: {
    appOutput: false,
    npm: {
      dir: '../../dist/common',
      name: 'taro'
    }
  },
  // ...
}

Page development shifts from the native setData API to React‑style setState, which is asynchronous and automatically batches updates, reducing the performance overhead caused by frequent setData calls. Developers are advised to split large WXML templates into smaller components and can continue to reuse native components, JS modules, and style files.

Performance gains stem from Taro’s automatic state merging and diff optimization. For example, three separate setData calls can be collapsed into a single setState batch, and unchanged data is omitted during rendering:

// Before (three setData calls)
this.setData({ foo: 'Strawberry' })
this.setData({ foo: 'Strawberry', bar: 'Fields' })
this.setData({ baz: 'Forever' })

// After (single setState batch)
this.setState({
  foo: 'Strawberry',
  bar: 'Fields',
  baz: 'Forever'
})

Because setState batches updates within the same event loop, only the changed fields (e.g., bar.foo and bar.bar) are sent to the mini‑program layer, resulting in fewer setData invocations and lower serialization cost.

Additional benefits include TypeScript support, NPM package integration, richer JSX syntax, and easier automated testing. For instance, a utility getImg function can be invoked directly in JSX Image components, allowing static analysis tools to verify that all images are processed correctly.

render() {
  return <Image src={getImg(url, 750)} />
}

The mixed approach allows incremental migration without a full rewrite, and the refactored category page has been stable in production, with both mini‑program and H5 versions available via QR codes.