我的理解是,您不应该更改渲染函数中的状态,因为这将导致无限重新渲染或组件。
这很有道理,但我发现自己处于特殊情况。我正在构建一个离线应用程序,我正在使用离线存储系统来检索数据。现在,无论何时调用某个方法来获取某些数据,都会检查缓存,如果它未过期,则该组件将能够访问该数据,因此没有任何反应,但如果它已过期,则会调用API,即数据更新并重新呈现感兴趣的组件。
这些方法会在第一次调用组件时改变组件的状态,因为它们会去API获取新数据并重新渲染,然后它们不会再改变状态,因为数据已经在缓存。
现在,我可以在组件中调用这些方法将挂载,这就是我现在正在做的事情,但如果我被迫重新调用它们,我需要卸载并重新安装组件。这是唯一可行的方法吗?
谢谢!
答案 0 :(得分: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
而使组件重新渲染。
希望我帮助过。