在BackdraftJS中能否在组件内部触发自身重渲染？

解决方案 #

完全可以实现组件内部封装状态、修改后自动触发视图更新的效果，和React组件的state能力一致，改造代码如下：

class ClickButton extends Component.withWatchables('isClicked') {    
    constructor(kwargs) {
        super(kwargs);
        // 内部初始化响应式状态的默认值
        this.isClicked = false;
    }

    // 状态切换逻辑完全封装在组件内部
    toggleButton() {
        this.isClicked = !this.isClicked;
    }

    bdElements() {
        return e.div(
            {
                bdReflect: {
                    className: ['isClicked', c => c ? 'clicked' : '']
                },
                bdAdvise: {click: 'toggleButton'}
            },
            'Click Me'
        );
    }
}

实现说明 #

• 你最开始写的代码不生效，是因为this.clicked是普通实例属性，BackdraftJS不会监听普通属性的变更，自然不会触发视图更新。
• 通过withWatchables声明的isClicked是框架原生支持的响应式属性，只要它的值发生修改，所有绑定了该属性的bdReflect规则都会自动触发对应的DOM更新，不需要手动调用重渲染方法，和React调用setState的效果一致。
• 状态初始化、修改逻辑都完全封装在组件内部，不需要依赖外部传入的回调函数，组件可以独立运行使用。

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