Weex里用React写组件，为什么setState后页面不更新？

玉银酱~ 提问于 2026-02-28 13:05:22 阅读 26

移动

我最近在用Weex配合React开发一个移动端页面，遇到个很头疼的问题：调用setState之后，界面完全没反应，数据明明变了但UI就是不刷新。我试过把shouldComponentUpdate删掉、也确认了state确实被修改了，还是不行。

下面是我简化后的代码，就是一个点击按钮加1的功能，但在Weex容器里点完毫无变化，控制台日志显示state已经更新了：

import { createElement, Component } from 'react';
import { render } from 'react-native-weex';

class Counter extends Component {
  state = { count: 0 };

  increment = () => {
    this.setState({ count: this.state.count + 1 });
    console.log('new count:', this.state.count + 1);
  };

  render() {
    return <div onClick={this.increment}>{this.state.count}</div>;
  }
}

我来解答赞 6 收藏

反馈

1 条解答

IT人一诺 Lv1

看了你的代码，问题出在你用了

这种 HTML 标签。Weex 容器里根本不认这些 Web DOM 元素，它只认原生组件。你 render 出来的东西压根没正确映射到原生视图层，所以 setState 触发了但 UI 没法响应。

Weex 环境下得用 Rax 或者 Weex SDK 支持的原生组件，比如、这些。你直接写

，虚拟 DOM 确实变了，但原生渲染层根本不知道咋处理，自然不会刷新。

给你改后的代码：

import { createElement, Component } from 'rax';

import View from 'rax-view';

import Text from 'rax-text';

import { render } from 'rax-weex';



class Counter extends Component {

  state = { count: 0 };



  increment = () => {

    this.setState({ count: this.state.count + 1 });

  };



  render() {

    return (

      

        {this.state.count}

      

    );

  }

}

性能上说一句，你那个 console.log 放在 setState 后面立即打印，拿到的其实是旧值，因为 setState 是异步的。不过这不是你 UI 不更新的原因，核心问题还是组件标签用错了。

另外提个醒，如果你项目刚起步，建议直接确认下技术栈选型。Weex 官方维护力度一般，配合 React 生态坑会比较多，Rax 是阿里专门为这套方案做的兼容层，比直接硬上 React 省心。实在不行转 Vue + Weex 或者直接上 React Native 也行，至少社区方案成熟，少踩这种莫名其妙的坑。

2026-02-28 20:04