我有一个外部(组件)，可观察对象，我想监听的变化。当对象更新时，它会发出更改事件，然后我希望在检测到任何更改时重新呈现组件。
使用顶级React。渲染这是可能的，但在组件中它不起作用(这是有意义的，因为渲染方法只返回一个对象)。
下面是一个代码示例:
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组件需要有状态才能渲染吗?是否有一种方法可以在不改变状态的情况下强制组件按需更新?
为了完整性，你也可以在功能组件中实现:
const [, updateState] = useState();
const forceUpdate = useCallback(() => updateState({}), []);
// ...
forceUpdate();
或者，作为一个可重复使用的钩子:
const useForceUpdate = () => {
const [, updateState] = useState();
return useCallback(() => updateState({}), []);
}
// const forceUpdate = useForceUpdate();
参见:https://stackoverflow.com/a/53215514/2692307
请注意，使用强制更新机制仍然是不好的做法，因为它违背了反应的心态，所以如果可能的话仍然应该避免。
我们可以如下所示使用this.forceUpdate()。
class MyComponent extends React.Component {
handleButtonClick = ()=>{
this.forceUpdate();
}
render() {
return (
<div>
{Math.random()}
<button onClick={this.handleButtonClick}>
Click me
</button>
</div>
)
}
}
ReactDOM.render(<MyComponent /> , mountNode);
元素的数学。即使你使用setState重新渲染组件，DOM中的random'部分也只会被更新。
这里所有的答案都是正确的，补充了理解..的问题，因为我们知道重新呈现一个组件不使用setState({})是通过使用forceUpdate()。
上面的代码使用setState运行，如下所示。
class MyComponent extends React.Component {
handleButtonClick = ()=>{
this.setState({ });
}
render() {
return (
<div>
{Math.random()}
<button onClick={this.handleButtonClick}>
Click me
</button>
</div>
)
}
}
ReactDOM.render(<MyComponent /> , mountNode);
