我有一个外部的(组件),可观察的对象,我想监听它的变化。当对象更新时,它会发出更改事件,然后我想在检测到任何更改时重新渲染组件
使用顶级React.render
这是可能的,但在组件中它不起作用(这是有意义的,因为render
方法只返回一个对象)
下面是一个代码示例:
导出默认类MyComponent扩展React.Component{
把手按钮点击(){
这个。render();
}
render(){
返回(
<;div>;
{Math.random()}
<;button onClick={this.handleButtonClick.bind(this)}>;
点击我
<;/button>;
<;/div>;
)
}
}
单击按钮在内部调用this.render()
,但这并不是导致渲染发生的实际原因(您可以在操作中看到这一点,因为由{Math.random()}
创建的文本不会更改)。但是,如果我只是调用this.setState()
而不是this.render()
,它就可以正常工作
所以我想我的问题是:反应组件需要有状态才能重新启动吗?是否有办法强制组件按需更新而不更改状态
在类组件中,可以调用this.forceUpdate()
强制重新加载
文件:https://facebook.github.io/react/docs/component-api.html
在函数组件中,没有与forceUpdate
等效的功能,但是您可以设计一种方法,使用useState
钩子强制更新