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

我有一个外部（对于组件）的可观察对象，我想要在其上进行更改。 当对象更新时它会发出更改事件，然后我想在检测到任何更改时重新渲染组件。

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

---

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

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

---

应该避免forceUpdate因为它偏离了React思维模式。 React文档引用了forceUpdate可以使用的例子：

默认情况下，当你的组件的状态或道具改变时，你的组件将重新渲染。 但是，如果这些变化隐式地改变（例如：对象内部的数据改变而不改变对象本身），或者如果render（）方法依赖于其他数据，则可以通过调用来告诉React它需要重新运行render强制性升级（）。

但是，我想提出一个想法，即使对于深度嵌套的对象， forceUpdate也是不必要的。 通过使用不可变数据源，跟踪更改变得便宜; 一个改变总是会导致一个新的对象，所以我们只需要检查对象的引用是否已经改变。 您可以使用Immutable JS库实现不可变数据对象到您的应用程序中。

通常你应该尽量避免使用forceUpdate（），只能从render.props和this.state中读取render（）。 这使得你的组件“纯粹”，你的应用程序变得更简单，更高效。 https://facebook.github.io/react/docs/component-api.html#forceupdate

改变你想要重新渲染的元素的键将起作用。 通过状态设置元素上的关键属性，然后当您想要更新设置状态时使用新的关键点。

<Element key={this.state.key} /> 

然后发生更改并重置密钥

this.setState({ key: Math.random() });

我想指出的是，这将取代密钥正在改变的元素。 例如，如果您有一个文件输入字段，您希望在图片上传后重置该字段，那么这可能很有用。

虽然对OP的问题的真正答案是forceUpdate()我发现这种解决方案在不同情况下很有用。 我还想指出，如果您发现自己使用forceUpdate ，则可能需要查看代码并查看是否有其他方式来执行操作。

---

实际上， forceUpdate()是唯一正确的解决方案，因为setState()可能不会触发重新呈现，如果在shouldComponentUpdate()实现了其他逻辑或仅仅返回false 。

强制性升级（）

调用forceUpdate()将导致在组件上调用render() ，跳过shouldComponentUpdate() 。 更多...

的setState（）

setState()将始终触发重新渲染，除非在shouldComponentUpdate()实现了条件渲染逻辑。 更多...

---

forceUpdate()可以从组件内调用this.forceUpdate()

链接地址: http://www.djcxy.com/p/52125.html

上一篇: Can you force a React component to rerender without calling setState?

下一篇: javascript