我有一个外部(相对于组件而言)的、可观察的对象,我想监听它上面的变化。当该对象更新时,它会触发Change事件,然后我希望在监测到任何变化时重新渲染组件。
使用Top的 React.render 这是可以实现的,但是在组件内部这样做貌似不起作用(某种程度可以理解,因为 render 函数只是返回一个对象,并不会触发重新渲染)。
以下是代码示例:
export default class MyComponent extends React.Component {
handleButtonClick() {
this.render();
}
render() {
return (
<div>
{Math.random()}
<button onClick={this.handleButtonClick.bind(this)}>
Click me
</button>
</div>
)
}
}
点击按钮内部调用了 this.render()函数,但实际并没有触发渲染(可以在实际操作中看到这是因为由 {Math.random()} 生成的文本并没有变化)。不过如果我直接调用 this.setState() 而不是 this.render(),它却能触发渲染。
所以我的问题是:React 组件是否需要有绑定状态并且状态改变后才能重新渲染?有没有办法在不改变状态的情况下强制组件按需更新?