2022React如何构建小程序？两种实现方案分享

import React, { Component } from 'react'
import { View, Text, Button } from '@leo/components'
import './index.css'

export default class Index extends Component {
  constructor() {
    super()
    this.state = { count: 0 }
    this.onAddClick = this.onAddClick.bind(this)
    this.onReduceClick = this.onReduceClick.bind(this)
  }
  componentDidMount () {
    console.log('执行componentDidMount')
    this.setState({ count: 1 })
  }
  onAddClick() {
    this.setState({ count: this.state.count + 1 })
  }
  onReduceClick() {
    this.setState({ count: this.state.count - 1 })
  }
  render () {
    const text = this.state.count % 2 === 0 ? '偶数' : '奇数'
    return (
      
        
          count: {this.state.count}
        
        
          {text}
        
        +1
        -1
      
    )
  }
}

├── src
│   ├── app.config.js          // 小程序配置文件，用来生成app.json内容      
│   └── pages
│       └── index
│           ├── index.css
│           └── index.jsx      // React代码，即上述计数器代码
└── tsconfig.json

module.exports = {
  pages: ['pages/index/index'],
  window: {
    navigationBarTitleText: 'react-wxapp',
    navigationBarBackgroundColor: '#282c34'
  }
};

/*outputDir为小程序代码生成目录*/
fs.writeFileSync(path.join(outputDir, './app.js'), `App({})`)
fs.writeFileSync(path.join(outputDir, './app.json'), JSON.stringify(config, undefined, 2)) // config即为app.config.js文件内容

  count: {{count}}
  
    {{text}}
  
  +1
  -1

Component({
  data: {},
  onReady () { this.setData(..) },
  handleClick () {}
})

class CustomComponent extends Component {
  state = { }
  componentDidMount() { this.setState(..)  }
  handleClick () { }
}

import React, { Component } from "../../npm/app.js";  // 1.app.js为垫片实现文件
export default class Index extends Component {
  static $$events = ["onAddClick", "onReduceClick"];  // 2.收集JSX事件名称
  constructor() {
    super();
    this.state = {
      count: 0
    };
    this.onAddClick = this.onAddClick.bind(this);
    this.onReduceClick = this.onReduceClick.bind(this);
  }
  componentDidMount() {
    console.log('执行componentDidMount');
    this.setState({
      count: 1
    });
  }
  onAddClick() {
    this.setState({
      count: this.state.count + 1
    });
  }
  onReduceClick() {
    this.setState({
      count: this.state.count - 1
    });
  }
  createData() {                                      // 3.render函数改为createData，删除
    this.__state = arguments[0];                      // 原本的JSX代码，返回更新后的state
                                                      // 提供给小程序进行setData
    const text = this.state.count % 2 === 0 ? '偶数' : '奇数';
    Object.assign(this.__state, {
      text: text
    });
    return this.__state;
  }

}    
Page(require('../../npm/app.js').createPage(Index))。 // 4.使用运行时垫片提供的createPage
                                                      // 方法进行初始化
                                                      // 方法进行初始化复制代码

export class Component {                             // 重写Component的实现逻辑
  constructor() {
    this.state = {}
  }
  setState(state) {                                  // setState最终触发小程序的setData
    update(this.$scope.$component, state)
  }
  _init(scope) {
    this.$scope = scope
  }
}
function update($component, state = {}) {
  $component.state = Object.assign($component.state, state)
  let data = $component.createData(state)            // 执行createData获取最新的state
  data['$leoCompReady'] = true
  $component.state = data
  $component.$scope.setData(data)                    // 将state传递给setData进行更新
}
export function createPage(ComponentClass) {         // createPage实现逻辑
  const componentInstance = new ComponentClass()     // 实例化传入进来React的Class组件
  const initData = componentInstance.state     
  const option = {                                   // 声明一个小程序逻辑的对象字面量
    data: initData,
    onLoad() {
      this.$component = new ComponentClass()
      this.$component._init(this)
      update(this.$component, this.$component.state)
    },
    onReady() {
      if (typeof this.$component.componentDidMount === 'function') {
        this.$component.componentDidMount()           // 生命逻辑映射
      }
    }
  }
  const events = ComponentClass['$$events']          // 获取React组件内所有事件回调方法名称
  if (events) {
    events.forEach(eventHandlerName => {             
      if (option[eventHandlerName]) return
      option[eventHandlerName] = function () {
        this.$component[eventHandlerName].call(this.$component)
      }
    })
  }
  return option
}

import React from 'react'
import ReactDom from 'react-dom'
import App from './App'

ReactDom.render(
  App,
  document.getElementById('root')
)

import ReactReconciler from 'react-reconciler'
import hostConfig from './hostConfig'      // 宿主配置

// 创建Reconciler实例, 并将HostConfig传递给Reconciler
const ReactReconcilerInst = ReactReconciler(hostConfig)

/**
 * 提供一个render方法，类似ReactDom.render方法
 * 与ReactDOM一样，接收三个参数
 * render(, container, () => console.log('rendered'))
 */
export function render(element, container, callback) {
  // 创建根容器
  if (!container._rootContainer) {
    container._rootContainer = ReactReconcilerInst.createContainer(container, false);
  }
  // 更新根容器
  return ReactReconcilerInst.updateContainer(element, container._rootContainer, null, callback);
}

interface VNode {
  id: number;              // 节点 id，这是一个自增的唯一 id，用于标识节点。
  container: Container;    // 类似 ReactDOM.render(, document.getElementById('root') 中的第二个参数
  children: VNode[];       // 子节点。
  type: string | symbol;   // 节点的类型，也就是小程序中的基础组件，如：view、text等等。
  props?: any;             // 节点的属性。
  parent: VNode | null;    // 父节点
  text?: string;           // 文本节点上的文字
  appendChild(node: VNode): void;
  removeChild(node: VNode): void;
  insertBefore(newNode: VNode, referenceNode: VNode): void;
  ...
}

// 实现宿主配置
const hostConfig = {

  ...
  // reconciler提交后执行，触发容器更新数据（实际会触发小程序的setData）
  resetAfterCommit: (container) => {
    container.applyUpdate();
  },
  // 创建宿主组件实例，初始化VNode节点
  createInstance(type, newProps, container) {
    const id = generate();
    const node = new VNode({ ... });
    return node;
  },
  // 插入节点
  appendChild(parent, child) {
    parent.appendChild(child);
  },
  // 
  insertBefore(parent, child, beforeChild) {
    parent.insertBefore(child, beforeChild);
  },
  // 移除节点
  removeChild(parent, child) {
    parent.removeChild(child);
  }
  
  ...
  
};

class Container {
  constructor(context) {
    this.root = new VNode({..});   // 根节点
  }

  toJson(nodes ,data) {            // 将VNode数据格式化JSON
    const json = data || []
    nodes.forEach(node => {
      const nodeData = {
        type: node.type,
        props: node.props || {},
        text: node.text,
        id: node.id,
        children: []
      }
      if (node.children) {
        this.toJson(node.children, nodeData.children)
      }
      json.push(nodeData)
    })
    return json
  }
  applyUpdate() {                 // 供HostConfig配置的resetAfterCommit方法执行
    const root = this.toJson([this.root])[0]
    console.log(root)
    this.context.setData({ root});
  }
  ...
}

import * as React from 'react';
import Container from './container'; // 上文定义的Container
import render from './render';       // 上文定义的render方法

export default function createPageConfig(component) {  // component为React组件
  const config = {  // 小程序逻辑对象字面量，供Page方法注册
    data: {
      root: {
        children: [],
      }
    },
    onLoad() {
      this.container = new Container(this, 'root');
      const pageElement = React.createElement(component, {
        page: this,
      });

      this.element = render(pageElement, this.container);
    }
  };

  return config;
}

import React, { Component } from 'react';
export default class Index extends Component {
  constructor() {
    super();
    this.state = {
      count: 0
    };
    this.onAddClick = this.onAddClick.bind(this);
    this.onReduceClick = this.onReduceClick.bind(this);
  }
  ...

} 
// app.js封装了上述createPage方法
Page(require('../../npm/app.js').createPage(Index))

// 篇幅问题，这里只贴部分数据
{
	"type": "root",
	"props": {},
	"id": 0,
	"children": [{
		"type": "view",
		"props": {
			"class": "container"
		},
		"id": 12,
		"children": [{
			"type": "view",
			"props": {
				"class": "conut"
			},
			"id": 4,
			"children": [{
				"type": "text",
				"props": {},
				"id": 3,
				"children": [{
					"type": "plain-text",
					"props": {},
					"text": "count: ",
					"id": 1,
					"children": []
				}, {
					"type": "plain-text",
					"props": {},
					"text": "1",
					"id": 2,
					"children": []
				}]
			}]
		}
 	...
 	...
 		
	}]
}