在使用React钩子渲染之前分派redux动作

Question

那么，正如标题所说：在呈现组件之前，我们如何调度redux动作？

我有一个特殊的情况，我需要在组件渲染之前清除一些共享状态块（在这种情况下，显示“正在加载...”），这是通过分派redux动作完成的。

现在，如果我将其与<table id="hosts" border="1"> <tbody> <tr> <td><input type="checkbox" checked=""></td> <td>127.0.0.1</td> <td>localhost</td> </tr> <tr> <td><input type="checkbox"></td> <td>255.255.255.255</td> <td>broadcasthost</td> </tr> </tbody> </table> <script> let table = document.getElementById("hosts"); for (let row of table.rows) { for (let cell of row.cells) { if (cell.cellIndex === 0) { // I need to to know if the input inside the cell is checked or not // I can get the cell.InnerHTML, but how do I check if the checkbox is checked or not? } } </script> 一起发送，则会闪烁显示的第一个陈旧/旧数据，然后显示“正在加载...”。

到目前为止，我看到了两种解决方法：

1. useEffect-我喜欢它，但不确定它是否是一个好习惯
2. 重新定义redux模型-我想避免使用的模型，听起来有点奇怪

我可能会创建自定义的useLayoutEffect钩子，但这不会把它带回到hocs / wrapper地狱领域吗？

我只想在第一次渲染之前做一些事情。

Answer 1

useEffect和useLayoutEffect之间的区别在于，后者在初始渲染后同步执行：

  

签名与useEffect相同，但是在所有DOM突变后都会同步触发。使用它从DOM读取布局并同步重新渲染。在浏览器有机会绘制之前，useLayoutEffect内部安排的更新将被同步刷新。

如果闪烁是useEffect的唯一问题，并且随着useLayoutEffect消失，则应使用后者。