在 useState 与 useEffect 中挂钩初始值

Question

我有两个关于 React 的基本问题：

1. 为了给函数组件中的一段状态（比如 player）分配一个初始空值，以下两种方法是否相同或在某些方面有所不同？

方法 A：

const [player, setPlayer] = useState({})

方法 B：

useEffect(() => {
    setPlayer({})
}, []);

2. 当我浏览到 player 时，页面最终会使用来自全局存储的值进行更新，因此我需要避免在当前播放器仍在加载时显示前一个播放器的值。解决此问题的最佳方法是什么？

---

如果您需要更多背景信息以提供帮助，请告诉我。
提前致谢！

Answer 1

直接在 useState(initialData) 中分配初始值时，您是在第一次渲染时使该状态可用。

另一方面，如果您在 useEffect 钩子中设置初始值，它将在安装时设置，但在第一次渲染之后。

useEffect(() => {
    setPlayer(initialData)
}, [])

如果状态变量对于第一次渲染也很重要，那么您应该使用第一种方法。写起来也更短，更有意义。

示例：

如果您在运行此示例时打开 devtools，debugger 将在 useEffect 内暂停，并且您将看到第一次渲染时不会渲染任何内容，这可能不可取。如果您要编辑代码并执行 useState(initialData)，它将在调试器中断时看到第一个渲染确实包含正确的状态。

const {useState, useEffect} = React

const App = ({initialData}) => {
  const [count, setCount] = useState() 

  useEffect(() => {
    debugger;
    setCount(initialData)
}, [])

  return <div>{count}</div>
}

ReactDOM.render(<App initialData={123} />, root)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.0/umd/react-dom.production.min.js"></script>
<div id='root'></div>