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

当前回答

有几种方法来渲染你的组件:

最简单的解决方案是使用forceUpdate()方法:

this.forceUpdate()

另一个解决方案是在状态下创建未使用的键(nonUsedKey) 然后调用setState函数更新这个nonUsedKey:

this.setState({ nonUsedKey: Date.now() } );

或者重写所有当前状态:

this.setState(this.state);

道具改变也提供了组件渲染。

2019-03-19 13:55:31

其他回答

只是另一个回复来支持接受的答案:-)

React不鼓励使用forceUpdate()，因为他们通常对函数式编程有一种非常“这是唯一的方法”的方法。这在很多情况下是没问题的，但许多React开发人员都有oo背景，使用这种方法，监听可观察对象是完全可以的。

如果你这样做，你可能知道你必须重新渲染时，可观察对象“火灾”，因此，你应该使用forceUpdate()，它实际上是一个加，shouldComponentUpdate()是不涉及在这里。

像MobX这样的工具，采用oo方法，实际上是在表面之下做这件事(实际上MobX直接调用render())

2018-11-01 09:44:05

我通过执行以下操作避免了forceUpdate

错误方法:不使用索引作为键

this.state.rows.map((item, index) =>
   <MyComponent cell={item} key={index} />
)

正确方法:使用数据id作为键，它可以是一些guid等

this.state.rows.map((item) =>
   <MyComponent item={item} key={item.id} />
)

所以通过这样的代码改进，你的组件将是唯一的，呈现自然

2017-08-06 04:42:16

为了完整性，你也可以在功能组件中实现:

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

请注意，使用强制更新机制仍然是不好的做法，因为它违背了反应的心态，所以如果可能的话仍然应该避免。

2019-10-22 21:32:36

所以我想我的问题是:React组件需要有状态吗要重新渲染?是否有一种方法强制组件更新不改变状态的需求?

其他答案试图说明你可以这样做，但关键是你不应该这样做。即使是改变密钥这种俗气的解决方案也没有抓住重点。React的强大之处在于放弃手动管理内容何时应该呈现的控制，而只是关注内容应该如何映射到输入上。然后供给输入流。

如果您需要手动强制重新渲染，那么几乎可以肯定您做得不对。

2016-09-08 16:42:08

你可以有几种方法:

1. 使用forceUpdate()方法:

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

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

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