Reactjs：仅在渲染中更改状态

Question

我的理解是，您不应该更改渲染函数中的状态，因为这将导致无限重新渲染或组件。

这很有道理，但我发现自己处于特殊情况。我正在构建一个离线应用程序，我正在使用离线存储系统来检索数据。现在，无论何时调用某个方法来获取某些数据，都会检查缓存，如果它未过期，则该组件将能够访问该数据，因此没有任何反应，但如果它已过期，则会调用API，即数据更新并重新呈现感兴趣的组件。

这些方法会在第一次调用组件时改变组件的状态，因为它们会去API获取新数据并重新渲染，然后它们不会再改变状态，因为数据已经在缓存。

现在，我可以在组件中调用这些方法将挂载，这就是我现在正在做的事情，但如果我被迫重新调用它们，我需要卸载并重新安装组件。这是唯一可行的方法吗？

谢谢！

Answer 1

第一步是理解状态管理和渲染需要与你已经解耦。

现在你可以做的是将外部状态/缓存元素视为可观察对象（即我想做observableObject.listen('change', onChangeHandler)之类的事情;你可以使用events库中的EventsEmitter。 You do that listening on componentDidMount and clean up in componentWillUnmout. onChangeHandler非常简单：this.setState({ value: observableObject.value })将触发一个组件重新渲染，该组件应该是一个纯函数，根据传递的props输出DOM节点并且它是自己的state。

这意味着检查缓存是否无效的逻辑不是在值的每个请求（内部渲染）上，而是将对象视为自包含。它会定期检查自己是否需要通知其听众它已更改。由于JS不执行并行执行，因此您不必处理线程和同步。您知道在渲染函数执行的时间点它将具有最新值。如果在渲染检查缓存的逻辑执行并且发现它需要更新之后，它只是通知早期的侦听器，并且因为onChangeHandler更改了state而使组件重新渲染。

希望我帮助过。