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

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

使用顶级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组件需要有状态才能渲染吗?是否有一种方法可以在不改变状态的情况下强制组件按需更新?

当前回答

我们可以如下所示使用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);

2018-07-06 13:10:04

其他回答

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

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

在函数组件中，没有等效的forceUpdate，但您可以通过useState钩子设计一种强制更新的方法。

2015-06-03 16:47:29

你可以有几种方法:

1. 使用forceUpdate()方法:

使用forceUpdate()方法时可能会出现一些故障。一个例子是它忽略shouldComponentUpdate()方法，并将重新呈现视图，而不管shouldComponentUpdate()是否返回false。因此，应该尽可能避免使用forceUpdate()。

2. 通过这个。状态转换为setState()方法

下面这行代码克服了前面例子中的问题: