能否通过编程方式挂载React Class组件？MVVM适配setState报错求助

核心问题解答 #

完全可以将MVVM方案里的函数组件替换为类组件使用，你遇到的setState报错和模式本身无关，是viewModel和类组件实例的绑定时机错误导致的。

报错原因分析 #

你当前的写法是在类组件的render方法中直接将组件实例this传给viewModel生成逻辑，而render执行阶段组件还未完成挂载流程，此时viewModel生成的事件处理函数持有了还没挂载的实例引用，点击触发事件调用setState时就会抛出对应警告。同时多次render会重复生成viewModel实例，也会导致上下文引用错乱。

修复方案 #

调整viewModel和类组件的绑定时机，具体修改点如下：

• 在类组件的构造函数中初始化viewModel的基础结构，不要直接绑定实例this
• 将完整的绑定逻辑移到componentDidMount生命周期中执行，该阶段触发时组件已经完成挂载，调用setState不会触发警告
• 把viewModel返回的状态、方法挂载到类实例的自定义属性上，不要在render中重复生成实例
• 在componentWillUnmount中清空viewModel引用，避免组件卸载后异步逻辑触发setState造成内存泄漏

示例实现代码 #

import React from 'react';

// 计数器viewModel逻辑
function counterViewModel(instance) {
  return {
    get count() {
      return instance.state.count
    },
    increment: () => {
      instance.setState(prev => ({ count: prev.count + 1 }))
    }
  }
}

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    // 预留viewModel挂载位
    this.vm = null;
  }

  componentDidMount() {
    // 组件挂载完成后再绑定实例生成viewModel
    this.vm = counterViewModel(this);
    // 触发一次更新同步viewModel状态到视图
    this.forceUpdate()
  }

  componentWillUnmount() {
    this.vm = null;
  }

  render() {
    // 未初始化完成时渲染加载态，避免事件绑定空引用
    if (!this.vm) return <div>加载中...</div>
    return (
      <div>
        <p>计数：{this.vm.count}</p>
        <button onClick={this.vm.increment}>增加计数</button>
      </div>
    )
  }
}

内容的提问来源于stack exchange，提问作者atrincas