如果React面板在渲染过程中计算量很大,并且我们希望在主页面也在渲染某个东西时使其消失,那么它会通过将面板滑动到页面的左侧或右侧并将其隐藏来加快页面更新。(页面在面板和主页面中不断进行数据可视化(。
然而,奇怪的是,如果面板突然变成空白或变成width: 0
,因为状态isMainPageConstantlyUpdating
是true
,并且面板有行:
if (isMainPageConstantlyUpdating) return <div></div>;
在这种情况下,我们真的必须调度一个操作,设置isMainPageConstantlyUpdating
的redux状态,然后将面板向左滑动,然后在transitionend
事件中,调度另一个操作(如isMainPageConstantlyUpdatingForFullWindow
(,如果这是真的,那么执行return <div></div>
吗?(因为面板已经看不见了(。
似乎无论我如何处理,它可能都必须发出这两个动作。可以用一种更简单的方式来处理吗,比如,可以以某种方式使面板内的内容不更新,然后面板滑动离开吗?这样,它所涉及的一切都可以是一个状态,即isMainPageConstantlyUpdating
,我们让它不更新面板,然后把它滑走就可以了。但这与冻结数据有关,React/Redux的工作方式通常是而不是(数据不断正常更新到Redux存储中并提供给组件(。
似乎我们可以使用useMemo
来记忆道具,或者最终的JSX,例如:
const jsx = useMemo(() => { return someResults(); },
[isMainPageConstantlyUpdating || someTimeStamp]);
所以当isMainPageConstantlyUpdating
为假时,数组元素会得到时间戳,并会重新进行计算,但当isMainPageConstantlyUpdating
为真时,它会保持为真,因此不会调用函数来更新内容,但这也使它变得相当复杂。
我正在尝试,似乎有一个解决方案是我们不必管理这个"微观状态;0.3秒后的。
我们可以简单地使用本地状态,例如
const [isNotToRender, setIsNotToRender] = useState(false);
因此,对于任何动画结束,我们都有一个侦听器,然后将isNotToRender
设置为true,当为true时,不返回任何复杂的渲染,如果需要,只返回return <div></div>
。
我知道官方的Redux示例文档基本上会发送几乎所有的内容。这几乎只是为了最终完成某件事而进行的调度。我认为这是在调度一些东西,然后使用useEffect(fn, [someState])
来启动一些行为。这可能是一种方式,但有时我的风格更像是:在需要做的时候做事情,只发送与应用程序的数据或重要状态更相关的内容。