reactjs - 你能在不调用 setState 的情况下强制 React 组件重新渲染吗？

Question

我有一个外部(组件的)可观察对象，我想监听它的变化。当对象更新时，它会发出更改事件，然后我想在检测到任何更改时重新渲染组件。

使用顶级 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 组件需要拥有状态才能重新渲染吗？有没有办法强制组件按需更新而不改变状态？

Answer 1

在类组件中，您可以调用 this.forceUpdate() 来强制重新渲染。

文档:https://facebook.github.io/react/docs/component-api.html

在函数组件中，没有 forceUpdate 的等效项，但您可以 contrive a way to force updates with the useState hook .