状态在React中到底什么时候可用？

Question

前几天我面试了一个前端开发人员的职位，并被逐字询问了这个问题。他指出，这是一个“抓住”的问题。我不确定实际的答案是什么。从生命周期方法的角度来看，它会像componentDidMount一样吗？

感谢您的回复！

Answer 1

组件的状态在构造函数中声明和初始化，这是react调用的第一个组件方法。

  constructor(props) {
    super(props);    
    this.state = {date: new Date()};
  }

在此图中，您可以看到react组件生命周期的所有阶段：

react lifecycle

一旦组件被呈现，它就会在组件作为componentDidMount方法被调用之前就可用

在功能组件的情况下，状态将在呈现阶段可用，因为它是由挂钩useState初始化的

function myComponent(props) {
    const [stateVar, setStateVar] = useState(0);
} 

Answer 2

我认为你的回答是对的，某种程度上。更一般的响应可能是组件的状态在它被挂载时是可用的。

ReactJS的核心是虚拟DOM，它管理状态和道具，并在虚拟DOM中这些道具和状态发生变化时更新您的真实DOM。因此，另一个可能正确的答案是，一旦将其加载到虚拟DOM中，该状态就可用--这发生在组件被挂载时。

编辑:添加到add，因为另一个答案看到了不同的方法:是的，你可以在构造函数中设置状态，你可以把它算作“可用”，但是它对你没有用，因为你的组件在这一点上没有挂载。您甚至可以在构造函数中更改它，但它没有任何用处-没有挂载的组件可以使用此更改。只要父组件没有被渲染，它就不能被任何子组件使用。

可能有一些我在这里看不到的边缘情况，但通常我会说“可用”意味着我何时可以使用它，操纵它，并显示状态的变化-这发生在组件挂载时。

当然，这取决于你的面试官问这个问题的角度，但如果你这样说，我会说这是一个正确的答案。