useState 与 useEffect - 设置初始值

Question

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

1. 为了将初始空值分配给player功能组件中的一段状态（比方说），以下两种方法是相同的还是在某些方面有所不同？

方法一：

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

方法B：

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

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

---

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

Answer 1

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

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

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

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

例子：

如果您在运行此示例时打开开发工具，则会debugger在内部暂停，useEffect并且您将看到没有任何内容被渲染（“安装”阶段），这可能是不可取的。如果您要编辑代码并编写useState(initialData)，您会看到第一次渲染确实包含了正确的状态（当debugger暂停代码执行时）。

const {useState, useEffect} = React

const App = ({initialData}) => {
  const [value, setValue] = useState('') 

  useEffect(() => {
    debugger; // at this point, the component has already been rendered
    setValue(initialData)
  }, [])

  return value
}

ReactDOM.render(<App initialData={''} />, 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>