出于好奇,我只想知道如果我setState()
在React Native或ReactJS的Class的构造函数中使用函数会发生什么?如:
constructor(props) {
super(props);
this.setState({title: 'new title'});
}
React将会发生什么生命周期?
我还没有阅读React中的代码。那样写恐怕会造成一些损害。
出于好奇,我只想知道如果我setState()
在React Native或ReactJS的Class的构造函数中使用函数会发生什么?如:
constructor(props) {
super(props);
this.setState({title: 'new title'});
}
React将会发生什么生命周期?
我还没有阅读React中的代码。那样写恐怕会造成一些损害。
构造函数:构造函数用于初始化状态。
状态:包含本地状态的组件具有称为“ this.state”的属性。
SetState:React组件有一个可用的方法setState调用“ this.setState”使React重新渲染您的应用程序并更新DOM。您还可以在setState中跟踪prevstate如果在构造函数中使用setState,则会得到类似这:只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了setState()。
React没有在任何生命周期事件中限制使用setState。 React官方文档链接用于状态更新
有人告诉你不能直接在构造函数外部访问状态。因此,您可以随时随地调用setState。
从技术上讲,setState旨在使用传入的一些新值来更新现有状态,这些新值将在下一个更新周期中通过批处理对React句柄做出反应,因此在setState之后立即使用console.log状态会给出陈旧的值。
现在让我们关注如果在构造函数中调用setState会怎样。React将准备将新状态传递给setState的批处理代码段,并触发更新。
尽管反应并没有阻止您这样做,但是它知道这样做可能会使您陷入困境,因此给您留下了一个很好的信息
警告:setState(...):只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了setState()。这是无人值守。请检查组件的代码。
React会继续加载组件,但此批更新永远不会反映出来。React如何检查您要更新的状态,因此,如果万一您尝试更新setState中尚未处于状态的新值,那么它将通过null检查。
未捕获的TypeError:无法读取null的属性XXXXX
如此得出的结论是:如果您尝试这样做,可能不会导致错误,但是您将不得不承担不良行为,因为即使触发这些更新也不会反映任何错误。
什么
setState
本质上确实是运行了一堆你可能不会在构造函数需要逻辑的。当您执行操作时
state = {foo : "bar"}
,只需将任何东西分配给javascript对象state
,就像对待其他任何对象一样。(state
仅此而已,只是每个组件局部的常规对象)。使用时
setState()
,除了分配给对象外,state
React还重新释放组件及其所有子元素。您不需要在构造函数中使用它,因为无论如何该组件都没有被渲染。